DOM文档对象模型(一)

努力学习前端的荼霜

已于 2023-03-16 14:44:44 修改

阅读量110

点赞数 1

文章标签：前端 html javascript Powered by 金山文档

于 2023-03-14 23:42:36 首次发布

本文链接：https://blog.csdn.net/m0_61773971/article/details/129527985

版权

文档对象模型是HTML,XML文档的编程接口,DOM表示由多层节点构成的文档,通过它可以添加,删除,修改和修改页面的各个部分.

节点层次

任何HTML或XML文档都可以用DOM表示为一个由节点构成的层级结构.

其中Document节点为每个文档的根节点.根节点唯一的子节点<html>元素,称之为文档元素.文档元素是文档最外层的元素,所有元素都存在于这个元素之内.

HTML中的每段标记都可以表示为这个树形结构中的一个节点.元素节点表示html元素,属性节点表示属性,文档类型节点表示文档类型.

Node类型

所有DOM节点类型都实现了Node接口.都继承Node类型,即所有类型都共享相同的基本属性和方法.

每个节点都有nodeType属性,表示该节点的类型.所有关系指针都是只读的,无法修改.

nodeName和nodeValue

属性
nodeName nodeValue

nodeName和nodeValue保存着关节点的信息.这两个属性的值完全取决于节点类型.在使用这两个属性前,最好先检测节点属性.

节点关系

属性与方法
childNodes item() parentNode previousSibling nextSibling firstNode lastNode hasChildNodes() ownerDocument

每个节点都有一个ChildNodes属性,ChildNodes属性包含一个NodeList的实例,NodeList 是一个类数组对象,用于储存可以按位置存取的有序节点.是对DOM结构的查询,DOM结构的变化会自动地在NodeList中反映.NodeList 是实时的活动对象,而不是第一次访问的内容快照.

访问元素

[]直接读取,因为NOdeList为类数组对象,也具有length.

item()方法访问

各节点关联方法

每个节点都有一个parentNode属性,指向其DOM树的父元素.childNodes中的所有节点待都有同一个父元素,因此他们的parentNode都指向同一个节点.

childNodes中的节点都是各自的同胞节点,而使用previousSibling和nextSibling可以在这个列表的节点间导航.第一个节点的previousSibling与最后一个节点的nextSibling的值都为null.

第一个节点可以通过父节点的firstChild属性表示,最后一个节点可以通过父节点的lastChild属性表示.

节点是否有子节点可以通过hasChildNodes()来确定,其返回布尔值.

ownerDocument属性指向代表整个文档的文档节点(Document)的指针.所有节点都会被创建它们的文档所拥有.

操纵节点

方法
appendChild() insertBefore() repalceChild() remove()

通过父节点添加子节点:

appendChild()用于在childNodes列表末尾添加节点.添加新节点会更新相应的指针.返回新添加的节点.

通过子节点添加同胞节点:

insertBefore()用于在指定节点前添加节点,参数1为添加节点,参数2为指定节点.返回插入节点.

通过子节点替换该节点:

replaceChild()用于替换指定节点为新节点,参数1为要插入的节点,参数2为要替换的节点.返回要替换节点.

removeChild()移除指定节点,参数为要移除的节点,返回要移除的节点.

通过replaceChild()和removeChild()替换和修改的节点在技术上仍然被同一文档所拥有,但文档中已经没有它的位置了.

其他方法

方法:cloneNode() normalize()

所有节点共享两个方法:

cloneNode()复制节点,当参数为空时,复制当前节点,为孤儿节点.当参数为true时,进行深复制,即复制节点以及其整个子DOM树.

normalize()处理文档中的文本节点.可以合并两个相邻的文本节点,清除文本节点为空的文本节点.

Document类型

表示文档节点的类型.文档对象document是HTMLDocument的实例(HTMLDocument继承Document),表示整个HTML页面.document是window对象的属性,是一个全局变量.

节点特征

nodeType=9

nodeName='#document'

nodeValue=null

parentNode=null

ownerDocument=null

子节点可以为DocumentType(最多一个),Element(最多一个),ProcessingInstruction或者Comment类型.

文档子节点

属性
body documentElement title URL domain referrer

子节点可以为DocumentType(最多一个),Element(最多一个),ProcessingInstruction或者Comment类型.

提供了两个访问子节点的快捷方式.

documentElement属性,始终指向HTML网页中的<html>元素.

body属性,直接指向<body>元素.

当子节点为DocumentType(<!doctype >)时,可以通过doctype属性访问.

let doctype=document.doctype//取得<!doctype>的引用

文档信息

document作为HTMLDocument的实例,还有一些标准Document对象上所没有的属性,这些属性提供浏览器所加载网页的信息.其中第一个属性是title.通过这个元素可以读写页面的标题.但不会修改<title>标签内的值.

let a=document.title;//读
document.title='aaa'//写

属性

URL包含当前页面的完整URL

domain包含页面的域名

referrer包含链接到当前页面的那个页面的URL

这3个属性只有domain是可设置的,而且设置有一定限制,不能给这个属性设置URL中不包含的值,并且这个属性一旦放松就无法收紧了.

当页面中包含来自某个不同子域的窗格或内嵌窗格时,设置document.domain是有用的.因为跨源通信存在安全隐患,所有不同子域的页面间无法通过javascript通信.此时通过改写document.domain设置成同样的值,这些页面就可以访问对方的javascript对象了.如果每个页面document.domain设置成同一值,这两个页面就可以进行通信了.

定位元素

方法
getElementById() getElementByTagName() getElementByName() item() namedItem() []

获得某个或某组元素的引用

getElementById()参数为元素的id,返回这个元素,没有则返回NULL

getElementByTagName(),参数为元素的标签,返回这个包含所有相同标签名的元素类数组(NodeList),在html中这个方法返回HTMLCollection对象.与NodeList相似.

getElementByName()参数为name属性,这个方法返回具有给定name属性的所有元素

查询

item()输入索引返回元素

namedItem()输入元素的name值,返回该元素

[]既可以为数值索引,也可以是name索引

特殊集合

document对象暴露了几个特殊集合:

document.anchors 文档中所有的带name属性的a标签元素

document.forms文档中所有form标签元素

document.images包含文档中所有img标签元素

document.links包含文档中所有带href的a标签元素

文档写入

document.write() document.writeln() open() close()

Document对象可以向网页输出流中写入内容.

write() writeln() 参数为一个字符串参数,write()简单的写入文本,writeln()会在字符串末尾追加一个换行符.一般在网页渲染的时候使用,在页面加载完毕后使用,会重写整个页面.

document.write('<String>'+(new Date).toLocaleString()+'</string>')//显示当前时间

open()和close()分别用于打开与关闭网页输出流.

Element类型

节点特征

属性
nodeName tagName

nodeType=1

nodeName=元素的标签名

nodeValue=null

parentNode为Document或Element对象

子节点可以是element,Text,Comment,ProcessingInstruction,CDATASection,EntityReference类型

属性

nodeName tagName 获得节点的标签名

let a =document.getElementById('te')
console.log(a.nodeName)//a节点的标签名
console.log(a.tagName)

HTML元素

属性
id dir className lang title

继承了HTML元素上的标准属性

title

lang

dir

className

取得属性

方法
getAttribute()

getAttribute(),参数为元素属性,返回元素属性值.

DOM元素对象的属性来取,元素的所有属性都可以通过相应的DOM元素对象的属性来取.非自定义的公认属性也会被添加到DOM对象的属性中.

DOM2新增了hasAttribute(attributeName)方法,返回布尔值.

DOM对象读取与getAttribute()的差别:

getattribute()读取style属性时,返回css字符串,而DOM对象读取会返回一个对象.

getattribute()读取事件处理程序(如onclick())时,返回包含处理函数的字符串,,而DOM对象读取返回一个函数.

一般我们取属性,会使用DOM元素对象的属性来取.使用getAttribute()方法取得自定义属性的值

设置属性

方法:
setAttribute() removeAttribute()

setAttribute(),参数为元素属性,以及要修改的值

removeAttribute()清除元素属性

添加自定义属性使用setAttribute();

attributes属性

属性和方法
getNamedItem() setNamedItem() removeNamedItem() item()
nodeName nodeValue

Element类型是唯一使用attributes属性的DOM节点类型.attributes属性包含一个NamedNodeMap实例,是一个类似NodeList的实时集合.元素的每一个属性都是一个attr节点,存储在NamedNodeMap中.

NamedNodeMap方法

getNamedItem(name)返回nodeName属性等于name的节点.

setNamedItem(attr)向列表中添加attr节点,以其nodeName为索引.

removeNamedItem(name)删除nodeName属性等于name的节点.

item(pos)返回索引pos处的节点

attributes实时集合一般用于迭代属性

属性

nodeName 属性

nodeValue 属性值

创建元素

方法:
document.createElement()

使用document.createElement()方法创建元素,接受一个参数,即要创建元素的标签名.

let a=document.createElement('div')
let b=document.getElementById('tt')
Document.insertBefore(a,b)
//b.appendChild(a)
//b.replaceChild(a)

元素后代

childNodes属性

Text类型

节点特征

属性与方法:
data length
appendData() insertData() deleteData() replaceData() splitText() subStringData()

nodeType=3

nodeName='#text'

nodeValue/data值为节点中包含的文本

parentNode值为Element对象

length=nodevalue.length=data.length

不支持子节点

方法:

appendData(text)节点末尾添加文本text

insertData(offset,text)在位置offset插入text

deleteData(offset,count)从位置offset删除count个字符

repalceData(offset,count,text)在位置offset替换count个字符替换为text

splitText(offset)在位置offset分割为两个文本节点

subStringData(offset,count),提取从位置offset到offset+count的文本

创建文本节点

方法:
document.createTextNode()

document.createTextNode()创建新文本节点,接收一个参数,即为要添加的文本

规范化文本节点

方法:
normalize()

normalize()所有同胞文本节点合并为一个文本节点,清除文本节点为空的文本节点

拆分文本节点

方法:
splitText()

splitText(offset)在位置offset分割为两个文本节点

Comment类型

节点特征

nodetype=8

nodeName='#comment'

nodeValue为注释的值

parentNode为Document或Element对象

不支持子节点

方法:

与text类型的方法相同(除splitText()方法)

创建注释节点

document.createComment()参数为注释文本

CDATASection类型

节点特征

nodeType=4

nodeName='#cdata-section'

nodeValue值为CDATA块中的内容

parentNode值为Document或Element对象

不支持子节点

创建CDATA区块节点

document.createCDATASection()

DocumentType类型

节点特征

nodeType=10

nodeName的值为文档类型的名称

nodeValue=NULL

parentNode为Document对象

不支持子节点

属性:

name文档对象的名称

entities是这个文档类型描述的实体的NamedNodeMap,一般为空

notations是这个文档类型描述的表示法的NamedNodeMap,一般为空

DocumentFragment类型

在所有节点类型中,DocumentFragment类型是唯一一个在标记中没有对应表示的类型.DOM将文档片段定义为'轻量级'文档,能够包含和操作节点,却没有完整文档那样额外的消耗.

节点特征

nodeType等于11

nodeName值为'#document-fragment'

nodeValue=null

parentNode=null

子节点可以是element,Text,Comment,ProcessingInstruction,CDATASection,EntityReference类型

创建文档片段节点

document.createDocumentFragment()

let a=document.createDocumentFragment()

如果文档中的一个节点被添加到一个文档片段,则该节点会从文档树中移除,不会被浏览器渲染.添加到文档片段中的新节点同样不属于document树,不会被浏览器渲染.

可以解决重复多次渲染问题

Attr类型

节点特征

nodeType=2

nodeName为属性名

nodeValue的值为属性值

parentNode为null

在HTML中不支持子节点

在XML中可以是Text或EntityReference

并不是DOM文档树的一部分.

属性:

name

value

specified布尔值,表示属性使用的是默认值还是被指定的值

方法:

setAttributeNode(name,value)向attributes中添加属性

getAttributeNode(name)查询属性名,返回属性值

removeAttibuteNode(name)移除属性

创建Attr节点

document.createAttribute()创建新的Attr节点.

努力学习前端的荼霜

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

DOM文档对象模型(一)

节点层次

Node类型

nodeName和nodeValue

节点关系

访问元素

各节点关联方法

操纵节点

其他方法

Document类型

节点特征

文档子节点

文档信息

定位元素

特殊集合

文档写入

Element类型

节点特征

HTML元素

取得属性

设置属性

attributes属性

创建元素

元素后代

Text类型

节点特征

创建文本节点

规范化文本节点

拆分文本节点

Comment类型

节点特征

创建注释节点

CDATASection类型

节点特征

创建CDATA区块节点

DocumentType类型

节点特征

DocumentFragment类型

节点特征

创建文档片段节点

Attr类型

节点特征

创建Attr节点