本文中简要罗列了JavaScript操作Dom的基本方法,其中包括元素查询、文档结构遍历、属性及内容操作、创建节点、插入节点及删除节点等内容。虽然JQuery更便利,但我还是喜欢用原生的API。
通过ID选取元素是最简单和常用的选取元素的方法,ID选择器性能优于其它选择器。
ID不存在,返回 null
。
基于name属性的值选取元素区别于ID选择器。其一,name属性值 不是必须唯一,多个元素可能有同样的名称;其二,name属性只在少数HTML元素中有效,包括表单、表单元素、iframe
及 img
元素。
利用HTML元素的标签名称选取指定类型的元素。
通过HTML的 class 属性值选择元素。
通过CSS样式表选择器的强大语法,来选择元素。返回第一个匹配的元素。
这是最强大的终极选择器
返回父节点,如果 document
对象调用则返回 null
。
返回所有子节点,即NodeList对象。
返回第一个子节点。
返回最后一个子节点。
返回下一个兄弟节点。
返回前一个兄弟节点。
返回节点类型的数字表示。
Element
节点Text
节点Comment
节点Document
节点DocumentFragment
节点返回 Text
节点 或 Comment
节点的值。
返回元素的标签名,以大写形式表示。
返回所有子元素。
元素是节点的一种。
返回所有子元素中的第一个。
返回所有子元素中的最后一个。
返回下一个兄弟元素。
返回前一兄弟元素。
返回子元素的数量。
表示HTML文档元素的 HTMLElement
对象定义了读/写属性,它们对应于元素的HTML属性。HTMLElement
定义了通用的HTML属性,包括id、lang、dir、事件处理程序 onclick
及表单相关属性等。
返回非标准的HTML属性的值。
设置非标准的HTML属性的值。
返回布尔值,用来检测属性是否存在。
删除某一属性。
在HTML5文档中,任意以 data-
为前缀的小写的属性名字都是合法的。这些 “数据集属性” 定义了一种标准的、附加额外数据的方法。
Node节点定义了 attributes
属性,针对 Element 对象,attributes
是元素所有属性的类数组对象。
索引 attributes
对象得到的值是 Attr 对象。Attr 的 name 和 value 返回该属性的名字和值。
innerHTML
属性以字符串形式返回这个元素的内容。也可以用来替换元素当前内容。
outerHTML
属性以字符串形式返回这个元素及内容。也可以用来替换当前元素及内容。
查询或替换纯文本元素内容的标准方法是用Node的textContent属性来实现。在IE中,可以用 Element 的 innerText
属性来代替。
使用 document 对象的 createElement()
方法创建新的 Element节点。
创建纯文本节点。
使用文档片段通常会带来更好的性能。因为文档片段存在于内存中,并不在DOM树中,所以将子元素插入到文档片段时不会引起页面回流(对元素位置和几何上的计算)。
创建注释节点不经常使用。
通过复制已存在的节点来创建新的文档节点。传参数 true 表示深克隆,false表示浅复制。
在指定元素上插入子节点,并使其成为该节点的最后一个子节点。
本人知识水平有限,在汇编的过程中时有错误发生,如发现请不吝指正!多谢。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。