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>
