JS中的DOM学问概览

2019年8月25日 143次阅读 来源: jdd100419

1 Node范例

除IE外一切浏览器都能够接见这个范例（由于IE中的DOM对象都是以COM对象的情势完成的），而且js中的一切节点范例都继续自Node范例。

1.1 nodeName/nodeValue/nodeType

1.2 节点关联

  • childNodes 返回效果是Nodelist范例，不是数组。

       Nodelist是基于DOM构造动态查询的效果，DOM的变化能自动反映在查询效果中。可经由过程方括号举行接见，也可用item(i)举行接见。

   可经由过程Array。prototype.slice.call(nodelist,0) 将Nodelist范例转化成数组，也能够经由过程遍历Nodelist将其转化成数组。

  • firstChild/lastChild

  • nextSibling/previousSibling

  • parentNode

  • ownerDocument

     ownerDocument：一切节点都有的属性，指向示意全部文档的文档节点，任何节点都不能同时存在于多个文档中。经由过程这个属性能够直接接见文档节点，而没必要层层回溯。

1.3 操纵节点

  • appendChild()

  • insertBefore()

  • replaceChild()

  • removeChild()

1.4 新建／拷贝节点

拷贝：cloneNode()

当参数为true时，实行深拷贝，会将该节点的子节点也拷贝。然则这个函数不会复制增加到节点中的js属性，比方时候处置惩罚顺序，这个只复制特征、子节点（指定true时）。（IE浏览器中另说）

1.5 查找元素(document./element.)

  • getElementById()

       注重IE7及较低版本浏览器的怪癖：会返回name值为指定‘ID’的input元素。

  • getElementsByTagName()

       返回的是HTMLCollection对象，是一个动态鸠合。

  • getElementsByName()

2 Document范例

document对象是HTMLDocument范例的一个实例，HTMLDocument继续自Document。而且，document对象是window对象的一个属性。

2.1 文档的子节点

  • documentElement属性直接指向html元素

  • body属性，指向body元素

  • doctype属性，指向文档声明标签

2.2 文档信息

  • title

  • domain

       差别子域的页面没法经由过程js通讯，设为雷同便可相互接见对方的js对象了。
   域名属性刚开始是松懈的不能将它再设置为紧绷的。

  • URL

2.4 特别鸠合

  • document.images 一切image元素

  • document.links 一切有href的a元素

  • document.anchors 一切带name特征的a元素

1.5 新建元素

  • createElement()

  • createTextNode()

  • createDocumentFragment()

  • createAttribute()

2.6 DOM 一致性检测

document.implementation.hasFeature()

平常不要置信这个的检测效果，由于能够自行修正效果。

2.7 文档写入

document.write()
document.writeln()

假如在文档加载终了后写入会重写全部页面。

document.open()
document.close()

假如是在页面加载时期写入，则不须要用到这两个要领。

3 Element范例

一切的元素都是经由过程HTMLElementle范例或其自范例示意的，HTMLElement范例继续自Element范例。

  • getAttribute()

  • setAttribute()

  • removeAttribute()

       
   任何元素的一切特征，也都能够经由过程DOM元素的自身的属性来接见。
   只要公认的（不是自定义的）特征才会以属性的情势增加到DOM对象中。
   有些特征经由过程属性接见和getAttribute（）接见的效果能够差别，比方style特征和事宜处置惩罚顺序
   给元素增加自定义属性，该属性不会变成特征
   
   总而言之就是：自定义的特征不能经由过程属性的体式格局接见，自定义的属性不能经由过程getAttribute接见（应该是如许）。

  • attributes属性

      平常用来遍历特征时运用（element.attributes.length）

  • 继续Node范例的childNodes等属性和建立，查找，增加删除子节点等要领。

4 Text范例

可经由过程nodeValue或data属性接见Text节点中包括的文本。

操纵文本节点中的文本：

appendData（）
deleteData（）
replaceData（）
insertData（）
splitText（）

   当两个文本节点相邻时，可经由过程normalize()将其变成一个文本节点。normalize()是从node范例继续的函数

支解文本节点
textnode.splitText(5) 返回一个新文本节点，且该节点与原节点的parentNode雷同

5 comment范例（解释）

6 DocumentFragment

在文档中没有标记。

文档片断永久不会成为文档的一部分。当经由过程appendchild将文档片断增加到文档中时，只是将文档片断的子节点增加到文档中，文档片断将会删除这些子节点。

当须要增加多个子节点时，假如一个一个增加，那末将会致使浏览器的重复衬着，这时候能够将这些子节点增加到文档片断中，然后再增加到文档中。

7 动态增加剧本

7.1 动态增加剧本
7.2 动态增加款式
7.3 操纵表格
7.4 NodeList

    最好将length的值保存在一个变量中，由于length的值是动态的。
    接见NodeList相当于一次基于文档的查询，所以要少接见NodeList，或将其存在缓存中。
    原文作者：jdd100419
    原文地址: https://segmentfault.com/a/1190000009916668
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞