JavaScript DOM可以做什么？

1、通过id获取标签元素

DOM是文档对象模型，它提供了一些属性和方法来方便我们操作document对象，比如getElementById()方法可以通过某个标签元素的id来获取这个标签元素

// 用法
window.document.getElementById('id');
// 例子
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body><h2 id="demo">知数SEO_专注搜索引擎优化和品牌推广</h2>
<script>var h2 = document.getElementById('demo');console.log(typeof(h2));console.log(h2);
</script>
</script>
</body>
</html>

2、操作标签元素的内容

使用DOM可以操作HTML标签元素，写出各种绚丽多彩的特效，最基本的就是操作标签元素的内容。步骤就是先找到要操作的标签元素，接下来对这个标签元素进行操作

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body><h2 id="demo">知数SEO_专注搜索引擎优化和品牌推广</h2><button onclick="update()">点击修改h2标签元素的显示内容</button>
<script>function update(){var h2 = document.getElementById('demo');h2.innerHTML = '这是修改后的内容';}
</script>
</body>
</html>

3、操作标签元素的属性

3.1 获取标签元素的属性

DOM不仅可以操作标签元素的内容还可以操作标签元素的属性。对象都是有属性和方法的，我们获取标签元素的属性的值可以使用element对象的getAttribute()方法，这个方法接受一个属性名，返回对象的属性值

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body><a id="demo" href="https://www.zhishunet.com">知数SEO_专注搜索引擎优化和品牌推广</a><button onclick="getAttr()">点击获取a标签的href属性</button>
<script>function getAttr(){var obj_a = document.getElementById('demo');alert(obj_a.getAttribute('href'));}
</script>
</body>
</html>

3.2、修改标签元素的属性

我们可以获取标签元素的属性的值，也可以修改元素属性的值，DOM提供了setAttribute()方法修改标签元素属性的值

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body><a id="demo" href="https://www.zhishunet.com">知数SEO_专注搜索引擎优化和品牌推广</a><button onclick="getAttr()">点击获取a标签的href属性</button>
<script>function getAttr(){var obj_a = document.getElementById('demo');obj_a.setAttribute('href','http://www.zhishunet.cn');}
</script>
</body>
</html>

其实不仅可以对存在的标签属性的值进行修改，对于不存在的属性，我们可以添加并设置它的值

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body><a id="demo">知数SEO_专注搜索引擎优化和品牌推广</a><button onclick="getAttr()">点击获取a标签的href属性</button>
<script>function getAttr(){var obj_a = document.getElementById('demo');obj_a.setAttribute('href','http://www.zhishunet.cn');}
</script>
</body>
</html>

4、操作标签元素的css样式

操作标签元素的css样式我们需要使用标签元素的style属性

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body><div id="demo" style="width:200px; height:400px;background-color:red;"></div><br><button onclick="update()">点击修改样式</button>
<script>function update(){var obj_a = document.getElementById('demo');obj_a.style.backgroundColor = 'black';}
</script>
</body>
</html>