JavaScript DOM拓展 API 遍历等

最新推荐文章于 2022-08-19 19:38:50 发布

MaiOvv

最新推荐文章于 2022-08-19 19:38:50 发布

阅读量214

点赞数

分类专栏： JavaScript 文章标签： JavaScript DOM

本文链接：https://blog.csdn.net/weixin_43960657/article/details/89036705

版权

JavaScript 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

浅谈DOM拓展

对DOM的两个主要拓展是Selectors API 和HTML5

一、选择符API——Selectors

Selectors API致力于让浏览器原生支持CSS查询，即解析和树查询操作可以在浏览器中直接编译完成，相比其他JS库，极大地改善了性能。

Selectors API Level 1有以下两大方法，可通过Document和Element类型实例调用它们。

1、querySelector( )

此方法接收一个参数，此参数与CSS中的选择器一样，并返回找到的第一个元素，若无则返回null

var body = document.querySelector("#myDiv");  //查找ID为mydiv的元素

2、querySelectorAll( )

参数同上，但返回的是所有匹配的元素，即带上所有属性和方法的NodeList，但此时的NodeList是静态的，不是实时的。若无匹配，则对象为空。

var strongs = document.querySelectorAll("p strong");  //选择p中所有strong元素

3、matchesSelector( ）

此方法为Selectors API Level 2新增的，若调用此方法的元素可以通过选择器（方法参数）找到，则返回true，此方法不常用

document.body.matchesSelector("body.page1");  //body元素是否能通过body.page1选择器找到，若能返回true

二、元素遍历

Element Traversal API为DOM元素新添了一下五个属性，这些元素都不包括空白文本节点，使得不同浏览器查找DOM元素更规范，但此方法并不是每个浏览器都适用。

1、childElementCount——子元素个数

2、firstElementChild——第一个子元素

3、lastElementChild——最后一个子元素

4、previousElementSibling——前同辈元素

5、nextElementSibling——后同辈元素

三、HTML5新增的DOM节点

1、getElementsByClassName( )

可通过document对象及所有HTML元素调用，通过一或多个（空格隔开）类名选择元素，返回元素的NodeList，所以同样有性能问题。虽然并不是所有浏览器都支持，但此方法很受欢迎，因为方便。

var elements = document.getElementByClassName("name1 name2")//选择同时拥有name1 和name2类名的元素

2、classList属性

classList属性可方便的操作元素的类名，classList属性是DOMTokenList的一个实例，其拥有length属性，item( )方法，或者[ ] 。DOMTokenList拥有以下方法

1）add(value)——不重复的将value添加到列表中

2）contains(value)——已存在value则返回true

3）remove( value)——删除value

4）toggle(value)——若已有value则删除它，若没有则添加它

div.classList.remove("user");  //删除div元素的user类名

3、焦点管理

1）document.activeElement属性——DOM中当前获得焦点的元素

element = document.activeElement;  //返回获得焦点的元素

2）document.hasFocus( )方法——确定文档是否获得了焦点，若是则返回true

4、HTMLDocument

1)document对象的属性：readyState属性，它有两个值

loading——正在加载文档

complete——已经加载完文档

if (document.readyState == "complete"){
//若文档加载完成，则执行此操作
}

2)兼容模式：compatMode属性——浏览器采用哪种渲染模式

document.compatMode == "CSSCmopat";//标准模式
document.compatMode == "BackCompat"//混杂模式

3）head属性：及可使用document.head引用<head>元素了

5、自定义数据属性

HTML5可为元素添加自定义属性，但要加前缀"data-" ，例如

<div data-myName="Ovv">  </div>   //自定义数据属性在HTML中需加data-

自定义属性在DOM中可通过元素的dataset属性访问，如

var div = document.getElementByTagName("div");//获得div元素

var myName = div.dataset.myName;//获取myName特性

div.dataset.myName = "other";//修改myName特性

6、插入标记

1）innerHTML属性

读模式下：返回元素的所有子节点写模式下：替换元素所有子节点

div.innerHTML = "<p>"reader</p>" ;  //向div中插入"reader字符

//在HTML中将会转成：  <p>&quot;reader</p>

2）outerHTML属性

读模式下：返回元素及其所有子节点写模式下：会替换元素本身及其所有子节点

3）insertAdjacentHTML( )方法

有两个参数，第一个参数是下列值之一，第二个参数则是要插入的内容

beforebegin——作为前一个同辈元素插入

afterend——作为后一个同辈元素插入

afterbegin——作为第一个子元素插入

beforeend——作为最后一个子元素插入

element.insertAdjacentHTML("beforebegin","<p>Hello</p>");//在element前插入<p>Hello</p>

7、scrollIntoView( )方法——页面滚动

若参数为true或不传参，则让调用元素的顶部与视口平齐。若为false，则尽可能让元素全部出现在视口中。

MaiOvv

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript DOM拓展 API 遍历等

浅谈DOM拓展对DOM的两个主要拓展是Selectors API 和HTML5一、选择符API——Selectors Selectors API致力于让浏览器原生支持CSS查询，即解析和树查询操作可以在浏览器中直接编译完成，相比其他JS库，极大地改善了性能。Selectors API Level 1有以下两大方法，可通过Document和Element类型实例调用它们...
复制链接

扫一扫