博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS中的DOM知识概览
阅读量:5919 次
发布时间:2019-06-19

本文共 2436 字,大约阅读时间需要 8 分钟。

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,或将其存在缓存中。

转载地址:http://ccbvx.baihongyu.com/

你可能感兴趣的文章
什么是同步逻辑和异步逻辑,同步电路和异步电路的区别是什么(转)
查看>>
Laravel项目的结构文章
查看>>
CRM JS
查看>>
Thrift.1
查看>>
oracle修改约束列
查看>>
Chrome使用的plugin
查看>>
(转)测试是找bug,不是找茬
查看>>
词法分析程序
查看>>
PPPoE
查看>>
细说 Form (表单)【转】
查看>>
APP中的第三方“支付”功能该如何测试
查看>>
JavaScript函数表达式
查看>>
Linux上的多进程间通信机制
查看>>
String系列-----String
查看>>
9月19日学习内容整理:接口类和抽象类,原则,钻石继承,多态
查看>>
第十六周进度
查看>>
【好书推介】解密搜索引擎技术实战:Lucene&Java精华版
查看>>
Excel 中如何快速统计一列中相同字符的个数(函数法)
查看>>
Android 本地tomcat服务器接收处理手机上传的数据之环境搭建
查看>>
软件测试理论(一)
查看>>