《JavaScript学习笔记》- 06.操作DOM对象：获得节点、更新节点、删除结点、插入节点

6、操作DOM对象

DOM：文档对象模型

DOM 是以树状结构组织的HTML文档，文档中每个标签或元素都是一个节点，具体：

• 整个文档是一个文档节点
• 每个HTML标签是一个元素节点
• 包含在HTML元素中的文本是文本节点
• 每个HTML属性是一个属性节点

核心：浏览器对象就是一个DOM树形结构

6.1 获得节点

要操作一个DOM节点，首先必须获得这个节点！

• 使用getElement系列方法访问指定节点

<div>
    <h1>title 1</h1>
    <p id="p1"> paragraph 1 </p>
    <p class="p2"> paragraph 2 </p>
</div>

<script>
    var h1 = document.getElementsByTagName('h1');
    var p1 = document.getElementById('h1');
    var p2 = document.getElementsByClassName('p2')

</script>

• 根据层次关系访问节点

<div id="father">
    <h1>title 1</h1>
    <p id="p1"> paragraph 1 </p>
    <p class="p2"> paragraph 2 </p>
</div>

<script>
    
    // 获取父节点下的第一个子节点
	var childrens = father.children[0]
</script>

6.2 更新节点

<div id="id1">

</div>

<script>
    var id1 = document.getElementById('id1')
</script>

• 操作文本

// 修改文本值
id1.innerText='123';
// 解析HTML标签
id1.innerHTML='<strong>456</strong>';  

• 操作js

id1.style.color='red';
id1.style.fontSize='50px';
id1.style.padding='2em';
// 注：属性使用字符串包裹

6.3 删除节点

步骤：先获取父节点，再通过父节点删除自己

• 例：删除p1节点

<div id="father">
    <p id="p1"> paragraph 1 </p>
    <p id="p2"> paragraph 2 </p>
    <p id="p3"> paragraph 3 </p>
</div>

<script>
    // 先获取自己，再找到父节点
    var p1 = document.getElementById('p1');
    var father = p1.parentElement;
    
    // 删除 p1 节点
    father.removeChild(p1)
    // 还可以删除该父节点下的其他子节点 如p3
    father.removeChild(father.children[2])
</script>

注：删除多个节点时，children是时刻变化的，删除时一定要注意。

6.4 插入节点

获得某个 DOM 节点，假如这个节点是空的，可以通过 innerHTML 增加一个元素；但是如果这个结点原来就存在元素，会产生覆盖。

追加append

实例：

• 在 list 节点之后插入一个节点(已存在标签)

<p id="web"> web 开发</p>

<ul id="list">
    <li id="html"> HTML </li>
    <li id="css"> CSS </li>
    <li id="js"> JavaScript </li>
</ul>

<script>
    // 先获得待操作节点，再将web 追加到 list 后面
    var web = document.getElementById('web'),
        list = document.getElementById('list')
    
    list.appendChild(web)
</script>

• 创建一个新的标签并插入

// 创建一个新的节点
var newP = document.createElement('P');
newP.id = 'newP';
// 等价于newP.setAttribute('id','newP');
newP.innerText = 'Hello Web!';

list.appendChild(newP)

// 创建一个标签节点（通过这个属性可以设置任意的值）
// 效果<script type="text/javascript"></script>
var myScript = document.createElement('myScript');
myScript.setAttribute('type','text/javascript')

• 创建一个style属性标签

// 方法一
var myStyle = document.createElement('style');
myStyle.setAttribute('type','text/css');
myStyle.innerHTML='body{background-color:red;}'
document.getElementsByTagName('head')[0].appendChild(myStyle) 
// 方法二
var body = document.getElementsByTagName('body')；
body[0].style.backgroundColor='red'

insert 前面添加结点

<div id="article">
    <h1 id="h1">title 1</h1>
    <p id="p1"> paragraph 1 </p>
    <p class="p2"> paragraph 2 </p>
</div>

<script>
    var article = document.getElementById('article')
    var h1 = document.getElementById('h1')
    var p1 = document.getElementById('p1')


    // 要包含的结点.insertBefore（newNode，targetNode）
    article.insertBefore(p1,h1)

</script>