1.核心
由于HTML文档被浏览器解析后就是一棵DOM树,要改变HTML的结构,就需要通过JavaScript来操作DOM。
始终记住DOM是一个树形结构。操作一个DOM节点实际上就是这么几个操作:
- 更新:更新该DOM节点的内容,相当于更新了该DOM节点表示的HTML的内容;
- 遍历:遍历该DOM节点下的子节点,以便进行进一步操作;
- 添加:在该DOM节点下新增一个子节点,相当于动态增加了一个HTML节点;
- 删除:将该节点从HTML中删除,相当于删掉了该DOM节点的内容以及它包含的所有子节点。
//对应css选择器
var h1 = document.getElementsByName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2');
var father = document.getElementById('father');
var childrens = father.children;//获取父节点下的所有子节点
// father.firstChild
// father.lastChild
2.更新节点
<div id="id1">
</div>
<script>
var id1=document.getElementById('id1');;
</script>
操作文本
id1.innerText='456'
修改文本值id1.innerHTML='<h1>123</h1>'
可以解析HTML文本标签
操作CSS
id1.style.color='red';//属性使用 字符串 包裹
id1.style.fontSize='20px';//-转驼峰命名
id1.style.padding='2em';
3.删除节点
要删除一个节点,首先要获得该节点本身以及它的父节点,然后,调用父节点的removeChild
把自己删掉:
// 拿到待删除节点:
var self = document.getElementById('to-be-removed');
// 拿到父节点:
var parent = self.parentElement;
// 删除:
var removed = parent.removeChild(self);
removed === self; // true
注意到删除后的节点虽然不在文档树中了,但其实它还在内存中,可以随时再次被添加到别的位置。
当你遍历一个父节点的子节点并进行删除操作时,要注意, children
属性是一个只读属性,并且它在子节点变化时会实时更新。
例如,对于如下HTML结构:
<div id="parent">
<p>First</p>
<p>Second</p>
</div>
当我们用如下代码删除子节点时:
var parent = document.getElementById('parent');
parent.removeChild(parent.children[0]);
parent.removeChild(parent.children[1]); // <-- 浏览器报错
浏览器报错: parent.children[1]
不是一个有效的节点。原因就在于,当First
节点被删除后, parent.children
的节点数量已经从2
变为了1
,索引[1]
已经不存在了。
因此,删除多个节点时,要注意children
属性时刻都在变化。
4.插入节点
我们获得了某个Dom节点,假设这个dom节点是空的,我们通过innerHTML就可以增加一个元素了,但是这个DOM节点已经存在元素了,我们就不能这么干了!
<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>
var js = document.getElementById('js');
var list = document.getElementById('list');
list.appendChild(js);//追加到后面
</script>
创建一个新的标签,实现插入
<script>
var js = document.getElementById('js');//已经存在的节点
var list = document.getElementById('list');
// list.appendChild(js);//追加到后面
//通过JS创建一个新的节点
var newP = document.createElement('p');//创建一个p标签
newP.id='newP';
newP.innerText = 'hello,friend';
//创建一个标签节点
var myScript=document.createElement('script');
myScript.setAttribute('type','text/javascript');
//可以创建一个style标签
var myStyle=document.createElement('style');//创建一个空的style标签
myStyle.setAttribute('type','text/css');
myStyle.innerHTML='body{background-color: red;}';//设置标签内容
document.getElementsByTagName('head')[0].appendChild(myStyle);
</script>
insertBefore
var ee=document.getElementById('ee');
var js=document.getElementById('js');
var list=document.getElementById('list');
//要包含的节点.insertBefore(newNode,targetNode);
list.insertBefore(js,ee);