资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/js高级程序设计笔记——DOM扩展

js高级程序设计笔记——DOM扩展

ningwang / 686人阅读

摘要：扩展为了实现更多的功能，会有一些标准或专有的扩展。标准扩展主要有选择符元素遍历一选择符选择符能够允许代码直接根据选择符选择与某个模式匹配的元素。

DOM扩展

为了实现更多的功能，会有一些标准或专有的DOM扩展。

标准扩展主要有：

SelectorAPI（选择符API）

HTML5

Element Traversal（元素遍历）

一、 选择符API

选择符API能够允许JS代码直接根据CSS选择符选择与某个模式匹配的DOM元素。

Selector API Level1有两个核心方法：querySelector()、querySelectorAll()，在兼容的浏览器中，Document及Element类型的实例可以调用它们。

Selector API Level2为Element类型新增了一个方法：matchesSelector()。

（一）querySelector()方法

语法：querySelector(CSS选择符)：返回与该CSS选择符匹配的第一个元素，若无匹配元素，则返回null

实例：
//取得body元素
var body = document.querySelector("body");
//取得ID为"myDiv"的元素
var myDiv = document.querySelector("#myDiv");

注释：
Document类型调用querySelector()方法，会在文档元素的范围内查找匹配的元素
Element类型调用querySelector()方法，只会在该元素后代元素的范围内查找匹配的元素

（二）querySelectorAll()方法

语法：querySlectorAll(css选择符)：返回所有匹配的元素，这些元素以NodeLise形式存在

要取得NodeList中的元素，可以使用item()方法或者使用方括号语法

（三）matchesSelector()方法

语法：matchesSelector(CSS选择符)，如果调用元素与该选择符匹配，返回true；否则，返回false

各个浏览器对matchesSelector()方法只有一些实验性地实现，若想使用该方法，最好是编写一个包装函数：

function matchesSelector(element,selector){

if(element.matchesSelector){
    return element.matchesSelector(selector);
}
// IE9+
else if(element.msMatchesSelector){
    return element.msMatchesSelector(selector);
}
//Firefox 3.6+
else if(element.mozMatchesSelector){
    return element.mozMatchesSelector(selector);
}
//safari5+、chrome
else if(element.webkitMatchesSelector){
    return element.webkitMatchesSelector(selector);
}
else{
    throw new Error("Not supported.");
}

}

二、元素遍历

对于元素间的空格，不同浏览器的理解不同（IE9及之前版本不会返回文本节点，而其他所有浏览器都会返回文本节点），导致childNodes和firstChild等属性返回的结果不一致。为了解决这一问题，Element Traversal规范为DOM元素新定义了5个属性：

childElementCount：返回子元素的个数（不包括文本节点和注释）

firstElementChild：指向第一个子元素

lastElementChild：指向最后一个子元素

previousElementSibling：指向前一个同辈元素

nextElementSibling：指向后一个同辈元素

三、HTML5 （一）与类相关的扩展

HTML4使得class属性用得越来越多，为了让开发人员简化对css类的用法，HTML5新增了很多API

1 getElementsByClassName()

该方法即可以被Document类型调用，又可以被Element类型调用，返回的是NodeList对象

2 classList属性

在HTML5之前，想要操作类名，需要使用className属性。为了简化操作类名的方式，HTML5为所有元素新增了classList属性，classList属性还定义了如下方法：

add(value)：将value添加到类名列表中，若该值已经存在，就不添加

contains(value)：列表中如果存在value值，则返回true；否则返回false

remove(value)：从列表中删除给定的类名

toggle(value)：若列表中存在给定的类名，则删除它；若列表中没有给定的值，添加它

支持classList属性的浏览器有FireFox3.6+和Chrome

（二）焦点管理

HTML5新增了辅助管理DOM焦点的功能

1 document.activeElement属性

该属性指向DOM中当前获得焦点的元素（元素获得焦点的方式：页面加载、用户输入、代码中调用focus()方法）

默认情况，文档刚加载完成时，document.activeElement中保存的是document.body元素；文档加载期间，document.activeElement的值为null

2 document.hasFocus()方法

该方法用于确定文档是否获得了焦点

（三）HTMLDocument的变化

1 readyState属性

作用：该属性用来指示文档是否加载完成

该属性由两个取值：

loading：正在加载文档

complete：已经加载完文档

用法：用它来作为文档加载完成的指示器

if(document.readyState = "complete"){

   //执行操作

}

2 compatMode属性

页面有两种模式：标准模式和混杂模式，因此检测页面的模式就成为浏览器的必要功能。

通过使用compatMode属性开发人员可以知道浏览器采用了哪种模式：

标准模式：document.compatMode = "CSS1Compat"

混杂模式：document.compatMode = "BackCompat"

3 head属性

document.head属性可以获得元素

实现document.head属性的浏览器有chrome和Safari5

若需要引用元素，可以使用以下方法兼容所有的浏览器：
var head = document.head || document.getElementsByTagName("head")[0];

（四）字符集属性

1 charset属性

含义：表示文档中实际使用的字符集，也可以用来指定新的字符集。

默认情况下，document.charset = "UTF-16"

支持该属性的浏览器有：IE、Firefox、Safari、Opera、Chrome

2 defaultCharset属性

含义：当前文档的默认字符集

支持该属性的浏览器有：IE、Safari、Chrome

（五）自定义数据属性

1、 HTML5规定可以为元素添加非标准的属性，以此为元素提供与渲染无关的信息，或者提供语义信息
2、何时应用自定义数据属性？
当给元素添加一些不可见的数据以便进行其他处理，就会用到自定义数据属性。在跟踪链接或混搭应用中，通过自定义数据属性能方便地知道点击来自页面的哪个部分。
3、每个自定义数据属性，都要为其添加前缀data-

4、dataset属性可以访问自定义属性的值

//访问上述div元素的自定义属性  
var div = document.getElementById("myDiv");  
var appId = div.dataset.appId;  // 访问自定义属性值时，属性名前不必加data-前缀
（六）插入标记

1 innerHTML属性

在读模式下，innerHTML属性返回调用元素的所有子节点HTML标记
在写模式下，innerHTML属性会根据指定的值创建新的DOM树，然后用新DOM树替换调用元素原先的所有子节点

在读模式下，不同的浏览器返回的结果不同

2 outerHTML属性

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

3 insertAdjacentHTML()方法

语法：insertAdjacentHTML(插入位置，要插入的HTML文本)

插入位置必须是下列四个值之一：

"beforebegin"，在当前元素之前插入一个紧邻的同辈元素

"afterend"，在当前元素之后插入一个紧邻的同辈元素

"afterbegin"，给当前元素插入第一个子元素（不管当前元素是否有无子元素）

"beforeend"，给当前元素插入最后一个子元素（不管当前元素是否有无子元素）

（七）scrollIntoView()方法

所有HTML元素均可调用该方法，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视口中。
该方法参数的取值有两种可能：
true：窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐（不传入参数时也会出现这种效果）
false：调用元素会尽可能全部出现在视口中，调用元素的底部会与视口顶部平齐。

四 专有扩展 （一）文档模式

document.documentMode

（二）children属性

返回调用元素的元素子节点

（三）contains()方法

检测某节点是不是另一个节点的后代

（四）插入文本

1 innerText属性
2 outerText属性

（五）滚动
服务器托管 专线服务 高级程序设计-笔记 设计模式学习笔记 高级程序设计 高级系统程序设计

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85220.html

相关文章

  • JavaScript高级程序设计学习笔记一（JavaScript简介）

    摘要：在上百种语言中算是命好的一个，还有就是最近纳入高考体系的。由以下三个部分构成。就是对实现该标准规定的各个方面内容的语言的描述。是针对但经过扩展的用于的应用程序编程接口。将页面映射为由节点构成的树状结构。 JavaScript的历史这里就不再赘述了，当然JavaScript的历史还是比较有意思的。在上百种语言中JavaScript算是‘命’好的一个，还有就是最近纳入高考体系的python...

    supernavy 评论0 收藏0

  • 《javascript高级程序设计》笔记：script元素属性

    摘要：高级程序设计摘录可选。表示通过属性指定的代码的字符集。这个属性并不是必需的，如果没有指定这个属性，则其默认值仍为。规范要求脚本按照它们出现的先后顺序执行，因此第一个延迟脚本会先于第二个延迟脚本执行，而这两个脚本会先于事件执行。 《javascript高级程序设计》摘录： async:可选。表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或 等待加载其他脚本。只对外部...

    since1986 评论0 收藏0

  • 《JavaScript高级程序设计》笔记：DOM扩展（十一）

    摘要：取得所有类中包含和的元素。类名的先后顺序无所谓取得为的元素中带有类名的所有元素焦点管理也添加了辅助管理焦点的功能。首先就是属性，这个属性始终会引用中当前获得了焦点的元素。另外就是新增了方法，这个方法用于确定文档是否获得了焦点。 选择符API querySelector()方法 // 取得body元素 var tbody = document.querySelector(body); ...

    BenCHou 评论0 收藏0

  • 《JavaScript高级程序设计》笔记：JavaScript简介（一）

    摘要：实现一个完整的实现应该由下列三个不同的部分组成核心文档对象模型浏览器对象模型文档对象模型是针对但经过扩展用于的应用程序编程接口。级别级由两个模块组成核心和。其中，核心规定是如何映射基于的文档结构，以便简化对文档中任意部分的访问和操作。 javascript从一个简单的输入验证器发展成为一门强大的编程语言，完全出乎人们的意料。 javascript实现一个完整的javascript实现应...

    Edison 评论0 收藏0

  • 001-读书笔记-JavaScript高级程序设计 JavaScript简介

    摘要：由于计算机的国际化，组织的标准牵涉到很多其他国家，因此组织决定改名表明其国际性。规范由万维网联盟制定。级标准级标准是不存在的，级一般指的是最初支持的。 这篇笔记的内容对应的是《JavaScript高级程序设计(第三版)》中的第一章。 1.ECMA 和 ECMA-262 ECMA 是欧洲计算机制造商协会的缩写，全程是 European Computer Manufacturers Ass...

    masturbator 评论0 收藏0

发表评论

登陆后可评论

0条评论

ningwang

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<