品牌建站,网站建设西班牙语,做seo哪些网站会好点,开网页很慢在开发中不可避免的需要操作DOM#xff0c;现在就来总结一下原生的获取DOM的API。
getElementById()
该方法是最常用的通过元素的id属性来获取DOM元素的API#xff0c;返回一个DOM元素。
bodydiv iddiv我是div/divscript type现在就来总结一下原生的获取DOM的API。
getElementById()
该方法是最常用的通过元素的id属性来获取DOM元素的API返回一个DOM元素。
bodydiv iddiv我是div/divscript typetext/javascriptvar div document.getElementById(div);console.log(div); // 打印一个DOM元素/script
/body
getElementById() 只能在HTMLDocument类型的实例document对象上调用并不能在元素上使用该方法。
bodydiv iddiv我是divp idp我是p/p/divscript typetext/javascriptvar div document.getElementById(div);var p div.getElementById(p); // 报错了 div上并没有getElementById方法/script
/body
其实仔细想来也可以理解元素具有id属性的值在页面上是唯一的符合标准的话写多个相同id也拦不住所以在document下查找具有该id的元素和在某个元素下查找具有该id的元素是一样的。
getElementsByTagName()
通过标签名获取DOM元素的一个集合该集合的类型是HTMLCollection并且该方法可以在DOM元素上调用。
bodydiv iddivp我是p1/pp我是p2/p/divscript typetext/javascriptvar div document.getElementById(div);var pCol document.getElementsByTagName(p); // 返回具有两个p元素的HTMLCollection集合var pCol1 div.getElementsByTagName(p); // 返回具有两个p元素的HTMLCollection集合/script
/body
关于HTMLCollection是一个元素的集合是有生命的会呼吸的该集合并不是一个快照一个死的它是会变化的。与之类似的较为熟悉的集合还有NodeList和NamedNodeMap。
script typetext/javascriptfor(var i 0; i pCol.length; i){div.appendChild(document.createElement(p));}
/script
以上代码会出现无限循环。若pCol是当时的一个快照上面的循环应该只循环两次。因为pCol这个HTMLCollection集合是会变化的。当添加一个p元素到div元素中pCol元素集合就增加了一个元素length也随之增加这样永远不会满足 i pCol.length 的条件所以出现了无限循环。
而是一个活的会呼吸的集合的不只有HTMLCollection一个其中较为熟悉的有NodeList和NamedNodeMap。
注可以使用一个变量存一下pCol.length就不会出现这种情况了。
getElementsByName()
该方法很少用但是在操作表单的时候还是有用武之处的。通过元素名来获取DOM元素集合NodeList类型 并且只能在document对象上调用。
bodyform idforminput typeradio namesex value0/input typeradio namesex value1//formscript typetext/javascriptvar input document.getElementsByName(sex); // 返回一个NodeList类型的集合有两个input标签/script
/body
注高程上说该方法返回的HTMLCollection集合但是通过chromeFirefoxSafari测试返回的类型都是NodeList。
querySelector()和querySelectorAll()
querySelector()通过合法的CSS选择器来获取DOM元素只会获取第一个匹配的元素如果传入不合法的CSS选择符该方法会报错包括下面的querySelectorAll()方法也会因为不正确的选择符报错该方法可以在元素上调用。
bodydiv iddivp classp namepp1/pp idp namepp2/p/divscript typetext/javascriptvar div document.querySelector(#div); // 第一个一个id为div的div元素var p document.querySelector(p); // 第一个一个p元素var p1 div.querySelector(p[namep]); // 第一个具有name属性并且值为p的p元素/script
/body
querySelectorAll()同样通过合法的CSS选择器来获取元素只是返回的是所有符合条件的元素而不是第一个符合条件的元素所以返回的是一个NodeList类型的DOM元素集合。但是这个NodeList集合和上面所说的活的会呼吸的NodeList不一样通过querySelectorAll()方法获取的只是一个快照并不会动态改变。该方法同样可以在元素上调用。
script typetext/javascriptvar ps document.querySelectorAll(p);for(var i0; ips.length; i){document.body.appendChild(document.createElement(p));}
/script
上面只是在body末尾添加了两个p元素并没有无限循环下去。
getElementsByClassName()
千呼万唤始出来的一个原生API在这个API出来之前就被各种实现了当然就性能上来说当然原生的好。
返回一个HTMLCollection的DOM元素集合并且可以在元素上调用。
bodydiv iddivp classpp1/pp classpp2/p/divscript typetext/javascriptvar div document.getElementById(div);var ps div.getElementsByClassName(p); // 返回 一个HTMLCollection集合/script
/body
属性
除了通过以上的方法获取DOM元素或元素集合外还可以通过DOM元素的属性来获取DOM元素和元素集合。
childNodes // NodeList类型
childdren // HTMLCollection类型
firstChild
lastChild
previousSibling
nextSibling
previousElementSibling
nextElementSibling
firstElementChild
lastElementChild
以下集合都是HTMLCollection类型
document.images 所有的img标签集合
document.anchors 所有具有name特性的a标签集合
document.links 所有具有link特性的a标签集合
document.forms 所有form标签集合
NodeList和HTMLCollection的区别
我的理解很简单就是NodeList是节点的集合HTMLCollection是元素节点的集合。NodeList中可能包含HTML元素之外的节点比如文本节点但是HTMLCollection只会包含HTML元素节点。
HTMLCollection有NamedItem() 方法而NodeList没有。
bodydiv iddivpp1/ppp2/ppp3/p/divscript typetext/javascriptvar div document.querySelector(#div);var childs div.childNodes; // 一个NodeList集合console.log(childs);for(var i 0, len childs.length; i len; i){console.log(childs[i].nodeType, childs[i].nodeName) // 会打印出 3 “#text” 表示是文本节点}var children div.children; // 一个HTMLCollection集合console.log(children);for(var i 0, len children.length; i len; i){console.log(children[i].nodeType, children[i].nodeName) // 并没有打印出 3 “#text” 只出现了 1 “P” 元素节点}/script
/body
但是上面的结论也有疑惑的地方比如querySelectorAll()只能返回HTML元素但是他的类型确是NodeList还有getElementsByName()明显返回的也是HTML元素但是同样类型是NodeList类型。
想进一步了解两者之间的区别和联系可以看看知乎上的这个问题。
