记录这篇文章，在工作中一直借用一些js框架 ui框架，对js底层api有所遗忘，目的为了自己复习以下原生js操作方法，所有的js框架都是基于原生js方法和属性，尤其vue源码使用原生js开发，自底向上模式
Node NodeList HTMLCollection
1.1 NOde
Node 是一个接口，各种类型的 DOM API 对象会从这个接口继承。它允许我们使用相似的方式对待这些不同类型的对象；比如, 继承同一组方法，或者用同样的方式测试。
以下接口都从 Node 继承其方法和属性：
Document, Element, Attr, CharacterData (which Text, Comment, and CDATASection inherit), ProcessingInstruction, DocumentFragment, DocumentType, Notation, Entity, EntityReference
注意
- 节点是很多类型DOM的父类，所有DOM都继承Node。
- 元素DOM,属性DOM，文本DOM，都是实现Node(接口)的实现类。
- 常用的节点操作方法 jquery方法
- Node.removeChild $("x").remove()
- Node.replaceChild
("x").replaceAll()
- Node.insertBefore
("x").insertAffter()
- Node.hasChildNodes
- Node.cloneNode $("x").clone()
- 查找节点关系
- Node.parentNode parent()
- Node.childNodes children()
- Node.nextSibling next()
- Node.previousSibling prev()
- Node.firstChild first()
- Node.lastChild last()
1.2 NodeList
NodeList对象是一个节点集合，一般由
Node.childNodes,
document.getElementsByName和
document.querySelectorAll返回
注意
- 返回的节点集合 具有 forEach，entries,keys方法
- 换行符 标签 文字 注释 都算一个节点
例如：
<body>
<div name="age" id="test">
<p>这是标签</p>
这是文字
</div>
</body>
<script>
let oDiv = document.getElementsByName("age");
let oTest = document.getElementById("test");
console.dir(oTest.childNodes); //NodeList对象
console.dir(oDiv); //NodeList对象
console.log(document.querySelectorAll("div"))//NodeList对象
oTest.childNodes.forEach(item => {
console.log(item);
})
</script>
打印的oTest.childNodes
NodeList.png
1.3 HTMLCollection
TMLCollection是一个特殊的NodeList，表示包含了若干元素（元素顺序为文档流中的顺序）的通用集合，它是实时更新的，当其所包含的元素发生改变时，它会自动更新。另外，它是一个伪数组，如果想像数组一样操作它们需要像Array.prototype.slice.call(nodeList, 2)这样调用。
获取方法
document.getElementsByClassName
document.getElementsByTagName
注意
- 它是一个伪数组没有数组对应常用方法。
- prototype.slice.call(nodeList, 2)
1.4 咋样区别节点信息
<div name="age" id="test" class="test">
<p>这是标签</p>
<!-- 这是注释 -->
这是文字
</div>
console.log(document.getElementById("test").nodeType) //1 element_node 元素节点
console.log(document.getElementById("test").getAttributeNode("name").nodeType)//2 attribute_node 属性节点
console.log(document.getElementById("test").lastChild.nodeType) //3 text_node 文本节点
查找节点
document.getElementById：根据ID查找元素，大小写敏感，如果有多个结果，只返回第一个；
document.getElementsByClassName：根据类名查找元素，多个类名用空格分隔，返回一个HTMLCollection。注意兼容性为IE9+（含）。另外，不仅仅是document，其它元素也支持getElementsByClassName方法；
document.getElementsByTagName：根据标签查找元素，*表示查询所有标签，返回一个HTMLCollection。
document.getElementsByName：根据元素的name属性查找，返回一个NodeList。
document.querySelector：返回单个Node，IE8+(含），如果匹配到多个结果，只返回第一个。
document.querySelectorAll：返回一个NodeList，IE8+(含）。
document.forms：获取当前页面所有form，返回一个HTMLCollection；
网友评论