0

0

JS高级程序之DOM拓展

小云云

小云云

发布时间:2018-03-07 13:30:13

|

1667人浏览过

|

来源于php中文网

原创

11.1选择符api:

SelectorsAPI的核心两个方法,:querySelector()和querySlelctorAll(),在兼容的浏览器中,可以通过Domcument及Element类型的实例可以调用他们。

11.1.1 querySelector()方法:

querySelector()方法接收一个css选择符,返回与该匹配的第一个元素,如果没有匹配到就返回null。

通过document调用querySelector()方法会在文档元素的范围内查找到匹配的元素。

Elementquery调用querySelector()方法只会在该元素后代元素中查找到匹配的元素

11.1.2querySelectorAll()

var body=document.querySelector("body");
var p=body.querySelector(".menu_1")
//    var li=p.querySelector("li");
var li=p.querySelectorAll("li");
for(var i=0;i

11.1.3matchesSelector

这个方法接收一个参数,即css选择符,如果调用的方法和该元素匹配则返回true。  

11.2 元素遍历

Elment Traversal API 为DOM元素添加了以下5个属性。

1:childElementCount:返回子元素的个数

2:firstElementChild:指向第一个子元素,firstChild 元素版;

3:lastElementChild:指向最后一个子元素,lastChild元素版;

4:previousElementSibling:指向前一个同辈元素;

5:nextElementSibling:指向后一个同辈元素;

11.3HTML5

11.3.1与类相关的扩充

1:getElementByClassName()该方法接收一个参数,一个或者多个类名的字符串,返回带有指定的所有元素的NodeList。

2:classList属性:(对class=“这里的操作”)

classList属性是新集合类型DOMTokenList的实例。与其他DOM集合类似。具有以下方法:

add(value):将给定的字符串添加到列表中。

contains(value):表示列表中是否存在给定的值,有的话就发返回true 没有就返回false。

remove(value)从列表中删除给定的字符串

toggle(如果列表中存在给定的值,删除,没有给定的值就添加它。)

到这里就可以通过上述的方法来对着里的参数进行操纵了。

11.3.2 焦点管理 

HTML5也添加了辅助管理DOM的功能。首先就是document.activeElement属性,这个属性始终会引用DOM当前获得的焦点元素。可以获得当前用户焦点的元素。 

使用。focus()方法

11.3.3 HTMLDocument的变化

1:readyState属性

这个属性有两个值

1;loading,正在加载文档

2:complete,已经加载完文档。

使用document.readyState属性最恰当的方式就是用他来实现一个指示文档已经加载完成的指示器。表示文档已经加载完成。

if(document.readyState=="complete"){
       //执行操作
}

2:兼容模式:

自从IE6开始区分渲染页面的模式是标准的还是混杂的,IE给document添加了一个名为compatMode的属性,用来告诉开发人员页面采用了那种渲染模式。

有两个返回值:CSS1compat,和BackComapat。

分别对应了标准模式和混杂模式。

3:head属性

通过document.head不能用就使document.getElementByTagName();

11.3.4 字符集属性

通过document.charSet=“”;来修改页面的编码格式;

11.3.6插入标记

1:innerHTML属性

在读模式下,innerHTML属性返回调用元素的所有的子节点对应的HTML标记。在写模式下,innerHTML会根据指定的值来创建新的DOM树。

可以利用这个属性给指定的的标签里面添加标签,但是并不是所有的标签都是支持的

2:outerHTML属性

在读模式下,outerHTML返回调用她的元素及所有子节点的HTML标签,在写模式下,outerHTML会根据指定的HTML字符创建新的DOM树,然后用这个DOM子树完全替换调用元素。

var val = elem.outerHTML;

读模式:返回所有的HTML标签

写模式:取代对应的DOM的元素。

this is a test Demo

elem.outerHTML="

这是一个测试的demo

"

3:insertAdjeacentHTML()方法

插入标记的最后一个方法。

接收两个参数:插入位置和要插入的HTML文本。第一个元素必须是下列值之一。

1:beforebegin,在当前元素之前插入一个紧邻的同辈元素。

2:afterbegin,在当前元素之下插入一个新的子元素或者在第一个元素之前插入新的元素

3:beforeend,在当前元素之下插入一个新的子元素或者在最后一个元素之后再插入新的元素

4:afterend在,在元素之后添加一个紧邻的同辈元素。

4:内存与性能问题;

使用本节介绍的方法替换子节点可能会导致浏览器的内存问题,不过使用innerHTML属性还是会给我们带来很多的遍历,原因是,再设置innerHTML或outerHTML的时候会创建一个HTML的解析器,这个解析器是在浏览器级别的代码基础上运行的,因此比js快了很多。

11.3.7scrollIntoView方法

滚动

11.4.1文档模式:

文档模式决定了你可以使用哪个级别的css,可以在js中使用哪些API:

总共有四种文档模式:

IE5:以混杂模式渲染页面,IE8以及更高版本中的新功能都无法使用

IE7:以IE7标准模式渲染页面,IE8以及更高版本中的新功能都无法使用

IE8:以IE8标准模式渲染,IE8中的新功能都能使用,因此可以使用SelectorsAPI、更多的CSS2级选择符和某些CSS3功能。还有一些HTML5的功能

IE9 一IE9标准模式渲染页面。新功能都能使用。比如EMACSript5的功能。

11.4.2 children属性

children属性和childNodes几乎没有什么区别,都是用来返回所有子节点的

11.4.3contain(包含)方法:

用来判断该节点是不是某节点的后代节点,可以直接理解英文的字面意思,包含。

父节点.contain(某个节点):如果返回true,就是包含,否则就返回false。

还可以使用compareDocumentPosition()比较文件位置,会返回一些掩码用来确定位置关系

为了模仿contain()方法应该注重的是返回16;

11.4.4 插入文本:

1:innerText属性

会操作元素中所有的值,并按照由浅入深的方式把文档拼接起来。

和innerHTML的区别是:innerHTML会吧元素标签都显示出来,但是innerText只会返回拼接好的字符串

写入的时候也是只会显示一个文本子节点。

2:outerText属性

除了作用范围扩大到了包含他的节点之外,outerText与innerText基本上没有多大的区别。在读取文本的时候结果完全一样,但是写入的时候就完全不一样了。outerText不只是替换掉调用他的元素的子元素,而是会替换整个元素,建议不要使用。

11.4.5滚动:

1:scrollIntoviewIfNeeded(alignCenter):只在当元素在视口中不可见的情况下,才滚动浏览器。

2:scrollByLines(lineCount):将元素的内容滚动到指定的页面高度,lineCount可以使正值也可以是负值。

3:scrollBypage(pageCount):将元素的内容滚动到指定的页面高度,具体高度由元素的高度决定。

注意:scrollIntoView()和scrollIntoviewIfNeeded(alignCenter)的作用对象是元素容器,而scrollByLines(lineCount)和scrollBypage(pageCount)的作用对象是是元素本身。

12章:DOM2和DOM3

12.1.1针对XML命名空间的变化

  有了XML命名空间,不同的XML文档的元素就可以混合在一起,不用担心命名冲突,从技术上说,HTML不支持XML命名空间,但XHTML支持XML命名空间。

1:Node类型的变化

在DOM2级中,Node类型包含下列特定于命名空间的属性。

localName:不带命名空间前缀的节点名称。

namespaceURL:命名空间URL挥着Null。

prefix:命名空间前缀或者null。

2:document类型的变化

DOM2级中的Document类型也发生了变化,包含了下列与命名空间有关的方法。

createElementNs(namespaceURI,tagName):使用给定的tagName创建一个属于命名空间namespaceURI的新元素。

createAttributeNS(nameSpaceURI,attributeName)使用给定的attributeName创建一个属于命名空间nameSpaceURI的新特性。

getElementByTagNameNs(namespaceURI,tagName)返回属于命名空间namespaceURI的tagName元素的NodeList。

3:Element类型的变化

“DOM2级”中有关Element的变化,主要涉及操作特性。新增方法如下。

getAttributeNS(namespaceURI,localName)取得命名空间namespaceURI且名为localName的特性

getAttributeNodeNS(namespaceURI,localName)取得属于命名空间namespaceURI且名为localName的特性节点

getElementsByTagNameNS(namespaceURI,tagName)返回属于命名空间namespaceURI的nodeList

hasAttributeNS(namespaceURI,localName)确定当前元素是一个有名为localNaem的特性,而且该特性的命名空间是namespaceURI

removeAttributeNS(namespaceURI,localName)删除属于命名空间namespaceURI且名为localName的特性

setAttributeNS(namespaceURI,qualifiedName,value):设置属于命名空间namespaceURI且名为qualifiedName的特性值为value

setAttributeNodeNS(attNode)设置属于命名空间namespaceURI的特性节点

4:NamedNodeMap类型的变化

由于特性是通过NamedNodeMap表示的,因此这些方法多数情况下只针对特性使用

1:getNamedItemNS(namespaceURI,localName):取得属于命名空间namespaceURI且名为localName的项

2:removeNamedItemNS(namespaceURI,localName):移除属于命名空间namespaceURI且名为localName的项

3:setNamedItemNS(node):添加node,这个节点已经事先指定了命名空间信息。

沙之丘企业网站程序3.5
沙之丘企业网站程序3.5

沙之丘企业网站程序是一个以asp.net(C#) 4.0 +access进行开发的企业网站源码。主要功能:1、产品、设备、新闻系统2、留言信息直接发邮件到相关部门3、所有链接都以一级目录显示更好的权重4、其他信息扩展,可以增加如:人事招聘,公司介绍,地图,联系我们等5、带有商品和设备的搜索功能6、模板动态化方便扩展模板7、简体繁体选择显示运行环境:windows 2003或者更高windows服务

下载

由于一般都是通过元素访问特性,所以这些方法很少使用。

12.1.2 其他方面的变化

1:documentType类型的变化

添加了三个属性:publicID systemId 和internalSubset。

2:document类型的变化:

DOM2级核心还为document。implementation对象规定了两个新方法:creatDocumentType()和creatDocument()

前者用于创建一个新的DocumentType节点,接受三个参数:文档类型,publicID、systemID;

创建新文档时需要使用到createDocument()方法,同样也接受三个参数:namesp-aceURI、文档元素的标签名、新文档类型

3:Node类型的变化

就只是添加了isSupported()方法:用于确定当前节点具有什么能力。

这个方法接收两个参数,特性名和特性版本号。

12.2样式

在HTML中定义样式的方法有三种:外部,嵌入

12.2.1访问元素的样式


          CSS属性                                                                                                                          javaScript属性


 background-image                                                                                                    style.backgroundImage

 color                                                                                                                            style.color

 display                                                                                                                         style.display

 font-family                                                                                                                   style.fontFamily


1:DOM样式属性和方法:

“DOM2级样式”规范还为style对象定义了一些属性和方法。这些属性和方法在提供元素style特性的同时,也可以修改样式。下面列出了这些属性和方法。

cssText:可以访问到style中的CSS代码

length:应用给于是你素的CSS属性的数量。

parentRule:表示CSS信息的CSSRule对象

getPropertyCssValue(propertyName):返回包含给定属性值的CssVal对象。

getPropertyPriority(propertyName):如果属性给定了!important设置,就返回!important,否则就返回空字符串

getPropertyValue()返回给定属性的字符串值

item()返回给定位置的CSS属性的名称

removeProperty(propertyName):从样式中删除给定的样式

setProperty()将给定属性设置为相应的值,并加上优先权限标志。

在实际开发中,getPropertyValue()用的比较频繁

2计算的样式

getComputedStyle()方法。这个方法需要接受两个参数:要取得计算样式的元素和一个伪元素字符串。如果不需要伪元素字符串,可以填null。

例子:取得元素样式

 

12.2.2 操作样式表

CSSStyleSheet 继承自StyleSheet,后者可以作为一个接口来定义非CSS样式表。从StyleSheet接口继承而来的属性如下。

disable:表示样式表是否被禁用布尔值

href:如果样式变是通过包含的,则是样式表的URL:否则,是null

media:当前样式表支持的所有媒体类型的集合

ownerNode:指向拥有当前样式表的节点的指针

parentStyleSheet:一个指向导入他样式表的指针

title:ownerNode中title属性的值。

type:表示样式表类型的字符串

cssRules样式表中的规则集合

ownerRule:如果样式表是通过@import导入的,这个属性就是一个指针,指向表示导入的规则,否则,值为null

deleteRule(index):删除指定的规则

insertRule:(方法)向cssRule集合中插入rule字符串

应用于文档的所有样式都是通过docuement.stylesheets集合来表示的

1:CSS规则:

CSSStyleSheet对象包含以下对象:

cssText:返回整条规则对应的文本。

parentRule:如果当前规则是导入规则,这个属性就返回导入规则;否则就是null

parentStyleSheet:当前规则所属的样式表

SelectorText:返回当前规则的选择符文本。

Style:一个CSSStyleDeclaration对象,可以通过它设置和取得规则中特定样式的样式表。

type:表示规则类型的常量值。

其中最常用的属性是cssText,selectorText和Style。 

2:创建规则

DOM规定。要向现在有样式的表中添加新规则,需要使用insertRule()方法。这个方法接受两个参数:规则文本和插入的索引

例子:

sheet.insertRule("body{background-color:silver}",0);//DOM方法。

跨浏览器的方式插入规则,可以使用下面的函数。这个函数接受四个值:要向其中添加规则的样式表以及与addRule()相同的三个参数,如图:

3.删除规则:

从样式表中删除规则的方法是deleteRule()

1:偏移量

元素可见的大小由其高度、宽度决定,包括所有的内边距、滚动条的边框大小(注意,不包括外边框)。通过下列四个属性可以取得元素的偏移量。

offsetHeight:元素在垂直放上上占用的空间大小,一像素计;

offsetWidth:元素在水平方向上占用空间的大小,以像素记。

offsetLeft:元素的左边框至包含元素的左内边框之间的像素距离。

offsetTop:元素上外边框至元素上内边框之间的距离。

其中offsetLeft和offsetTop属性与包含元素有关,包含元素的引用存在offsetParent属性中

2:客户区的大小:

盒子模型分为外边距(margin)内边距(padding)边框(border)和内容(contain)区域

客户区就类似于盒子模型的contain区域,有两个属性,clienWidth和clienHeight

3:滚动大小:

滚动大小指的是包含滚动内容的元素的大小

包含了四个值:

scrollHeight:在没有滚动条的情况下,元素内容的总高度

scrollWidth:在没有滚动条的情况下,元素内容的总宽度

scrollLeft:被影藏在内容区域左边的像素数

scrollTop:被影藏在内容区域上方的像素数

scrollHeight和scrollWidth只要用于确定元素内容的实际大小。

通过scrollLeft和scrollRgiht属性既可以确定当前滚动的状态,也可以设置元素滚动的位置。

4:确定元素大小

各个浏览器为每个元素都提供了一个getBoundingClientRect()方法,这个方法返回一个矩形对象,包含四个属性:left、top、right、和bottom

12.3 遍历

DOM2级遍历和范围模块定义了两个用于辅助完成顺序遍历DOM结构的类型:NodeIterator和TreeWalker。

12.3.1 NodeIterator

NodeIterator类型是两者中比较简单的一个,可以使用document.creatNodeIterator()方法创建他的新实例。这个方法接收四个参数

root:想要作为搜索起点的树中的节点。

whatToshow:表示要访问哪些节点的数字代码。

filter:是一个NodeFilter对象

entityReferenceExpansion:布尔值,表示是否要扩展实体引用。

DOM2级遍历和范围

(1)遍历即使用NodeIterator或TreeWalker对DOM执行深度优先的遍历

(2)NodeIterator是一个简单的接口,只允许以一个节点的步幅前后移动。而TreeWalker在提供相同功能的同时,还支持在DOM结构的各个方向上移动,包括父节点、同辈节点、和子节点等方向。

(3)范围是选择DOM机构中特定部分,然后再执行相应操作的一种手段。

(4)使用范围选区可以在删除文档中某些部分的同时,保持文档结构的格式良好,或者复制文档的相应部分。

(5)IE8及更早版本不支持“DOM2级 遍历和范围”模块,但它提供了一个专有的文本范围对象,可以用来完成简单的基于文本的操作范围。IE9完全支持DOM遍历

17章:错误处理及调试:
17.1.1 IE

IE是唯一一个在浏览器界面窗体中显示JS错误的,发生JS错误时,浏览器左下角会出现一个黄色的图标,旁边显示着Error on page

17.2.1try-catch语句:

try{
    //可能出错的语句
}catch(error){
    //怎么处理 
}

1:finally子句

finally在try语句中一定会被执行,不管catch语句是否已经执行,他会忽略catch语句。

2:错误类型:

Error

EvalError

RangeError

ReferenceError

SyntaxError

相关推荐:

细说JavaScript对dom的操作

Vue中DOM的异步更新策略以及nextTick机制详解

jQuery中DOM节点操作方法总结

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
Python 自然语言处理(NLP)基础与实战
Python 自然语言处理(NLP)基础与实战

本专题系统讲解 Python 在自然语言处理(NLP)领域的基础方法与实战应用,涵盖文本预处理(分词、去停用词)、词性标注、命名实体识别、关键词提取、情感分析,以及常用 NLP 库(NLTK、spaCy)的核心用法。通过真实文本案例,帮助学习者掌握 使用 Python 进行文本分析与语言数据处理的完整流程,适用于内容分析、舆情监测与智能文本应用场景。

10

2026.01.27

拼多多赚钱的5种方法 拼多多赚钱的5种方法
拼多多赚钱的5种方法 拼多多赚钱的5种方法

在拼多多上赚钱主要可以通过无货源模式一件代发、精细化运营特色店铺、参与官方高流量活动、利用拼团机制社交裂变,以及成为多多进宝推广员这5种方法实现。核心策略在于通过低成本、高效率的供应链管理与营销,利用平台社交电商红利实现盈利。

109

2026.01.26

edge浏览器怎样设置主页 edge浏览器自定义设置教程
edge浏览器怎样设置主页 edge浏览器自定义设置教程

在Edge浏览器中设置主页,请依次点击右上角“...”图标 > 设置 > 开始、主页和新建标签页。在“Microsoft Edge 启动时”选择“打开以下页面”,点击“添加新页面”并输入网址。若要使用主页按钮,需在“外观”设置中开启“显示主页按钮”并设定网址。

16

2026.01.26

苹果官方查询网站 苹果手机正品激活查询入口
苹果官方查询网站 苹果手机正品激活查询入口

苹果官方查询网站主要通过 checkcoverage.apple.com/cn/zh/ 进行,可用于查询序列号(SN)对应的保修状态、激活日期及技术支持服务。此外,查找丢失设备请使用 iCloud.com/find,购买信息与物流可访问 Apple (中国大陆) 订单状态页面。

136

2026.01.26

npd人格什么意思 npd人格有什么特征
npd人格什么意思 npd人格有什么特征

NPD(Narcissistic Personality Disorder)即自恋型人格障碍,是一种心理健康问题,特点是极度夸大自我重要性、需要过度赞美与关注,同时极度缺乏共情能力,背后常掩藏着低自尊和不安全感,影响人际关系、工作和生活,通常在青少年时期开始显现,需由专业人士诊断。

7

2026.01.26

windows安全中心怎么关闭 windows安全中心怎么执行操作
windows安全中心怎么关闭 windows安全中心怎么执行操作

关闭Windows安全中心(Windows Defender)可通过系统设置暂时关闭,或使用组策略/注册表永久关闭。最简单的方法是:进入设置 > 隐私和安全性 > Windows安全中心 > 病毒和威胁防护 > 管理设置,将实时保护等选项关闭。

6

2026.01.26

2026年春运抢票攻略大全 春运抢票攻略教你三招手【技巧】
2026年春运抢票攻略大全 春运抢票攻略教你三招手【技巧】

铁路12306提供起售时间查询、起售提醒、购票预填、候补购票及误购限时免费退票五项服务,并强调官方渠道唯一性与信息安全。

122

2026.01.26

个人所得税税率表2026 个人所得税率最新税率表
个人所得税税率表2026 个人所得税率最新税率表

以工资薪金所得为例,应纳税额 = 应纳税所得额 × 税率 - 速算扣除数。应纳税所得额 = 月度收入 - 5000 元 - 专项扣除 - 专项附加扣除 - 依法确定的其他扣除。假设某员工月工资 10000 元,专项扣除 1000 元,专项附加扣除 2000 元,当月应纳税所得额为 10000 - 5000 - 1000 - 2000 = 2000 元,对应税率为 3%,速算扣除数为 0,则当月应纳税额为 2000×3% = 60 元。

35

2026.01.26

oppo云服务官网登录入口 oppo云服务登录手机版
oppo云服务官网登录入口 oppo云服务登录手机版

oppo云服务https://cloud.oppo.com/可以在云端安全存储您的照片、视频、联系人、便签等重要数据。当您的手机数据意外丢失或者需要更换手机时,可以随时将这些存储在云端的数据快速恢复到手机中。

121

2026.01.26

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.2万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.5万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号