js红宝石第15章-DOM扩展

最新推荐文章于 2024-05-20 15:17:08 发布

hlyxsky

最新推荐文章于 2024-05-20 15:17:08 发布

阅读量26

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_60599861/article/details/131631037

版权

08年以前,大多数对于DOM的扩展是浏览器专有的.但是W3C着手于把这些扩展编为正式规范

15.1 SelectorsAPI

15.1.1 querySelector()

querySelector()接收CSS选择符参数

      // 取得<body>
      let body = document.querySelector('body')

      // 取得ID为"MyDiv"的元素
      let MyDiv = document.querySelector('#MyDiv')

      // 取得类名为"selected"的第一个元素
      let selected = document.querySelector('selected')

      //取得类型为img且类名为"button"的图片
      let img = document.querySelector('img.button')

15.1.2 querySelectorAll()

参数和querySelector()一样,但是返回NodeList实例

可以通过for-of/item()或中括号取得个别元素

15.1.3 matches()

接收CSS选择符参数,返回布尔值,表示元素是否匹配

15.2 元素遍历

ElementTraversalAPI为DOM元素添加了5个属性

childElementCount 返回子元素个数(不包含文本和注释)

firstElementChild 指向第一个Element类型的子元素

lastElementChild 指向最后一个Element类型的子元素

previousElementSibling 指向前一个Element类型的兄弟

nextElementSibling 指向后一个Element类型的兄弟

15.3 HTML5

H5包含了大量JSAPI定义

15.3.1 CSS类拓展

1.getElementsByClassName()

只会返回调用它的对象的所有子结点中匹配的元素

2.classList属性

操作类名

新增方法:
add(value) 不存在则添加,存在则不变

contains(value) 存在则true,否则false

remove(value) 移除value元素

toggle(value) 有则删除,没有则添加

15.3.2 焦点管理

activeElement 返回拥有focus()的元素

hasFocus() 返回布尔值

15.3.3 HTML Document扩展

1.readyState属性

loading 表示文档正在加载

complete 表示文档加载完成

2.compatMode

指示浏览器处于什么渲染模式

3.head

document.head可以直接获取<head>

15.3.4 字符集属性

characterSet表示实际使用的字符集,默认是"UTF-16"

但可以通过<meta>元素/响应头和characterSet修改

15.3.5 自定义数据属性

在属性名称前加 data- 告知

自定义属性会被存入

data-my-name 要使用 myName访问

15.3.6 插入标记

1.innerHTML属性

读取innerHTML属性时,会返回所有后代HTML的字符串

  <body>
    <div class="box">
      <p>123</p>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </div>
    <script>
      // 取得<body>
      let box = document.querySelector('.box')

      console.log(box.innerHTML);
    </script>
  </body>

2.outerHTML属性

会返回自身及后代HTML的字符串

可以使用 outerHTML创建当前元素的外部HTML

和createElement + appendChild 效果相同

3.insertAdjacentHTML()和insertAdjacentText()

插入标签

接收两个参数:要插入标记的位置要插入的HTML/Text

第一个参数必须是以下值之一:

beforebegin 当前元素前面,作为同胞节点

afterbegin 当前元素后面,作为子节点

beforeend 当前元素内部,作为之后一个子节点

afterend 当前元素后面,作为下一个同胞节点

4.内存与性能

插入大量新HTML时使用innerHTML比操作DOM便捷

提高innerHTML的效率

      let itemsHTML = ""
      for(let value of values){
        itemsHTML+=`<li>${value}</li>`
      }
      ul.innerHTML = itemsHTML

5.跨站点脚本

如果要使用用户提供的信息,则不建议使用innerHTML,可能遭受到XSS攻击

15.3.7 scrollIntoView()

可以滚动浏览器窗口或容器元素以便包含元素进入视口

参数如下:

alignToTop:

true 滚动后顶部与视口顶部平齐

false 滚动后底部与视口底部平齐

scrollIntoViewOptions

behavior: 过渡动画

block: 垂直方向的对齐

inline: 水平方向的对齐

15.4 专有拓展

只被某些浏览器采用

15.4.1 children属性

children属性只包含Element类型的子节点,不包含空白文本节点

15.4.2 contains()方法

确定一个元素是不是另一个元素的后代

15.4.3 插入标记

H5把 innerHTML 和 outerHTML 纳入了标准

innerText 和 outerText 没有入选

1.innerText()

读取时会删除所有节点属性,只返回其中的文本节点

使用.innerText()设置时,会先删除所有当前元素的子节点,再把内容设置进去

2.outerText()

读取时,会和innerText()返回相同的内容

写入时,outerText()会替换整个元素