高级程序设计(第3版)第十一章DOM扩展/笔记

DOM 扩展

选择符 API

• document.querySelector()
• document.querySelectorAll()
• matchesSelector()

 

元素遍历

• childElementCount：返回子元素（不包括文本节点和注释）的个数。
• firstElementChild：指向第一个子元素；firstChild 的元素版。
• lastElementChild：指向后一个子元素；lastChild 的元素版。
• previousElementSibling：指向前一个同辈元素；previousSibling 的元素版。
• nextElementSibling：指向后一个同辈元素；nextSibling 的元素版。

 

HTML5

• getElementsByClassName()方法
• classList 属性

• add(value)：将给定的字符串值添加到列表中。如果值已经存在，就不添加了。
• contains(value)：表示列表中是否存在给定的值，如果存在则返回 true，否则返回 false。
• remove(value)：从列表中删除给定的字符串。
• toggle(value)：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。

• 焦点管理

• 首先就是 document.activeElement 属性，这个 属性始终会引用 DOM中当前获得了焦点的元素。
• 元素获得焦点的方式有页面加载、用户输入（通常是 通过按 Tab 键）和在代码中调用 focus()方法
• document.hasFocus()方法，这个方法用于确定文档是否获得了焦点。

• HTMLDocument的变化

• readyState 属性

• loading，正在加载文档
• complete，已经加载完文档

• head 属性

• 自定义数据属性

• HTML5规定可以为元素添加非标准的属性，但要添加前缀 data-，目的是为元素提供与渲染无关的 信息，或者提供语义信息。这些属性可以任意添加、随便命名，只要以 data-开头即可
• 添加了自定义属性之后，可以通过元素的 dataset 属性来访问自定义属性的值

• 插入标记

• innerHTML 属性
• outerHTML 属性

• 会根据指定的HTML字符串创建新的DOM子树，然后用这个DOM子树完全替换调用元素。

• insertAdjacentHTML()方法

• 参一：

• "beforebegin"，在当前元素之前插入一个紧邻的同辈元素；
• "afterbegin"，在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素；
• "beforeend"，在当前元素之下插入一个新的子元素或在后一个子元素之后再插入新的子元素；
• "afterend"，在当前元素之后插入一个紧邻的同辈元素。

• 参二：

• 字符串

//作为前一个同辈元素插入 
element.insertAdjacentHTML("beforebegin", "
Hello world!
"); 

• 内存与性能

• 将设置 innerHTML 或 outerHTML 的次数控制在合理的范围内    
• 最好的做法是单独构建字符串，然后再一次 性地将结果字符串赋值给 innerHTML

for (var i=0, len=values.length; i < len; i++){  ul.innerHTML += "
" + values[i] + "
";  //要避免这种频繁操作！！ } var itemsHtml = ""; for (var i=0, len=values.length; i < len; i++){  itemsHtml += "
" + values[i] + "
"; } ul.innerHTML = itemsHtml; 

• scrollIntoView()方法

• scrollIntoiew()可以在所有的HTML元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视口中。

 

专有扩展

• children属性
• contains()方法

• 调用 contains()方法的应该是祖先节点， 也就是搜索开始的节点
• 这个方法接收一个参数，即要检测的后代节点。
• 如果被检测的节点是后代节点， 该方法返回 true；否则，返回 false

• 插入文本

• innerText 属性
• outerText 属性

• 滚动

• scrollIntoViewIfNeeded(alignCenter)

• 只在当前元素在视口中不可见的情况下，才滚动浏览器窗口或容器元素，最终让它可见。
• 如果当前元素在视口中可见，这个方法什么也不做。
• 如果将可选的alignCenter参数设置为true，则表示尽量将元素显示在视口中部（垂直方向）。

• scrollByLines(lineCount)

• 将元素的内容滚动指定的行高，lineCount 值可以是正值， 也可以是负值。

• scrollByPages(pageCount)

• 将元素的内容滚动指定的页面高度，具体高度由元素的高度决 定。