位置: 编程技术 - 正文
整理JavaScript对DOM中各种类型的元素的常用操作(javascript总结)
编辑：rootadmin推荐整理分享整理JavaScript对DOM中各种类型的元素的常用操作(javascript总结)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:js对文件的操作,javascript数据整理,js整理代码格式的快捷键是多少,javascript的对象有哪些,javascript总结,js对文件的操作,javascript总结,js整理代码格式的快捷键是多少,内容如对您有帮助，希望把文章链接给更多的朋友！
节点类型nodeType以下是一些重要的nodeType的取值：1： 元素element2： 属性attr3： 文本text8： 注释comments9： 文档document
nodeName,nodeValue
节点关系childNodes: 每个节点都有一个childNodes属性，其中保存着一个NodeList对象
firstChild: 等同于childNodes[0]
lastChild: 等同于childNodes.length-1
同时通过使用列表中每个节点的previousSibling和nextSibling属性，可以访问同一列表中的其他节点。
操作节点appendChild()
appendChild()方法用于向childNodes列表的末尾添加一个节点。添加节点后，childNodes的新增节点、父节点及以前的最后一个子节点的关系指针都会相应地得到更新。
insertBefore()insertBefore()这个方法接受两个参数：要插入的节点和作为参照的节点。
repaceChild()repaceChild()接受两个参数，要插入的节点和要替换的节点
removeChild()只移除而非替换节点。
cloneNode()
item 1item 2item 3
Document类型
Document节点具有下列特征：
nodeType的值为9； nodeName的值为#document; nodeValue的值为null; parentNode的值为null; ownerDocument的值为null;文档的子节点
文档信息
在IE7中调用document.getElementById("myElement");结果会返回<input>元素，如下所示；最好的办法是不让表单字段的name特性与其他元素的ID相同。
特殊集合
document.anchors,包含文档中所有带name特性的a元素; document.forms, 包含文档中所有form元素，与document.getElementsByTagName("form")得到的结果相同; document.images,包含文档中所有的img元素，与document.getElementsByTagName("img")得到的结果相同; document.links，包含文档中所有带href特性的a元素;文档写入
字符串</script>不会被当作外部script标签的关闭标签，因而页面中也就不会出现多余的内容了。
Element类型Element节点具有以下特征：
nodeType的值为1; nodeName的值为元素的标签名; nodeValue的值为null; parentNode可能是Document或Element;要访问元素的标签名，可以使用nodeName属性，也可以使用tagName属性；
取得特性操作特性的DOM方法主要有三个，分别是getAttribute()、setAttribute()、removeAttribute()；注意，传递给getAttribute()的特性名与实际的特性名相同。印象要想得到class的特性值，应该传入"class"而不是"className"。
创建元素使用document.createElement()方法可以创建新元素。
元素的子节点在执行某项操作以前，通常都要先检查一下nodeType属性，如下面的例子所示:
Text类型Text节点具有以下特征：
nodeType的值为3； nodeName的值为"#text"; nodeValue的值为节点所包含的文本； parentNode是一个Element；创建文本节点可以使用document.createTextNode()创建新文本节点。
规范化文本节点normalize()
分割文本节点splitText()
Comment类型comment节点具有下列特征：
nodeType的值为8; nodeName的值为"#comment"; nodeValue的值是注释的内容； parentNode可能是Document或Element； 不支持（没有）子几点；DOM操作技术操作表格
选择符APIquerySelector()方法
querySelectorAll()方法
HTML5与类相关的扩充getElementsByClassName()方法：该方法可以通过document对象及所有HTML元素调用该方法。
焦点管理
HTML5也添加了辅助管理DOM焦点的功能。首先就是document.activeElement属性，这个属性始终会引用DOM中当前获得了焦点的元素。
默认情况下，文档刚刚加载完成时，document.activeElement中保存的是document.body元素的引用。文档加载期间，docuemnt.activeElement的值为null。另外就是新增了document.hasFocus()方法，这个方法用于确定文档是否获得了焦点。
JavaScript中各种引用类型的常用操作方法小结 Object类型Array类型重排序方法:compare升序：functioncompare(value1,value2){if(value1value2){return-1;}if(value1value2){return1;}else{return0;}}varvalues=[0,1,5,,];values.sort(compare);c
javascript创建对象的几种模式介绍 在js中有几种模式可以创建对象，通过对象操作所包含的属性与方法。一般来说，构造函数名称的第一个字母为大写字母，非构造函数名称的第一个字母
JavaScript中的原型继承基础学习教程 大多数编程语言中，都有类和对象，一个类可以继承其他类。在JavaScript中，继承是基于原型的（prototype-based），这意味着JavaScript中没有类，取而代之的
标签: javascript总结
本文链接地址:https://www.jiuchutong.com/biancheng/370027.html 转载请保留说明！上一篇：jQuery Mobile 和 Kendo UI 的比较
