概述
文章目录
- 1. Selectors API
- 1.1 querySelector()
- 1.2 querySelectorAll()
- 1.3 matches()
- 2. 元素遍历
- 3. HTML5
- 3.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 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>
最后
以上就是害怕野狼为你收集整理的DOM扩展-js红宝书笔记1. Selectors API2. 元素遍历3. HTML5的全部内容，希望文章能够帮你解决DOM扩展-js红宝书笔记1. Selectors API2. 元素遍历3. HTML5所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复