DOM操作指南-优快云博客

在这里插入图片描述 DOM 节点分为三大类：元素节点、文本节点、属性节点。其中，元素节点又叫标签节点，指文档中的各种 HTML 标签；文本节点和属性节点为元素节点的两个子节点，分别表示标签中的文字和标签的属性。通过 getElement 系列方法，可以取到元素节点
在这里插入图片描述

1.获取元素节点

1）通过ID获取（getElementById）

2）通过name属性（getElementsByName）

3）通过标签名（getElementsByTagName）

4）通过类名（getElementsByClassName）

5）通过选择器获取一个元素（querySelector）

6）通过选择器获取一组元素（querySelectorAll）
注：getElementsByClassName和querySelectorAll返回的都是集合，元素可以通过索引(以0为起始位置）来访问

var p = document.querySelectorAll("p");
 p[0].style.color="red"

2.操作文本节点

属性	含义
tagName	tagName 属性返回元素的标签名，即获取节点的标签名
innerHTML	innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML
innerText	innerText 属性用来定义对象所要输出的文本，即它可以用来设置或者获取节点内部的所有文字

注：innerHTML和innerText的区别

1）innerHTML 指的是从对象的起始位置到终止位置的全部内容，包括 HTML 标签，同时保留空格和换行。
2）innerText 指的是从起始位置到终止位置的内容，但它去除 HTML 标签，同时空格和换行也会去掉。
innerText 只适用于 IE 浏览器（现在也适应 Chrome 浏览器），而 innerHTML 是符合
W3C 标准的属性。因此，尽可能地使用 innerHTML，而少用 innerText

3.操作属性节点

3.1.查看属性节点

getAttribute("属性名")

3.2 设置属性节点

setAttribute() 方法添加指定的属性，并为其赋指定的值。如果这个指定的属性已存在，
则仅设置或更改属性值。基本语法如下：

setAttribute("属性名","属性值")

4.修改元素样式

1）className
使用 className 直接设置 class 类，为元素设置一个新的 class 名字

div.className="home"

2)style
使用 style 设置单个属性，为元素设置一个新的样式，注意属性名要使用小驼峰命名法则

div.style.backgroundColor="red"
div.style.display="none"

3)style.cssText
style.cssText 为元素同时修改多个样式。使用 style 或 style.cssText 可以设置多个样式属性

div.style = "background-color:red;color:yellow;"
// 推荐使用第二种；有输入提示
div.style.cssText = "background-color:red;color:yellow;"

5.案例：头部导航栏切换

 <header>
        <div> 联系人</div>
        <div>问题</div>
        <div>推荐</div>
    </header>
    <div class="content">
        <div class="desc1">
           联系人
        </div>
        <div class="desc2">
           问题
        </div>
        <div class="desc2">
            推荐
        </div>
    </div>
  <script>
  //获取元素节点，先获取父节点，在通过父节点获取子节点
        var header = document.querySelector("header");
        var content = document.querySelector(".content");
        var desc = content.querySelectorAll("div");
        var head = header.querySelectorAll("div");
        for (var i = 0; i < desc.length; i++) {
        //设置属性及其属性值
            head[i].setAttribute("index", i);
            head[i].addEventListener("click", function () {
              //排他
                for (var j = 0; j < desc.length; j++) {
                    desc[j].style.display = "none";
                    //修改样式
                    head[j].style.cssText = "background-color:;font-size:20px"
                }
                this.style.cssText = "background-color:#e9e9e9;font-size:22px"
               //获取index属性的属性值
                var index = this.getAttribute("index");
                desc[index].style.display = "block";

            })
        }
    </script>

在这里插入图片描述
点击切换

6.获取层次节点

文档中所有节点相互之间都有关系，包括父子关系、同胞关系。例如，每个节点都有childNodes 属性，保存着一个 NodeList 对象。NodeList 是一种类数组的对象，可以使用
childeNode[0]，childNode.item(1)来访问，同时拥有 length 属性，但并不是 Array 实例。

6.1 父级节点

node.parentNode

注：1.parentNode属性可返回某节点的父节点，注意是最近的一个父节点
2.如果指定的节点没有父节点则返回null

6.2 子节点

6.2.1 childNodes/children

//子节点 childNodes 所有的子节点 包含元素节点 文本节点等等,结果为数组
parentNode.childNodes
//children 获取所有的子元素节点，结果为数组。也是·我们实际开发常用的
parentNode.children

6.2.2 firstChild / firstElementChild/ lastChild / lastElementChild

firstChild(lastChild): 获取元素的第一个(最后一个）子节点，包括按 Enter 键换行等文本节点；
firstElementChild（lastElementChild）：获取元素的第一个（最后一个）元素子节点，不包括按 Enter 键换行等文本节点；如果没有元素子节点，则返回 null

6.3 兄弟节点
nextSibling（previousSibling ）下一个（前一个）兄弟节点包括文本节点或者元素节点等等
nextElementSibling（ previousElementSibling）得到下一个兄弟元素节点

7.操作元素节点

7.1 创建新节点

createElement（“标签名”）
创建一个新的节点，需要配合 setAttribute()方法给新节点设置相关属性。
appendChild（“节点名”）

要创建新的 HTML 元素 (节点)需要先创建一个元素，然后在已存在的元素中添加它

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
//创建新的元素
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
//查找已存在的元素
var element = document.getElementById("div1");
//添加到已存在的元素中
element.appendChild(para);
</script>

insertBefore(新节点名,目标节点名)

以上的实例我们使用了 appendChild() 方法，它用于添加新元素到尾部。
如果我们需要将新元素添加到开始位置，可以使用 insertBefore() 方法:
在这里插入图片描述
其他动态创建元素的方式

document.write()

<script>
document.write("<p>hello</P>")
</script>

element.innerHTML（）

<script>
element.innerHTML("<p>hello</P>")
</script>

三种动态创建元素的区别
在这里插入图片描述

7.2 删除已存在的元素 removeChild

<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>

7.3 替换 HTML 元素 - replaceChild(新节点,被替换节点)

<script>
parent.replaceChild(para, child);
//para为要替换的新元素，child为要替换的元素
</script>

7.4 克隆元素 cloneNode（true/false）

true 表示复制当前节点及所有子节点，false 表示只复制当前节
点，不复制子节点（默认）

<script>
var last=img[0].cloneNode(true);//true为深度克隆
 container.appendChild(last);//将克隆的元素加入 
 </script>

注：
1）浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象。
2）深拷贝，前面加true，完全克隆(拷贝的对象,而不是地址)，修改目标对象不会影响被拷贝对象