（六）DOM 扩展 笔记中转
发布于 4 年前 作者 xiuying58 940 次浏览 来自 分享

DOM扩展

1 选择符API

1.1 querySelector()

接受一个CSS选择符
只返回一个

<div>div</div>
<div class="class">class</div>
<div id="id">id</div>
<div>div</div>
<p class="title">title</p>
<p class="name">name</p>

let id = document.querySelector("#id")
let clazz = document.querySelector(".class")
console.log(id , clazz)
let name = document.querySelector("p.name")
console.log(name)

1.2 querySelectorAll()

与querySelector一样，但返回的是一个NodeList

2 元素遍历

会跳过文本 注释节点

<div id="id">id</div>

console.log(id.childElementCount)
console.log(id.firstElementChild)
console.log(id.lastElementChild)
console.log(id.previousElementSibling)
console.log(id.nextElementSibling)

3. HTML5

3.1 与类相关的扩充

  1. getElementsByClassName
    可以传一个或多个类名
<p class="name title">name title</p>

// 返回的是 name title 这个 p
let cl = document.getElementsByClassName("title name")
  1. classList
    classList属性用来操作类名，classList是DOMTokenList的实例
    这个属性有以下方法
    add() // 将字符串添加到列表中，如果字符已存在，就不添加
    contains() // 表示列表中是否存在给定的值 存在返回true 不存在返回false
    remove() // 列表中删除给定的字符串
    toggle() // 列表中已存在给定的值，就删除它 ， 不存在，就添加它
<style>
    .red{
        color: red;
    }
    .green{
        color: green;
    }
</style>
<p>这是文字</p>

let p = document.getElementsByTagName("p").item(0)
p.classList.add("red")
console.log(p.classList.contains("red")) // 判断是否包含red
setTimeout(()=>{
    p.classList.remove("red") // 移除red
    p.classList.toggle("green") // 切换green
} , 500)

3.2 焦点管理

  1. activeElement
<input id="name" type="text" placeholder="name">
<br>
<input id="title" type="text" placeholder="title">

let name = document.querySelector("#name")
name.focus()  // 代码操作焦点 使焦点在name input里
let f = document.activeElement; // 始终引用当前页面获得焦点的元素
console.log(f)
  1. hasFocus()
    判断文档 即document 是否获得焦点
console.log(document.hasFocus())

3.3 HTMLDocument的变化

  1. readyState属性
    Document的readyState属性有两个值
    loading ， 正在加载文档
    complete ， 已经加载完毕
window.onload = function(){
    console.log(document.readyState)
    if(document.readyState == 'complete'){
        // do something
    }
}
  1. 兼容模式
    判断页面的渲染模式
    document.compatMode

标准模式 CSS1Compat
混杂模式 BackCompat

  1. head属性

可以通过 document.head 引用文档的head元素

当然，可能有部分浏览器不支持直接获取，只能用
document.getElementsByTagName("head)[0]

3.4 字符集属性

document.charset

console.log(document.charset) // UTF-8

3.5 自定义数据属性

自定义属性需要以 data- 开头
添加自定义属性后，可以通过 dataset 访问
dataset得值是DOMStringMap的一个实例，也就是一个 名值对 的映射。
如果自定义的属性是 data-myname 那么映射里的属性名就是 myname

<div id="data" data-myname='wu' ></div>
let data = document.getElementById("data")
console.log(data.dataset) // DOMStringMap  { myname: 'wu'}

3.6 插入标记

  1. innerHTML
  2. outerHTML
<div id="father">
    <div id="son"></div>
    <div id="brother"></div>
</div>
let son = document.querySelector("#son")
let o = son.outerHTML;
console.log(o)    //    返回的是 id为son 的div
  1. insertAdjacentHTML()
    接受两个参数 插入的参数和插入的HTML文本
    第一个参数是
    ‘beforebegin’ 在当前元素开始标签之前插入一个紧邻的同辈元素
    ‘afterbegin’ 在当前元素开始标签之后
    ‘beforeend’ 在当前元素结束标签之前
    ‘afterend’ 在当前元素结束标签之后
<div id="father">
    <!-- beforebegin -->
    <div id="son">
        <!-- afterbegin -->
        son
        <!-- beforeend -->
    </div>
    <!-- afterend -->
    <div id="brother"></div>
</div>

let son = document.getElementById("son");
let ele = document.createElement("DIV");
ele.innerHTML = 'ddd'
son.insertAdjacentElement("beforebegin" , ele)
son.insertAdjacentElement('afterbegin' , ele)
son.insertAdjacentElement('beforeend' , ele)
son.insertAdjacentElement('afterend' , ele)
  1. 内存与性能问题

3.7 scrollIntoView方法

let d = document.getElementById("10");
// 传入 true 或不传 元素会在窗口顶部，传入false元素会在中间
d.scrollIntoView()

4. 专有扩展

待续。。。

回到顶部