JavaScript学习笔记十四 —— 操作DOM对象

JavaScript学习笔记十四 —— 操作DOM对象

---

参考教程B站狂神https://www.bilibili.com/video/BV1JJ41177di

---

DOM：文档对象模型

核心

浏览器网页就是一个DOM树形结构！

• 更新：更新DOM节点
• 遍历dom节点：得到DOM节点
• 删除：删除DOM节点
• 添加：添加一个新的节点

要操作一个dom节点，就必须要获得这个dom节点

获得dom节点

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

<script>
    //对应css选择器
    var h1 = document.getElementsByTagName('h1');
    var p1 = document.getElementById('p1');
    var p2 = document.getElementsByClassName('p2');
    var father = document.getElementById('father');
    
    var childrens = father.children; //获取父节点下的所有子结点
    father.firstChild; //获取第一个子结点
    father.lastChild; //获取第二个子结点
</script>

这是原生代码，之后通常都是用jQuery()

更新dom节点

id.innerText='内容' //修改文本内容
id.innerHTML='HTML代码' //修改HTML代码

id.style.color = 'red'; //注意使用字符串
id.style.fontSize = '20px' //驼峰命名，不支持用-
id.style.padding = '2em'

删除节点

• 现获取父节点
• 再通过父节点删除

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

<script>
    var self = document.getElementById('p1');
    var father = p1.parentElement;
    father.removeChild(self);

	//删除是一个动态的过程
	father.removeChild(father.children[0]);
	father.removeChild(father.children[1]);
	father.removeChild(father.children[2]);
	//这样删会报错的，因为children[0]被删了之后会动态变化，children[1]会变成children[0]
</script>

创建和插入DOM节点

我们获得了某个Dom节点，如果这个dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个DOM节点已经存在元素了，我们就不能这么干了，会产生覆盖。

<p id="js">JavaScrip</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaSE</p>
    <p id="me">JavaME</p>
</div>

<script>
    var js = document.getElementById('id');
    var list = document.getElementById('list');
    list.appendChild(js); //追加到后面
</script>

    //通过JS 创建一个新的节点
    var newP = document.createElement('p'); //创建一个p标签
    newP.id = 'newP';
    newP.innerText = 'Hello,word';

    list.append(newP); //添加节点

	//创建一个标签接节点
    var myScript = document.createElement('script');
    myScript.setAttribute('type','text/javascript');

insert

list.insertBefore(新节点，原来的节点);  //把新节点插入到原来的节点前面