未加星标

1.14 JavaScript5:常用DOM操作

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

创建元素

使用document.createElement()可以创建新元素。这个方法只接受一个参数,即要创建元素的标签名。这个标签名在HTML文档中不区分大小写,在XHTML中区分大小写。

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

使用createElement()方法创建新元素的同时,也为新元素设置了ownerDocument属性,可以操作元素的特性。

div.id = "myDiv"; div.className = "div1";

此时,新元素尚未被添加到文档树中,因此设置各种特性均不会影响浏览器的显示。要添加到文档树,可用appendChild()、insertBefore()、replaceChild()。(稍后讲到)

document.body.appendChild(div);

当把元素添加到文档树中后,伺候鬼这个元素做的任何修改都会实时地反应到浏览器中。

在IE中可以为createElement()方法传入完整的元素标签和属性。(只在IE中兼容)

var div = document.createElement("<div id=\"mydiv\" class=\"div1\"></div>");

不能再标签里加其他元素节点或者文本节点,如下的方式和上面的得出的节点一样

var div = document.createElement("<div id=\"mydiv\" class=\"div1\">12212</div>");

创建文本节点

使用document.createTextNode()来创建文本节点,这个方法接受一个参数:要插入节点的文本。与设置已有文本节点的值一样,作为参数的文本将按照HTML或XML的格式进行编码。

document.createTextNode("121212");

可以添加多个文本节点。假如两个文本节点时相邻的同胞节点,那么两个文本节点会连起来,中间不会有空格。

节点关系

(IE9以前不将换行和空格看做文本节点,其他浏览器会)

文本关系如下:

<div id="div1"> <div id="div2">2</div> <div id="div3">3</div> <div id="div4">4</div> </div>

父节点:parentNode

parentNode是指定节点的父节点.一个元素节点的父节点可能是一个元素(Element )节点,也可能是一个文档(Document )节点,或者是个文档碎片(DocumentFragment)节点.

每一个节点都有一个parentNode属性。

对于下面的节点类型: Attr, Document, DocumentFragment, Entity, Notation,其parentNode属性返回null。如果当前节点刚刚被建立,还没有被插入到DOM树中,则该节点的parentNode属性也返回null。

<script type="text/javascript"> var child2 = document.getElementById("div2"); var parent = child2.parentNode; </script>

子节点:childNodes

childNodes 返回包含指定节点的子节点的集合,该集合为即时更新的集合(live collection)。

即时更新就是对节点元素的任意修改都会立即反映到结果里。

<script type="text/javascript"> var child2 = document.getElementById("div2"); var parent = child2.parentNode; var allChilds = parent.childNodes; console.log(allChilds.length) // IE下是3,其他浏览器是7 var nodeAdd = document.createElement("div"); var textAdd = document.createTextNode("这是添加的文本节点"); nodeAdd.appendChild(textAdd); parent.appendChild(nodeAdd); console.log(allChilds.length);// IE下是4,其他浏览器是8 </script>

兄弟节点:nextSibling,previousSibling

nextSibling返回某节点的下一个兄弟节点,previousSibling返回某节点的上一个兄弟节点,没有的话返回null。

注意:可能因为元素换行的原因返回的是text节点。

<script type="text/javascript"> var child3 = document.getElementById("div3"); var next = child3.nextSibling; var previous = child3.previousSibling; console.log(next); // IE下返回div4,其他返回text console.log(previous) // IE下返回div2,其他返回text </script>

第一个或最后一个子节点:firstChild、lastChild

firstChild返回node的子节点中的第一个节点的引用,没有返回null

lastChild返回node的子节点中的最后一个节点的引用,没有返回null

节点元素关系

只算元素,不算文本节点。

以下三个方法用法和节点关系完全一样,只是这三个方法只看元素节点,不管因为空格、换行造成的文本节点或者手动加上去的文本节点。

children: 返回所有元素子节点(IE5+、ff3.5、opera3、chrome,但在IE8及以下会将注释节点看成一个元素节点)

以下两个IE9+才支持

nextElementSibling:返回元素的下一个兄弟元素节点

previousElementSibling: 返回元素的上一个兄弟元素节点

节点操作

appendChild()

appendChild()用于向childNodes列表的末尾添加一个节点,并且返回这个新增的节点。

如果传入到appendChild()里的节点已经是文档的一部分了,那结果就是将节点从原来的位置转移到新位置,任何一个节点不能同时出现在文档中的多个位置。

var returnNode = someNode.appendChild(someNode.firstChild); // 返回第一个节点 console.log(returnNode === someNode.firstChild); // false console.log(returnNode === someNode.lastChild); // true

insetBefore()

insetBefore()可以将节点插入到某个特定的位置。这个方法接受两个参数:要插入的节点和作为参照的节点。

插入节点后,被插入的节点变成参照节点的前一个同胞节点,同时被方法返回。 如果参照节点是null,则与appendChild()执行相同的操作。

// 插入后成为最后一个子节点 var returnNode = someNode.insetBefore(newNode, null); console.log(returnNode === someNode.lastChild); // true // 插入后成为第一个子节点 var returnNode = someNode.insetBefore(newNode, someNode.firstChild); console.log(returnNode === newNode); // true console.log(returnNode === someNode.firstChild); // true // 插入到最后一个子节点的前面 var returnNode = someNode.insetBefore(newNode, someNode.lastChild); console.log(returnNode === someNode.childNodes[someNode.childnodes.length - 2]) // true

替换节点: replaceChild()

replaceChild()接受两个参数:要插入的节点和要被替换的节点。被替换的节点将由这个方法返回并从文档中被移除,同时由要插入的节点占据其位置。

// 替换第一个子节点

var returnNode = someNode.replaceChild(newNode, someNode.firstChild);

使用replaceChild()后,被替换的节点的所有关系指针都会被复制到插入的节点上面。

删除节点:removeChild()

该方法移除节点,接受一个参数,即要移除的节点,同时该方法返回被移除的节点。只能是一个节点,不能是一组节点。

// 移除第一个子节点 var returnNode = someNode.removeChild(newNode, someNode.firstChild);

克隆节点:cloneNode(true/false)

返回调用该方法的节点的一个副本。参数表示是否采用深度克隆,如果为true,则该节点的所有后代节点也都会被克隆,如果为false,则只克隆该节点本身,文本或者换行、空格这些不会复制,因为他们都是一个textNode。

注意: 在DOM4规范中(实现于Gecko 13.0(Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10) , 查看 bug 698391),deep是一个可选参数. 如果省略的话, deep参数的默认值为true,也就是说,深度克隆是默认的.如果想使用浅克隆, 你需要将该参数指定为false。

在旧版本的浏览器中, 你始终需要指定deep参数。

克隆一个元素节点会拷贝它所有的属性以及属性值,当然也就包括了属性上绑定的事件(比如onclick=”alert(1)”),但不会拷贝那些使用addEventListener()方法或者node.onclick = fn这种用JavaScript动态绑定的事件。

注意:为了防止一个文档中出现两个ID重复的元素,使用cloneNode()方法克隆的节点在需要时应该指定另外一个与原ID值不同的ID

var div1 = document.getElementById("div1"); var cloneHtml = div1.cloneNode(true); document.body.appendChild(cloneHtml);

元素选择

HTML代码示例:

<div id="div1"> <p id="div2" class="one" name="nameone">2</p> <div id="div3">3</div> <div id="div4" name="div2">4</div> </div>

querySelector、querySelectorAll(IE8及以上)

Selectors API通过匹配一组选择器的方式来为从DOM中检索Element节点提供一些简单快捷的方法,这比过去必须要在javascript代码中用循环来查找某个你想要的特定元素更快一些。

该规范对于使用Document,DocumentFragment和Element接口的对象都增了两种新方法:

querySelector:返回节点子树内与之相匹配的第一个Element节点。如果没有匹配的节点,则返回null。 querySelectorAll:返回一个包含节点子树内所有与之相匹配的Element节点列表,如果没有相匹配的,则返回一个空节点列表。

注意:由 querySelector()、querySelectorAll()返回的节点列表不是动态实时的(非live Collection)。这和其他DOM查询方法返回动态实时节点列表不一样。

选择器方法接受一个或多个用逗号分隔的选择器来确定需要被返回的元素。例如,要选择文档中所有CSS的类(class)是warning或者note的段落(p)元素,可以这样写:

var special = document.querySelectorAll( "p.warning, p.note" );

也可以通过ID来查询,例如:

var el = document.querySelector( "#main, #basic, #exclamation" );

执行上面的代码后,el就包含了文档中元素的ID是main,basic或exclamation的所有元素中的第一个元素。

querySelector() and querySelectorAll() 里可以使用任何CSS选择器,他们都不是live Collection:

var notLive = document.querySelectorAll("p"); console.log(notLive); document.getElementById("div1").removeChild(document.getElementById("div2")); console.log(notLive); // 上面两个输出都是输出 `p#div2.one`的引用,没有因为删除了`p`标签而使`notLive`的结果发生变化。

getElementById()

返回一个匹配特定 ID的元素。id是大小写敏感的字符串,代表了所要查找的元素的唯一ID,如果没有则返回null。

如果新建一个元素,还没有插入到文档中,则不能通过该方法获取到。

var notLive = document.getElementById("div2"); console.log(notLive.innerHTML); document.getElementById("div1").removeChild(document.getElementById("div2")); console.log(notLive.innerHTML); // 上面输出都是2,说明getElementById()也是**非**live collection

getElementsByTagName()

document.getElementsByTagName() 方法返回一个实时的包含具有给出标签名的元素们的HTMLCollection。指定的元素的子树会被搜索,包括元素自己。返回的 list 是实时的(live collection),意味着它会随着DOM树的变化自动更新。因此,如果对同一个元素,使用相同的参数,是不需要多次调用document.getElementsByTagName() 的。

Element.getElementsByTagName()的搜索被限制为指定元素的后代而不是document

var live = document.getElementsByTagName("p"); console.log(live[0].innerHTML); document.getElementById("div1").removeChild(document.getElementById("di

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

代码区博客精选文章
分页:12
转载请注明
本文标题:1.14 JavaScript5:常用DOM操作
本站链接:https://www.codesec.net/view/611607.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(35)