原生js(一)

2020-12-17 本文已影响0人 Raral

记录这篇文章，在工作中一直借用一些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").replaceWidth()$ ("x").replaceAll()
- Node.insertBefore $("x").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；