操作DOM的核心就是增删改查

一、节点创建型API（增）

在这里，我将常用的DOM操作api进行分类，首先要介绍的是创建型的api。这一类型的api，简而言之就是用来创建节点的

1.1 createElement

createElement通过传入指定的一个标签名来创建一个元素，如果传入的标签名是一个未知的，则会创建一个自定义的标签，注意：IE8以下浏览器不支持自定义标签

var div = document.createElement("div");

使用createElement要注意：通过createElement创建的元素并不属于html文档，它只是创建出来，并未添加到html文档中，要调用appendChild或insertBefore等方法将其添加到HTML文档树中;

1.2 createTextNode

createTextNode用来创建一个文本节点，用法如下

var textNode = document.createTextNode("一个TextNode");

createTextNode接收一个参数，这个参数就是文本节点中的文本，和createElement一样，创建后的文本节点也只是独立的一个节点，同样需要append Child将其添加到HTML文档树中

1.3 cloneNode

cloneNode是用来返回调用方法的节点的一个副本，它接收一个bool参数，用来表示是否复制子元素，使用如下：

var parent = document.getElementById("parentElement");

var parent2 = parent.cloneNode(true);// 传入true

parent2.id = "parent2";

这段代码通过cloneNode复制了一份parent元素，其中cloneNode的参数为true，表示parent的子节点也被复制，如果传入false，则表示只复制了parent节点

<body>

    <div id="parent">

        我是父元素的文本

        <br/>

        <span>

        我是子元素

        </span>

    </div>

    <button id="btnCopy">复制</button>

    <script>

        var parent = document.getElementById("parent");

        //点击id＝"btnCopy"点击执行执行函数（函数内是一个元素的拷贝）

        document.getElementById("btnCopy").onclick = function(){

            var parent2 = parent.cloneNode(true);

            parent2.id = "parent2";

            document.body.appendChild(parent2);

        }

    </script>

</body>

这段代码很简单，主要是绑定button事件，事件内容是复制了一个parent，修改其id，然后添加到文档中

这里有几点要注意：

和createElement一样，cloneNode创建的节点只是游离有html文档外的节点，要调用appendChild方法才能添加到文档树中

如果复制的元素有id，则其副本同样会包含该id，由于id具有唯一性，所以在复制节点后必须要修改其id

调用接收的bool参数最好传入，如果不传入该参数，不同浏览器对其默认值的处理可能不同

除此之外，我们还有一个需要注意的点：

如果被复制的节点绑定了事件，则副本也会跟着绑定该事件吗？这里要分情况讨论：

如果是通过addEventListener或者比如onclick进行绑定事件，则副本节点不会绑定该事件

如果是内联方式绑定比如

<div onclick="showParent()"></div>

这样的话，副本节点同样会触发事件

1.4 createDocumentFragment

createDocumentFragment方法用来创建一个DocumentFragment。在前面我们说到DocumentFragment表示一种轻量级的文档，它的作用主要是存储临时的节点用来准备添加到文档中

createDocumentFragment方法主要是用于添加大量节点到文档中时会使用到。假设要循环一组数据，然后创建多个节点添加到文档中

<ul id="list"></ul>

<input type="button" value="添加多项" id="btnAdd" />

document.getElementById("btnAdd").onclick = function(){

    var list = document.getElementById("list");

    for(var i = 0;i < 100; i++){

        var li = document.createElement("li");

        li.textContent = i;

        list.appendChild(li);

    }

}

这段代码将按钮绑定了一个事件，这个事件创建了100个li节点，然后依次将其添加HTML文档中。这样做有一个缺点：每次一创建一个新的元素，然后添加到文档树中，这个过程会造成浏览器的回流。所谓回流简单说就是指元素大小和位置会被重新计算，如果添加的元素太多，会造成性能问题。

这个时候，就是使用createDocumentFragment了DocumentFragment不是文档树的一部分，它是保存在内存中的，所以不会造成回流问题。我们修改上面的代码如下

document.getElementById("btnAdd").onclick = function(){

    var list = document.getElementById("list");

    var fragment = document.createDocumentFragment();

    for(var i = 0;i < 100; i++){

        var li = document.createElement("li");

        li.textContent = i;

        fragment.appendChild(li);

    }

    list.appendChild(fragment);

}

优化后的代码主要是创建了一个fragment，每次生成的li节点先添加到fragment，最后一次性添加到list

1.5 创建型API总结

创建型api主要包括

createElement
createTextNode
cloneNode
createDocumentFragment

四个方法.

需要注意下面几点：

它们创建的节点只是一个孤立的节点，
要通过appendChild添加到文档中
cloneNode要注意如果被复制的节点是否包含子节点以及事件绑定等问题
使用createDocumentFragment来解决添加大量节点时的性能问题

二、页面修改形API（包括删除和添加）（删）（改）

前面我们提到创建型api，它们只是创建节点，并没有真正修改到页面内容，而是要调用appendChild来将其添加到文档树中。我在这里将这类会修改到页面内容归为一类。

修改页面内容的api主要包括：

appendChild(追加为子元素)
insertBefore(插入前面)
removeChild(删除子元素)
replaceChild(替换子元素)

2.1 appendChild

appendChild我们在前面已经用到多次，就是将指定的节点添加到调用该方法的节点的子元素的末尾。调用方法如下：

parent.appendChild(child);

child节点将会作为parent节点的最后一个子节点

appendChild这个方法很简单，但是还有有一点需要注意：如果被添加的节点是一个页面中存在的节点，则执行后这个节点将会添加到指定位置，其原本所在的位置将移除该节点，也就是说不会同时存在两个该节点在页面上，相当于把这个节点移动到另一个地方

<div id="child">

    要被添加的节点

</div>

<br/>

<br/>

<br/>

<div id="parent">

    要移动的位置

</div>

<input id="btnMove" type="button" value="移动节点" />

<script>

    document.getElementById("btnMove").onclick = function(){

        var child = document.getElementById("child");

        document.getElementById("parent").appendChild(child);

    }

</script>

这段代码主要是获取页面上的child节点，然后添加到指定位置，可以看到原本的child节点被移动到parent中了。

这里还有一个要注意的点：如果child绑定了事件，被移动时，它依然绑定着该事件

2.2 insertBefore

insertBefore用来添加一个节点到一个参照节点之前，用法如下

parentNode.insertBefore(newNode,refNode);

parentNode表示新节点被添加后的父节点

newNode表示要添加的节点

refNode表示参照节点，新节点会添加到这个节点之前

<div id="parent">

    父节点

    <div id="child">子元素</div>

</div>

<input type="button" id="insertNode" value="插入节点" />

<script>

    var parent = document.getElementById("parent");

    var child = document.getElementById("child");

    document.getElementById("insertNode").onclick = function(){

        var newNode = document.createElement("div");

        newNode.textContent = "新节点"

        parent.insertBefore(newNode,child);

    }

</script>

这段代码创建了一个新节点，然后添加到child节点之前

和appendChild一样，如果插入的节点是页面上的节点，则会移动该节点到指定位置，并且保留其绑定的事件。

关于第二个参数参照节点还有几个注意的地方：

refNode是必传的，如果不传该参数会报错
如果refNode是undefined或null，则insertBefore会将节点添加到子元素的末尾

2.3 removeChild

let oldChild = node.removeChild(child);

//OR

element.removeChild(child);

child 是要移除的那个子节点.
node 是child的父节点.
oldChild保存对删除的子节点的引用. oldChild === child.

被移除的这个子节点仍然存在于内存中,只是没有添加到当前文档的DOM树中,因此,你还可以把这个节点重新添加回文档中,当然,实现要用另外一个变量比如上例中的oldChild来保存这个节点的引用. 如果使用上述语法中的第二种方法, 即没有使用 oldChild 来保存对这个节点的引用, 则认为被移除的节点已经是无用的,在短时间内将会被内存管理回收.

如果上例中的child节点不是node节点的子节点,则该方法会抛出异常.

// 先定位父节点,然后删除其子节点

var d = document.getElementById("top");

var d_nested = document.getElementById("nested");

var throwawayNode = d.removeChild(d_nested);

// 无须定位父节点,通过parentNode属性直接删除自身

var node = document.getElementById("nested");

if (node.parentNode) {

    node.parentNode.removeChild(node);

}

// 移除一个元素节点的所有子节点

var element = document.getElementById("top");

while (element.firstChild) {

    element.removeChild(element.firstChild);

}

2.4 replaceChild

replaceChild用于使用一个节点替换另一个节点，用法如下

parent.replaceChild(newChild,oldChild);

newChild是替换的节点，可以是新的节点，也可以是页面上的节点，如果是页面上的节点，则其将被转移到新的位置

oldChild是被替换的节点

2.5 页面修改型API总结

页面修改型api主要是这四个接口，要注意几个特点：

不管是新增还是替换节点，如果新增或替换的节点是原本存在页面上的，则其原来位置的节点将被移除，也就是说同一个节点不能存在于页面的多个位置

节点本身绑定的事件会不会消失，会一直保留着

三节点查询型API(查)

节点查询型API也是非常常用的

3.1 document.getElementById

这个接口很简单，根据元素id返回元素，返回值是Element类型，如果不存在该元素，则返回null

使用这个接口有几点要注意：

元素的Id是大小写敏感的，一定要写对元素的id
HTML文档中可能存在多个id相同的元素，则返回第一个元素
只从文档中进行搜索元素，如果创建了一个元素并指定id，但并没有添加到文档中，则这个元素是不会被查找到的

3.2 document.getElementsByTagName

这个接口根据元素标签名获取元素，返回一个即时的HTMLCollection类型，什么是即时的HTMLCollection类型呢？

<div>div1</div>

<div>div2</div>

<input type="button" value="显示数量" id="btnShowCount"/>

<input type="button" value="新增div" id="btnAddDiv"/>

<script>

    var divList = document.getElementsByTagName("div");

    document.getElementById("btnAddDiv").onclick = function(){

        var div = document.createElement("div");

        div.textContent ="div" + (divList.length+1);

        document.body.appendChild(div);

    }

    document.getElementById("btnShowCount").onclick = function(){

        alert(divList.length);

    }

</script>

这段代码中有两个按钮，一个按钮是显示HTMLCollection元素的个数，另一个按钮可以新增一个div标签到文档中。前面提到HTMLCollcetion元素是即时的表示该集合是随时变化的，

可以看出其实document.getElementsByTagName返回的是一个数组对象我们可以用数组的方式对其进行操作。

使用document.getElementsByTagName这个方法有几点要注意：

如果要对HTMLCollection集合进行循环操作，最好将其长度缓存起来，因为每次循环都会去计算长度，暂时缓存起来可以提高效率
如果没有存在指定的标签，该接口返回的不是null，而是一个空的HTMLCollection
参数“*”表示所有标签

3.3 document.getElementsByName

getElementsByName主要是通过指定的name属性来获取元素，它返回一个即时的NodeList（节点列表）对象。一般用于获取表单元素的·name·属性

使用这个接口主要要注意几点：

返回对象是一个即时的NodeList，它是随时变化的
在HTML元素中，并不是所有元素都有name属性，比如div是没有name属性的，但是如果强制设置div的name`属性，它也是可以被查找到的
在IE中，如果id设置成某个值，然后传入getElementsByName的参数值和id值一样，则这个元素是会被找到的，所以最好不好设置同样的值给id和name

3.4 document.getElementsByClassName

这个API是根据元素的class返回一个即时的HTMLCollection，用法如下

var elements = document.getElementsByClassName(names);

这个接口有下面几点要注意：

返回结果是一个即时的HTMLCollection，会随时根据文档结构变化
IE9以下浏览器不支持
如果要获取2个以上classname，可传入多个classname，每个用空格相隔，例如var elements = document.getElementsByClassName("test1 test2");

3.5 document.querySelector和document.querySelectorAll

这两个api很相似，通过css选择器来查找元素，注意选择器要符合CSS选择器的规则

document.querySelector

querySelector方法返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。

var el1 = document.querySelector(".myclass");

var el2 = document.querySelector('#myParent > [ng-click]');

querySelector方法无法选中CSS伪元素。

注意，由于返回的是第一个匹配的元素，这个api使用的深度优先搜索来获取元素

<div>

    <div>

        <span class="test">第三级的span</span>

    </div>

</div>

<div class="test">

    同级的第二个div

</div>

<input type="button" id="btnGet" value="获取test元素" />

<script>

    document.getElementById("btnGet").addEventListener("click",function(){

        var element = document.querySelector(".test");

        alert(element.textContent);

    })

</script>

这个例子很简单，就是两个class都包含“test”的元素，一个在文档树的前面，但是它在第三级，另一个在文档树的后面，但它在第一级，通过querySelector获取元素时，它通过深度优先搜索，拿到文档树前面的第三级的元素(文档树前面优先深度优先)

document.querySelectorAll

document.querySelectorAll的不同之处在于它返回的是所有匹配的元素，querySelectorAll方法的参数，可以是逗号分隔的多个CSS选择器，返回所有匹配其中一个选择器的元素。

var matches = document.querySelectorAll("div.note, div.alert");

例子

<div class="test">

    class为test

</div>

<div id="test">

    id为test

</div>

<input id="btnShow" type="button" value="显示内容" />

<script>

    document.getElementById("btnShow").addEventListener("click",function(){

        var elements = document.querySelectorAll("#test,.test");

        for(var i = 0,length = elements.length;i<length;i++){

            alert(elements[i].textContent);

        }

    })

</script>

这段代码通过querySelectorAll，使用id选择器和class选择器选择了两个元素，并依次输出其内容。要注意两点：

querySelectorAll也是通过深度优先搜索，搜索的元素顺序和选择器的顺序无关
返回的是一个非即时的NodeList，也就是说结果不会随着文档树的变化而变化

兼容性问题：querySelector和querySelectorAll在ie8以下的浏览器不支持

3.6 elementFromPoint()

elementFromPoint方法返回位于页面指定位置的元素。

var element = document.elementFromPoint(x, y);

上面代码中，elementFromPoint方法的参数x和y，分别是相对于当前窗口左上角的横坐标和纵坐标，单位是CSS像素。

elementFromPoint方法返回位于这个位置的DOM元素，如果该元素不可返回（比如文本框的滚动条），则返回它的父元素（比如文本框）。如果坐标值无意义（比如负值），则返回null。

小结：

document.getElementById返回一个对象
document.getElementsByName和document.getElementsByClasName返回一个对象数组

四元素属性型操作（属性节点的操作）

4.1 getAttribute()(获取属性)

getAttribute()用于获取元素的attribute值

node.getAttribute('id');

//表示获取node元素的id属性的  ‘值’

4.2 createAttribute()(创建属性)

createAttribute()方法生成一个新的属性对象节点，并返回它。

attribute = document.createAttribute(name);

createAttribute方法的参数name，是属性的名称。

4.3 setAttribute()(设置属性)

setAttribute()方法用于设置元素属性

var node = document.getElementById("div1");

node.setAttribute(name, value);

//name为属性名称 ；value为属性值

例如

var node = document.getElementById("div1");

node.setAttribute("id", "ct");

等同于

var node = document.getElementById("div1");

var a = document.createAttribute("id");

a.value = "ct";

node.setAttributeNode(a);

4.4 romoveAttribute()(删除属性)

removeAttribute()用于删除元素属性

node.removeAttribute('id');

4.5 element.attributes（将属性生成数组对象）

当然上面的方法做的事情也可以通过类似操作数组属性element.attributes来实现

语法

var attr = element.attributes;

示例

// 获取文档的第一个 <p> 元素

var para = document.getElementsByTagName("p")[0];

//获取该元素属性（多个属性会形成一个数组对象）

var atts = para.attributes;

遍历元素的属性

索引有利于遍历一个元素的所有属性。

在以下例子中会遍历文档中 id 为 "paragraph" 元素的属性节点，并打印出来。

<p id="paragraph" style="color: green;">Sample Paragraph</p>

<form action="">

    <p>

        <input type="button" value="显示第一个属性及其值" onclick="showFirstAttr();">

        <input id="result" type="text" value="">

    </p>

</form>

<script type="text/javascript">

    function showFirstAttr() {

        var paragraph= document.getElementById("paragraph");

        var result= document.getElementById("result");

        // 首先，让我们确认这个段落有一些属性。

        //hasAttributes属性返回一个布尔值true或false,来表明当前元素节点是否有至少一个的属性(attribute).

        if (paragraph.hasAttributes()) {

            var attrs = paragraph.attributes;

            var output= "";

            for(var i=attrs.length-1; i>=0; i--) {

                output+= attrs[i].name + "->" + attrs[i].value;

            }

            result.value = output;  //写入 value=""使文本框出现内容

        } else {

            result.value = "没有属性显示了" //写入 value="没有属性显示了"使文本框出现内容

        }

    }

</script>

五 innerText和innerHTML（outerHTML）有什么区别？

innerText

innerText是一个可写属性，返回元素内包含的文本内容，在多层次的时候会按照元素由浅到深的顺序拼接其内容

<div id="test">

    <!--注释-->

    <p>我的名字叫<span>哈哈哈</span></p>

</div>

<script>

    var test = document.getElementById('test')

    console.log(test.innerText);

</script>

返回的结果

‘我的名字叫哈哈哈’

只包含文本节点

innerHTML、outerHTML

innerHTML属性作用和innerText类似，但是不是返回元素的文本内容，而是返回元素的HTML结构，在写入的时候也会自动构建DOM

<div id="test">

    <!--注释-->

    <p>我的名字叫<span>哈哈哈</span></p>

</div>

<script>

    var test = document.getElementById('test')

    console.log(test.innerHTML);

</script>

返回的结果

 <!--注释-->

    <p>我的名字叫<span>哈哈哈</span></p>

包含整个html结构；（元素节点、注释节点、文本节点）

<div id="test">

    <!--注释-->

    <p>我的名字叫<span>哈哈哈</span></p>

</div>

<script>

    var test = document.getElementById('test')

    console.log(test.outerHTML);

</script>

返回的结果

<div id="test">

    <p>我的名字叫<span>哈哈哈</span></p>

</div>

包括自身和包含整个html结构；（元素节点、注释节点、文本节点）

区别：

innerText返回的是元素内包含的文本内容（只返回文本节点类型）；
innerHTML返会元素内HTML结构，包括元素节点、注释节点、文本节点；
outerHTML返回包括元素节点自身和里面的所有元素节点、注释节点、文本节点；

作者：动感超逗
链接：https://www.jianshu.com/p/b0aa846f4dcc
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

DOM的操作（增删改查）的更多相关文章

HTML DOM节点的增删改查
上篇博客中,我们已经初步接触了DOM基础,可是我们学习是为了可以更好地应用,今天我们就来看看DOM节点的增删改查. 无论在哪里,我们想要操作一个东西,总是应该先去获得它.那么我们怎么获得呢? HTML ...
JavaScript---Dom树详解,节点查找方式(直接(id,class,tag),间接(父子,兄弟)),节点操作(增删改查,赋值节点,替换节点,),节点属性操作(增删改查),节点文本的操作(增删改查),事件
JavaScript---Dom树详解,节点查找方式(直接(id,class,tag),间接(父子,兄弟)),节点操作(增删改查,赋值节点,替换节点,),节点属性操作(增删改查),节点文本的操作(增删 ...
Hbase常用操作(增删改查)
Hbase常用操作(增删改查) [日期:2014-01-03] 来源:Linux社区作者:net19880504 [字体:大中小] 运行Eclipse,创建一个新的Java工程“HBa ...
Android-Sqlite-OOP方式操作增删改查
之前写的数据库增删改查,是使用SQL语句来实现的,Google 就为Android开发人员考虑,就算不会SQL语句也能实现增删改查,所以就有了OOP面向对象的增删改查方式其实这种OOP面向对象的增删 ...
DOM节点的增删改查
在开始展开DOM操作前,首先需要构建一棵DOM树. <!DOCTYPE html> <html lang="en"> <head> <me ...
Yii数据库操作增删改查-[增加\查询\更新\删除 AR模式]
在Yii的开发中常常需要去使用Yii的增删改查方法,这些方法又可以多次变化和组合,带来全方位的实现对数据库的处理,下面对这些方法做一些简单的整理和梳理,有遗漏或是BUG,敬请指出.灰常感谢!!! 一. ...
Django数据库操作(增删改查）
Django数据库操作(增删改查) 创建数据库中的一个表 class Business(models.Model): #自动创建ID列 caption = models.CharField(max_l ...
python全栈开发day62-两表操作增删改查，外键，if else模板语法
一.今日内容总结: day62 内容回顾: 1. django有关所有命令: pip install django==1.11.14 django-admin startproject 项目名称 cd ...
java单机操作redis3.2.10和集群操作增删改查
先直接附上单机版的连接和增删改查,7000-7005是端口号 package com.yilian.util; import java.util.HashMap; import java.util.I ...
Android-Sqlite-SQL操作增删改查
一想到Android到数据库,只需要想到一个类 SQLiteOpenHelper,然后写一个类继承 SQLiteOpenHelper,重写构造方法,对数据库进行配置 public class MySQ ...

随机推荐

XAF新手入门 - 类型子系统(Types Info Subsystem)
类型子系统概述类型子系统是XAF的核心概念,但我们平时却很少关注它,它集中存储了模块中的类型,它是生成应用程序模型(Application Model)的基础,它与XAF中其它的概念都有所关联,了解 ...
ATT&CK框架整理(中英文整理)
工作需要了解了一下ATT&CK框架,留个记录.
Ubuntu编译安装php7.4
Ubuntu编译安装php7.4 [root@ubuntu2004 php-7.4.30]#apt install gcc libssl-dev libxml2-dev libsqlite3-dev ...
嵌入式-C语言基础：二级指针
二级指针:可以理解为指向指针的指针,存放的是指针变量的地址. 下面用一级指针来保存一个指针变量的地址: #include<stdio.h> int main() { int *p1; in ...
Kubernetes核心技术Pod
Kubernetes核心技术Pod Pod概述 Pod是K8S系统中可以创建和管理的最小单元,是资源对象模型中由用户创建或部署的最小资源对象模型,也是在K8S上运行容器化应用的资源对象,其它的资源对象 ...
(C++) std::move std::forward及使用
概念 std::ref :针对std::thread,需要把实参显式转换为引用类型: std::move :无条件把参数转换为右值:但是右值赋值给新变量时,实际还要看是否满足右值条件,如const s ...
DP？
杨斌涵//aad69d38 分治优化DP 分治优化1D/1D dp 对于一类 \[f(x) = \min_{k = y}^{x - 1} w(l, r) \] 即所有 \(w(l,r)\) 事先已知, ...
vscode 更新后重启恢复旧版
vscode的自动更新自动安装在C:\Users\admin\AppData\Local\,如果之前的vscode不在默认位置,就会更新出两个版本,如果还用了固定在开始屏幕或者任务栏,则一直在打开旧版 ...
Iris_data_analysis
SVM调用实例--鸢尾花任务描述: 构建一个模型,根据鸢尾花的花萼和花瓣大小将其分为三种不同的品种. 数据集: 每一行数据由4个特征值及1个目标值组成,4个特征值分别为:萼片长度.萼片宽度.花瓣长度 ...
Java实现Excel批量导入数据库
场景说明在实际开发中,经常需要解析Excel数据来插入数据库,而且通常会有一些要求,比如:全部校验成功才入库.校验成功入库,校验失败返回提示(总数.成功数.失败数.失败每行明细.导出失败文件明细-) ...

DOM的操作（增删改查）

操作DOM的核心就是增删改查

目录

一、节点创建型API（增）

1.1 createElement

1.2 createTextNode

1.3 cloneNode

1.4 createDocumentFragment

1.5 创建型API总结

二、页面修改形API（包括删除和添加）（删）（改）

2.1 appendChild

2.2 insertBefore

2.3 removeChild

2.4 replaceChild

2.5 页面修改型API总结

三节点查询型API(查)

3.1 document.getElementById

3.2 document.getElementsByTagName

3.3 document.getElementsByName

3.4 document.getElementsByClassName

3.5 document.querySelector和document.querySelectorAll

兼容性问题：querySelector和querySelectorAll在ie8以下的浏览器不支持

3.6 elementFromPoint()

小结：

四元素属性型操作（属性节点的操作）

4.1 getAttribute()(获取属性)

4.2 createAttribute()(创建属性)

4.3 setAttribute()(设置属性)

4.4 romoveAttribute()(删除属性)

4.5 element.attributes（将属性生成数组对象）

五 innerText和innerHTML（outerHTML）有什么区别？

innerText

innerHTML、outerHTML

DOM的操作（增删改查）的更多相关文章

随机推荐

热门专题

DOM的操作（增删改查）

操作DOM的核心就是增删改查

目录

一、节点创建型API（增）

1.1 createElement

1.2 createTextNode

1.3 cloneNode

1.4 createDocumentFragment

1.5 创建型API总结

二、页面修改形API（包括删除和添加）（删）（改）

2.1 appendChild

2.2 insertBefore

2.3 removeChild

2.4 replaceChild

2.5 页面修改型API总结

三 节点查询型API(查)

3.1 document.getElementById

3.2 document.getElementsByTagName

3.3 document.getElementsByName

3.4 document.getElementsByClassName

3.5 document.querySelector和document.querySelectorAll

兼容性问题：querySelector和querySelectorAll在ie8以下的浏览器不支持

3.6 elementFromPoint()

小结：

四 元素属性型操作（属性节点的操作）

4.1 getAttribute()(获取属性)

4.2 createAttribute()(创建属性)

4.3 setAttribute()(设置属性)

4.4 romoveAttribute()(删除属性)

4.5 element.attributes（将属性生成数组对象）

五 innerText和innerHTML（outerHTML）有什么区别？

innerText

innerHTML、outerHTML

DOM的操作（增删改查）的更多相关文章

随机推荐

热门专题

三节点查询型API(查)

四元素属性型操作（属性节点的操作）