DOM扩展-js红宝书笔记

最新推荐文章于 2023-09-28 10:06:37 发布

在下小航（Harvey）

最新推荐文章于 2023-09-28 10:06:37 发布

阅读量106

点赞数

分类专栏： JS红宝书笔记文章标签： js

本文链接：https://blog.csdn.net/laoxiaohang/article/details/113573760

版权

JS红宝书笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

文章目录

1. Selectors API
2. 元素遍历
3. HTML5

1. Selectors API

1.1 querySelector()

querySelector()方法
参数：CSS 选择符参数
返回：匹配该模式的第一个后代元素
如果没有匹配到则返回null

// 取得<body>元素
let body = document.querySelector("body"); 
// 取得 ID 为"myDiv"的元素
let myDiv = document.querySelector("#myDiv");
// 取得类名为"selected"的第一个元素
let selected = document.querySelector(".selected"); 
// 取得类名为"button"的图片
let img = document.body.querySelector("img.button");

1.2 querySelectorAll()

querySelectorAll()方法
和querySelector（）差不多，但是返回的是一个NodeList静态实例
注意：它是静态的“快照”，而非“实时”的查询

// 取得 ID 为"myDiv"的<div>元素中的所有<em>元素
let ems = document.getElementById("myDiv").querySelectorAll("em"); 
// 取得所有类名中包含"selected"的元素
let selecteds = document.querySelectorAll(".selected"); 
// 取得所有是<p>元素子元素的<strong>元素
let strongs = document.querySelectorAll("p strong");

let strongElements = document.querySelectorAll("p strong"); 
// 以下 3 个循环的效果一样
for (let strong of strongElements) { 
 strong.className = "important"; 
} 
for (let i = 0; i < strongElements.length; ++i) { 
 strongElements.item(i).className = "important"; 
} 
for (let i = 0; i < strongElements.length; ++i) { 
 strongElements[i].className = "important"; 
}

1.3 matches()

matches()方法
作用：查看某个元素是否在页面中
参数：一个 CSS 选择符
返回：如果元素匹配则该选择符返回 true，否则返回 false

if (document.body.matches("body.page1")){ 
 // true 
}

2. 元素遍历

添加了5个属性，防止注释和文本的干扰

childElementCount，返回子元素数量（不包含文本节点和注释）；
firstElementChild，指向第一个 Element 类型的子元素（Element 版 firstChild）；
lastElementChild，指向最后一个 Element 类型的子元素（Element 版 lastChild）；
previousElementSibling ，指向前一个 Element 类型的同胞元素（ Element 版previousSibling）；
nextElementSibling，指向后一个 Element 类型的同胞元素（Element 版 nextSibling）。
有了这些属性，就不需要再判断nodeType是否等于1了

3. HTML5

3.1 CSS 类扩展

getElementsByClassName()
参数：一个或多个类名
返回一个NodeList类型

// 取得所有类名中包含"username"和"current"元素
// 这两个类名的顺序无关紧要
let allCurrentUsernames = document.getElementsByClassName("username current"); 
// 取得 ID 为"myDiv"的元素子树中所有包含"selected"类的元素
let selected = document.getElementById("myDiv").getElementsByClassName("selected");

3.2 classList 属性

对于拥有多个class的元素，为了避免一个个拆分clss，可以使用classList 属性，是一个新的集合类型 DOMTokenList 的实例。
DOMTokenList实例增加的方法

add(value)，向类名列表中添加指定的字符串值 value。如果这个值已经存在，则什么也不做。
contains(value)，返回布尔值，表示给定的 value 是否存在。
remove(value)，从类名列表中删除指定的字符串值 value。  toggle(value)，如果类名列表中已经存在指定的 value，则删除；如果不存在，则添加。

删除某个类名：

div.classList.remove("user");

// 删除"disabled"类
div.classList.remove("disabled"); 
// 添加"current"类
div.classList.add("current");
// 切换"user"类
div.classList.toggle("user"); 
// 检测类名 
if (div.classList.contains("bd") && !div.classList.contains("disabled")){ 
 // 执行操作
) 
// 迭代类名
for (let class of div.classList){ 
 doStuff(class); 
}

3.2 焦点管理

document.activeElement
返回：当前拥有焦点的元素

document.hasFocus()方法
作用：判断文档是否拥有焦点

focus()方法
作用：让某个元素自动获得焦点

let button = document.getElementById("myButton"); 
button.focus(); 
console.log(document.activeElement === button); // true

3.3 HTMLDocument 扩展

3.3.1 readyState 属性

document.readyState 属性

loading，表示文档正在加载；
complete，表示文档加载完成。

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

3.3.2 compatMode 属性

这个属性唯一的任务是指示浏览器当前处于什么渲染模式
标准模式下 document.compatMode 的值是"CSS1Compat"，
而在混杂模式下，document.compatMode 的值是"BackCompat"：

if (document.compatMode == "CSS1Compat"){ 
 console.log("Standards mode"); 
} else { 
 console.log("Quirks mode"); 
}

3.3.3 head 属性

作为对 document.body（指向文档的<body>元素）的补充，HTML5 增加了 document.head 属性，指向文档的<head>元素

3.4 字符集属性

characterSet 属性表示文档实际使用的字符集，也可以用来指定新字符集。

console.log(document.characterSet); // "UTF-16" 
document.characterSet = "UTF-8";

3.5 自定义数据属性

使用前缀 data-以便告诉浏览器，这些属性既不包含与渲染有关的信息

// 本例中使用的方法仅用于示范
let div = document.getElementById("myDiv"); 
// 取得自定义数据属性的值
let appId = div.dataset.appId; 
let myName = div.dataset.myname; 
// 设置自定义数据属性的值
div.dataset.appId = 23456; 
div.dataset.myname = "Michael"; 
// 有"myname"吗？
if (div.dataset.myname){ 
 console.log(`Hello, ${div.dataset.myname}`);

3.6 插入标记

3.6.1 innerHTML 属性

innerHTML 属性读取时，会返回元素所有后代的 HTML 字符串。

<div id="content"> 
<p>This is a <strong>paragraph</strong> with a list following it.</p> 
<ul> 
<li>Item 1</li> 
<li>Item 2</li> 
<li>Item 3</li> 
</ul> 
</div>

对于这里的<div>元素,其 innerHTML 属性会返回以下字符串：

<p>This is a <strong>paragraph</strong> with a list following it.</p> 
<ul> 
 <li>Item 1</li> 
 <li>Item 2</li> 
 <li>Item 3</li> 
</ul>

在下小航（Harvey）

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM扩展-js红宝书笔记

文章目录1. Selectors API1.1 querySelector()1.2 querySelectorAll()1.3 matches()2. 元素遍历3. HTML53.1 CSS 类扩展3.2 classList 属性3.2 焦点管理3.3 HTMLDocument 扩展3.3.1 readyState 属性3.3.2 compatMode 属性3.3.3 head 属性3.4 字符集属性3.5 自定义数据属性3.6 插入标记3.6.1 innerHTML 属性1. Selectors AP
复制链接

扫一扫