DOM基础

document包含了整个html文档，其本身也是个对象，因此包含了很多的属性以及方法。

常用方法

基础布局

<div id="test"></div>
<div class="test"></div>
<div class="test">
    <p>我是p</p>
</div>

1，getElementsByClassName：IE8及以下是不支持的并且返回值为类数组。

let a = document.getElementsByClassName("test")[0];
console.log(a);

2，getElementsByTagName：这个几乎都是支持的并且返回值为类数组。

let b = document.getElementsByTagName("div")[0]; 
console.log(b);

3，getElementById

let c = document.getElementById("test");
console.log(c);

4，getElementsByName：这个方法是几乎很少用到的并且返回值为类数组。

let d = document.getElementsByName('test');
console.log(d);

5，querySelector：只会在多个相同元素标签内选择出第一个元素标签。

let d1 = document.querySelector("div");
console.log(d1);

6，querySelectAll：querySelectAll选择出来的是所有元素，即便是id获取到的也是一组因此返回值为类数组。

let e = document.querySelectorAll("div")[2];
console.log(e);

需要注意的是：querySelector和querySelectAll它们是html5新引入进来的，其实二者的弱点并不在于兼容性问题，而主要是在于以下两方面原因：

（1）查找时的性能问题(二者比get系列查询速度慢的多，所以一般很少用)
（2）更改数据的不实时性，相当于是在那里做了一个缓存，是没法做到及时更新的。

//为什么是不实时的呢
//首先看一下下面的这个方法
let test = document.getElementsByClassName("test");
//   console.log(test);
//   test[0].remove();
//   console.log(test); //结果是实时性的

//最后我们再来看看querySelectAll
let test1 = document.querySelectorAll(".test");
console.log(test1);
test1[0].remove(); //将它移除掉
console.log(test1); //结果并不是实时性的

常用属性

基本布局：

<div class="test">
    <!-- 我是注释 -->
    <p>我是p标签</p>
</div>

首先我们需要知道都有哪些节点以及相对应的数值（注意：节点是包含元素的）：

（1）元素节点 = 1

（2）属性节点 = 2

（3）文本节点 = 3

（4）注释节点 = 8

（5）document节点 = 9

（6）documentFragment节点 = 11

以下是所有节点常用的一些属性:

1，parentNode

let a = document.getElementsByTagName("p")[0];
console.log(a.parentNode);

注意：document的父节点为null

console.log(document.parentNode) //null

2，childNodes

let b = document.getElementsByTagName("div")[0];
console.log(b.childNodes.length); //长度为5 
console.log(b.childNodes); //[text, comment, text, p, text]

3、4，firstChild lastChild（即所有子节点中的第一个和最后一个子节点）

let c = document.getElementsByTagName("div")[0];
console.log(c.firstChild, c.lastChild);

5、6，nextSibling previousSibling（即所有子节点中的某一个节点的上一个或者下一个节点）

let d = document.getElementsByTagName("p")[0];
console.log(d.nextSibling);
console.log(d.previousSibling);

下面我们主要来学习一下更加重要的元素节点的常用属性，因为在很多情况下我们只需要关注元素节点：

**1，parentElement **

注意：html的父元素为null，也就是html只有父节点document但是并没有父元素。

2，children

let e = document.getElementsByTagName("div")[0];
console.log(e.children);

注意： children.length = childElementCount

let e = document.getElementsByTagName("div")[0];
console.log(e.childElementCount === e.children.length); //true

3。4，firstElementChild 和 lastElementChild（即所有元素节点中的第一个和最后一个元素节点）

5、6，nextElementSibling 和 previousElementSibling（即某一个元素节点的上一个元素节点和下一个元素节点）

7，nodeName（只读属性）：

<div class="box" id="box" style="background-color: green">
    我是文本节点时
    <!-- 我是注释君 -->
    <h1>我是标题标签</h1>
    <a href="">我是超链接标签</a>
    <p>我是段落标签</p>
</div>

<script>
    let box = document.getElementsByTagName("div")[0];

    console.log(document.nodeName); //"#document"
    console.log(box.nodeName); //"DIV"，注意是大写的
    console.log(box.nodeName.toLowerCase()); //转为小写
    console.log(box.nodeName.toUpperCase()); //转为大写
</script>

8，nodeValue（可写属性）

属性、文本、注释节点也都有这个属性。

console.log(box.getAttributeNode("id").nodeValue);//可以通过getAttributeNode获取属性节点

9，nodeType（可读属性）

再次强调这个属性是很重要的，因为我们可以根据其返回回来的各个节点的数值来判断是哪种节点，因此我们需要记得上面各个类型节点所对应的数值。

console.log(box.nodeType);

综合以上学习到的DOM节点的所有方法和属性，我们来写一个案例：获取节点中的所有元素节点

<div>
    <!-- 这是注释 -->
    <h1>前端yyds</h1>
</div>
<script>
    //首先需要获取到所有的节点
    let allNodes = document.getElementsByTagName("div")[0];

    //接下来需要封装一个用于获取节点中的所有元素节点的函数供我们后续使用
    function selectElementNodes(node) {
        let arr = [];
        for (let i = 0; i < node.childNodes.length; i++) {
            if (node.childNodes[i].nodeType === 1) {
                arr.push(node.childNodes[i]);
            }
        }
        return arr;
    }

    console.log(selectElementNodes(allNodes));
</script>

常用操作

1，创建节点

（1）创建元素节点：createElement()；

let div = document.createElement("div");
div.innerHTML = "我是新创建的元素";
document.body.appendChild(div);

（2）创建文本节点：createContext()；

（3）创建注释节点：createComment()；

2，增加节点

（1）appendChild（注意：在appendChild中放入的是dom元素或者节点，而不是字符串）

let div = document.getElementsByTagName("div")[0];
let p = document.createElement("p");
div.appendChild(p)；

div.appendChild("<div></div>"); //这是会报错的

（2）insertBefore方法：在某元素节点前面插入一个节点。

let div = document.getElementsByTagName("div")[0],
    h1 = document.getElementsByTagName("h1")[0],
    h2 = document.createElement("h2");

h2.innerHTML = "我是利用insertBefore方法新增加的元素节点";
div.insertBefore(h2, h1);

3，删除方法

remove()方法用于所要删除的子节点。

let div = document.getElementsByTagName("div")[0],
	h1 = document.getElementsByTagName("h1")[0];
div.remove(h1);