html 原生js,原生js(一)

记录这篇文章，在工作中一直借用一些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方法

换行符 标签 文字 注释 都算一个节点

例如：

这是标签

这是文字

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);

})

打印的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 咋样区别节点信息

这是标签

这是文字

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；