javascript红宝书学习(六)DOM扩展

DOM扩展的两个标准：Selectors API 与 HTML5

Selectors API

JavaScript 库中最流行的一种能力就是根据 CSS 选择符的模式匹配 DOM 元素。比如，jQuery 就完全 以 CSS 选择符查询 DOM 获取元素引用，而不是使用 getElementById()和 getElementsByTagName()。
Selectors API Level 1 的核心是两个方法:querySelector()和 querySelectorAll()

<div id = 'aa' bba="helloasdasd!" name = "a1"><p>cc</p>pic test</div>
<h1 id = 'bb'  class = "bb_1" name = "b1">bb</h1>
// querySelector()的用法
// 获取Body
let body = document.querySelector("body");
// 获取id为aa的
let div_aa = document.querySelector("#aa");
// 获取class的方式，获取bb_1
let h1_bb = document.querySelector(".bb_1");
// querySelectorAll():这个方法返回的是一个 NodeList 的静态实例(这是一个快照)
// 获取id为aa下的所有p元素内容
let div_aa_p = document.querySelector("#aa").querySelectorAll("p");
console.log(div_aa_p); // 返回NodeList

学习NodeList

API：developer.mozilla.org/zh-CN/docs/…

HTML5

getElementsByClassName()

let div_aa_p = document.getElementsByClassName("aa"); // aa为className
console.log(div_aa_p); // 返回的对象为HTMLCollection

classList（兼容性ie10+）

let div_aa_p = document.getElementById("aa");
console.log(div_aa_p.classList); // 返回的是DOMTokenList
div_aa_p.classList.add("bb"); // 增加一个类名
console.log(div_aa_p.classList);
div_aa_p.classList.remove("bb"); // 删除一个类名
console.log(div_aa_p.classList);
console.log(div_aa_p.classList.contains("aa")); // 是否存在,存在：true，不存在false
console.log(div_aa_p.classList.toggle("bb")); // 是否存在,如果不存在则添加,返回布尔值，存在返回false，不存在返回true

焦点管理 - activeElement

默认情况下，document.activeElement 在页面刚加载完之后会设置为 document.body。而在 页面完全加载之前，document.activeElement 的值为 null。

let btn = document.getElementById("btn");
console.log(btn);
btn.focus();
console.log(document.activeElement == btn);  // 当存在焦点时 返回true
console.log(document.hasFocus()); // 当前文档是否有焦点 true代表是

HTMLDocument扩展

• readyState属性：判断文档是否加载完成，loading:正在加载 complete：文档加载完成
• compatMode属性：当前浏览器处于什么渲染模式，CSS1Compat(标准模式)BackCompat(混合模式)
• head属性：获取head头,document.head

自定义属性

要用data-前缀进行处理

<div id = 'aa' class = "aa" data-mynames = "张三" name = "a1">pic test</div>
let div = document.getElementById("aa");
console.log(div.dataset); // 返回的是DOMStringMap类型
console.log(div.dataset.mynames); // 无论data-MYNAMES 还是data-myNames,都需要用小写进行获取
console.log(`${div.dataset.mynames}`); // 也可以用这种方式表示，记得要加上``

插入标记

innerHTML属性和outHTML属性

<div id = "inner">innerHtml</div>
<div id = "out">outHtml</div>
// innerHTML会增加一个p元素
let inner = document.getElementById("inner");
// <div id="inner"><p>INSERT innerhtml </p></div>
inner.innerHTML = '<p>INSERT innerhtml </p>';
// outerHTML会替换会将当前的out替换为p元素
let out = document.getElementById("out");
// <p>INSERT outHtml </p> 会进行替换replace
out.outerHTML = '<p>INSERT outHtml </p>';