DOM总结（上）DOM的增删查改

定义

DOM — > Document Object Model

DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。DOM对象即为宿主对象，由浏览器厂商定义，用来操作html和css功能的一类对象的集合。也有人称DOM是对HTML以及XML的标准编程接口。

基本操作

创建

1.createElement：通过传入标签来创建一个dom

2.createTextNode：用来创建一个文本节点

3.cloneNode：克隆一个节点，有一个参数，true支持深度克隆，false不支持深度克隆

4. createDocumentFragment：用来插入一段dom

增

1.appendChild

A.appendChild(B):将B添加到A子元素的最后一个位置

2.insertBefore

parent.insertBefore(newNode, exitsNode):将newNode添加到exitsNode的前面

3.insertAdjacentElement

它包括两个参数，其中第二个参数是要加的子节点，核心在于第一个参数，有如下的取值

删

1.removeChild

parent.removeChild(child)，删除parent下的child节点，并且返回这个节点

2.replaceChild

parent.replaceChild(newNode,oldNode)，将oldNode替换为newNode

改

修改dom，一般是修改dom的属性，dom的html, text, 表单的值等

1.setAttribute

A.setAttribute(property, value):设置属性property的值为value

2.innerHTML：获取或者设置dom的dom内容

3.innerText：获取或者设置dom的文本内容

4.value：获取或者设置input, select的value

查

document代表整个文档

document.getElementById() //元素id 在Ie8以下的浏览器，不区分id大小写，而且也返回匹配name属性的元素 .

getElementsByTagName() // 标签名

getElementsByName(); //，IE不支持需注意，只有部分标签name可生效（表单，表单元素，img，iframe） .

getElementsByClassName() // 类名 -> ie8和ie8以下的ie版本中没有，可以多个class一起 .

querySelector() // css选择器在ie7和ie7以下的版本中没有 .

querySelectorAll() // css选择器在ie7和ie7以下的版本中没有

----------------------------------------------分割线----------------------------------------------
接下来，要重点介绍几个目前常用的api

1.document.querySelector(css选择器)

根据css选择器来获取dom，如果有多个，返回第一个

dom

  <div class="test">1</div>
  <div class="test">2</div>
  <div class="test">3</div>

执行以下代码

document.querySelector('.test')

<div class="test">1</div>

2.document.querySelectorAll(css选择器)：

返回所有满足条件的元素

以上面的例子为例，如果使用querySelectorAll，那么返回值就是三个元素，这两个api比较相似，只是一个返回一个dom，一个返回多个dom，不展开了

3.获取子节点children

dom代码

    <div id="div1">
        It's me
        <span>child</span>
        <div>
            child2
            <p>leaf</p>
        </div>
    </div>

执行以下代码之后

document.querySelector('#div1').children

得到了两个节点，分别是

<span>child</span>

和

<div>
     child2
     <p>leaf</p>
</div>

由此可见，children获取的是dom元素

4.获取所有子节点childNodes

还是上面的dom结构，来执行以下以下代码

document.querySelector('#div1').childNodes

返回了五个元素

nodes[0] =It's me
nodes[1] =<span>child</span>
nodes[2] =换行符
nodes[3] =<div>
            child2
            <p>leaf</p>
        </div>
nodes[4] =换行符

很明显，它不仅返回了dom子元素，还返回了文本子元素

5.获取父节点parentNode和parentElement

两者大体差不多，区别和children和childNodes类似，不赘述了

6.获取兄弟节点

previousSibling、previousElementSibling、nextSibling、nextElementSibling

推荐使用带Element的，大多数情况下，好像都不需要文本节点

7.获取首尾节点

firstChild、firstElementChild、lastChild、lastElementChild

区别参考上一条

8.getComputedStyle

该方法是window下的一个方法，用来计算一个dom元素生成好之后的style，很全，不过因为chrome下的调试很方便，很少用到这个方法

9.getBoundingClientRect

它是用来获取边距的，很有用

属性操作

1.setAttribute：设置dom的属性

A.setAttribute(name,value),上面有提到，不赘述

2.getAttribute：得到dom的属性

A.getAttribute('id') 获取dom A的属性id

3.removeAttribute移除属性

A.removeAttribute(id) 移除id属性

链接：https://www.jianshu.com/p/9dc52c0c547b
來源：简书