本节当中讲的内容其实并不多主要有以下几个方面的内容:
- 选择符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高级程序设计中第十一章讲解到的大致内容了!
网友评论