学习HTML DOM对象，这一篇就够了

文章目录

什么是DOM

DOM（ Document Object Model）：文档对象模型

HTML DOM - 针对 HTML 文档的标准模型

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准

DOM节点

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点

浏览器网页就是一个DOM树形结构，实例如下图所示。

在这里插入图片描述

该树的节点类型有

元素节点——html标签
文本节点——文本

扫描二维码关注公众号，回复： 12332488 查看本文章
属性节点——属性总是被包含在标签里，所以属性节点总是被包含在元素节点当中。

三个节点的关系为：（元素节点（属性节点，文本节点））

通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。

获取DOM节点

方法	描述
getElementById()	返回带有指定 ID 的元素。
getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表。

测试

<!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 ch = father.children;//获取父节点下的所有子节点
   // father.firstChild  获取父节点下第一个子节点
   // father.lastChild   获取父节点下最后一个子节点
   //p1.nextElementSibling  获取子节点的下一个节点
  
</script>
</body>
</html>

在这里插入图片描述

很多时候，需要循环一个父节点的所有子节点，可以通过迭代children属性实现

var
    i, c,
    list = document.getElementById('list');
for (i = 0; i < list.children.length; i++) {
    
    
    c = list.children[i]; // 拿到第i个子节点
}

更新DOM节点

<div id="id1">
</div>
<script>
    var id1 = document.getElementById('id1');
</script>

//修改节点内容
id1.innerText='123'
"123"
id1.innerText='shenming'
"shenming"
//修改节点文本样式为粗体
id1.innerHTML='<strong>shenming</strong>

修改节点的css样式

<div id="id1">

</div>
<script>
    var id1 = document.getElementById('id1');
    id1.innerText = 'abc'
    
    id1.style.color='red';  //属性使用字符串
    id1.style.fontSize='50px';  //下划线改为驼峰命名
    id1.style.padding='20px';
</script>

删除DOM节点

删除节点的步骤

先获取父节点
在通过父节点删除自己

<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');//通过父节点删p1
   
</script>

通过指定下标来删除

遍历父节点中的子节点：

在这里插入图片描述

father.removeChild(father.children[0]);
father.removeChild(father.children[1]);//删除到第二个时浏览器会报错

浏览器报错：father.children[1]不是一个有效的节点。原因就在于删除是一个动态的过程，当节点被删除后，father.children的节点数量已经从2变为了1，索引[1]已经不存在了。

因此，删除多个节点的时后，要注意children属性是时刻都在变化的。

插入DOM节点

当我们获得了某个DOM节点，如果这个DOM节点是空的，例如 < div> < /div> ，那直接使用innerHTML 就可以增加一个元素，相当于“插入”了新的DOM节点

如果这个DOM节点不是空的，那就不能这么做，因为innerHTML会直接覆盖掉原来的所有子节点。

有两个办法可以插入新的节点。

方法一appendChild()

使用appendChild()，把一个子节点追加到父节点的最后一个子节点

测试

<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>
    
    var js = document.getElementById('js'),
    var list = document.getElementById('list');
    list.appendChild(js);//把<p id="js">JavaScript</p>追加到<div id="list">的最后一项
</script>

结果（因为我们插入的js节点已经存在于当前的文档树，因此这个节点首先会从原先的位置删除，再插入到新的位置）

插入前
JavaScript
    
JavaSE

JavaEE

JavaME

插入后
JavaSE

JavaEE

JavaME

JavaScript

从零创建一个新的节点，然后插入到指定位置

    <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');

    //创建一个新节点
    var newP = document.createElement('p');  //创建一个p标签
    newP.id='newP1'; //加上id选择器
    newP1.innerText='hello world';  //给p标签插入文本
    list.appendChild(newP);
    
    /*拓展1：setAttribute() 方法:添加指定的属性，并为其赋指定的值.如果这个指定的属性已存在，则仅设置/更改值。
      如newP.id='newP1'等价于newP1.setAttribute('id','newP1')
    */
    /*拓展2：修改body标签的属性
    var mystyle = document.getElementsByName('style');//创建一个空style标签
    mystyle.Attribute('type','text/css');//设置标签的属性
    mystyle.innerHTML = 'body{background-color:red;}';//设置标签的内容
    var head = document.getElementsByTagName('head')[0];//获得head头部节点
    head.appendChild(mystyle);//把mystyle追加到head头部节点的后面    
    */
</script>

结果

JavaScript
    
JavaSE

JavaEE

JavaME
    
hello world

方法二insertBefore()

把子节点插入到指定的位置,parentElement.insertBefore(newElement, referenceElement);，子节点(newElement)会插入到referenceElement之前

<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 list = document.getElementById('list');
var ee = document.getElementById('ee');
var js = document.getElementById('js');
list.insertBefore(js,ee)//把js节点插在ee节点前面
</script>

效果
在这里插入图片描述