11|DOM拓展

2020-05-12 本文已影响0人井润

本节当中讲的内容其实并不多主要有以下几个方面的内容:

选择符API
元素遍历
与类相关的补充
焦点管理
HTMLDocument的变化
插入标记
children
contains

01|选择器API

主要介绍了两个API:

querySelector 传入对应的css选择器 返回与模式匹配的第一个元素没有的话返回null
querySelectorAll 返回所有的匹配元素,所有匹配元素并非一个元素而是一个NodeList的实例

02|元素遍历

其中元素遍历中不包含文本节点和注释节点

// ie9+支持
1.childElementCount // 返回子元素的个数
2.firstElementChild // 指向第一个子元素
3.lastElementChild // 指向最后一个子元素
4.previousElementSibling // 指向前一个同辈元素
5.nextElementSibling // 指向后一个同辈元素

03|与类相关的补充

1.classList.length // 返回包含元素的个数
2.classList.remove() //接收一个类名，从列表中删除给定类名
3.classList.toggle() //如果列表中存在给定的值，删除它，否则添加它
4.classList.add() //将给定的字符串添加到列表中，如果已经存在，就不添加
5.classList.contains() //表明列表中是否存在给定的值，存在则返回true,否则返回false

04|焦点管理

其中用户获取焦点的方式如下所示:

页面渲染
用户输入
在代码中调用focus

1.document.activeElement //始终会引用dom中获得焦点的元素,文档刚刚加载完成时，保存的是document.body元素的引用，文档加载期间的值为null
2.document.hasFocus() //用于确定文档是否获得了焦点，是则返回true

05|HTMLDocument的变化

readyState属性

    1.loading //正在加载文档，可以在onload外使用
    2.complete //文档加载完毕。只能在onload内获取
// 例子
if(document.readyState == "complete") {
    // 执行操作
}

兼容模式

其中兼容模式是通过compatMode

字符集属性

我们可以通过document.charset来获取字符集或者设置字符集当然还能够通过document.defaultCharset获取默认的字符集

自定义数据属性

HTML5规定可以为元素添加非标准的属性,但要添加前缀data-,目的是为元素提供与渲染无关的信息,或者提供语义的信息

dataset属性的值DOMStringMap的一个实例,也就是一个键值对儿的映射!

我们可以看看对应的例子:

<div id="mydiv" data-appid="12345" data-myname="probedream"></div>
<script>
let div = document.getElementById("mydiv");
let appid = div.dataset.appid;
let myname = div.dataset.myname;
if(myname){
    console.log("Hello!")
}
myname = "Gump";
if(myname){
    console.log(myname)
}
//Hello! Gump
</script>

06|插入标记

insertAdjacentHTML()
// 1.作为前一个同辈元素被插入
el.insertAdjacentHTML('beforebegin', '<p>hello world</p>');
// 2.作为第一个子元素被插入
el.insertAdjacentHTML('afterbegin', '<p>hello world</p>');
// 3.作为最后一个子元素被插入
el.insertAdjacentHTML('beforeend', '<p>hello world</p>');
// 4.作为后一个同辈元素被插入
el.insertAdjacentHTML('afterend', '<p>hello world</p>');

innerHTML:设置或获取HTML语法表示的元素的后代
outerHTML:获取描述元素（包括其后代）的序列化HTML片段

<div id="d">
    <p>Content</p>
    <p>Further Elaborated</p>
</div>
<script>
    const d = document.getElementById("d");
    console.log(d.outerHTML);
//<div id="d"><p>Content</p><p>Further Elaborated</p></div>    
</script>

其中的性能问题:

使用以上三个方法,特别是innerHTML再我们同样修改页面内容特别是DOM操作频繁的时候innerHTML性能上面还是挺不错的!

scrollIntoView()方法

滚动页面的一个方法,也是HTML5新增的一个方法作为标准方法而存在!

07|children

// 获取元素集合，只包含元素节点
el.children.length | el.children[i]

08|contains 判断某一个节点是否是另外节点的后代

parentEl.contains(childEl); // 如果childEl是parentEl的后代，则返回true

补充:其中还有一些我们常常用到的比较重要的点

innerText 操作元素中包含的所有文本的内容
outerText 读取文本值的时候和innerText是差不多的但是设置文本值的时候会替换整个元素!

滚动
scrollIntoViewIfNeeded(alignCenter) 当前元素在视口中不可见的情况下,滚动浏览器窗口或者容器元素,最终让他可见
scrollByLines 将元素的内容滚动指定的行高
scrollByPages 将元素的内容滚动指定的页面高度

这就是JavaScript高级程序设计中第十一章讲解到的大致内容了!