JavaScript操作DOM对象
0 核心
浏览器网页就是一个Dom树形结构!
- 获取Dom节点:得到Dom节点
- 更新:更新Dom节点
- 添加:添加一个新的节点
- 删除:删除一个Dom节点
要操作一个Dom节点,就必须要先获得这个Dom节点。
1 获取Dom节点
获得Dom节点代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2');
var father = document.getElementById('father');
var children = father.children; //获取父节点下的所有字节点
// father.firstChild
// father.lastChild
</script>
</body>
</html>
以上为原生代码,之后尽量都使用jQuery();
2 更新节点
<div id="id1">
</div>
<script>
var id1 = document.getElementById('id1');
</script>
操作文本:
id1.innerText = '123456'
修改文本的值id1.innerHTML = '<strong>123</strong>'可以解析HTML文本标签。
操作样式:
id1.style.color = 'red'; //属性使用字符串包裹
"red"
id1.style.fontSize = '20px'; //注意驼峰命名问题
"20px"
id1.style.padding = '2em';
"2em"
3 添加节点
在插入节点时,如果获取的Dom节点是空的,就可以通过innerHTML增加一个元素,但是如果Dom节点已经存在元素,就不可以这么做,因为会产生覆盖,原来元素会丢失。
故对于上述情况,使用追加:
代码测试:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="js">JavaScript</p>
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me">JavaME</p>
</div>
<script>
</script>
</body>
</html>
测试前:
3.1 将已有节点追加到指定位置:
测试代码:
var js = document.getElementById('js');
var list = document.getElementById('list');
list.appendChild(js)
测试后:
3.2 创建一个新的节点并追加:
测试代码:
var list = document.getElementById('list');
var newp = document.createElement('p'); //创建一个p标签
newp.id = 'newp';
newp.innerText = 'Hello Demut';
list.appendChild(newp); //追加
测试结果:
3.3 添加一个标签节点:
测试代码:
//创建一个标签节点, 通过这个属性可以修改任意的值。
var myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript')
list.appendChild(myScript);
成功添加:
3.4 添加一个style标签
测试代码:
var mystyle = document.createElement('style');
mystyle.setAttribute('type','text/css');
mystyle.innerHTML = 'body{background-color:chartreuse;}';//设置标签内容
document.getElementsByTagName('head')[0].appendChild(mystyle);
测试结果:
3.4 .insertBefore()
测试代码:
var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
// 要包含的节点.inserBefore(newNode,targetNode);
list.insertBefore(js,ee);
测试结果:
4 删除DOM节点
步骤: 1. 获取父节点。 2. 通过父节点删除自己。
代码测试:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
</body>
</html>
测试前:
测试代码:(浏览器控制台中)
var self = document.getElementById('p1'); // 获取Dom节点
var father = self.parentElement; //获取p1的父节点
father.removeChild(self);
测试后:
注意: 此处演示一个错误的操作,同样对于上面的测试案例。
// 删除是一个动态的过程
father.removeChild(father.children[0])
father.removeChild(father.children[1])
father.removeChild(father.children[2])
说明:删除多个节点的时候,children是在时刻变化的,删除节点的时候一定要注意!
写在最后
行百里者半九十!
——《战国策·秦策五·谓秦王》
To Demut and Dottie!