操作DOM

2023-10-03 20:52:46

HTML文档

<body>
    <span>呵呵呵</span>
    <div id="container">
        <span>哈哈哈</span>
        <input type="text">
        <input type="text">
        <input type="text">
        <button id="btn">点我</button>
    </div>
    <img id="image" src="" alt="">
    <form action=""></form>
    <p id="test" class="test1 test2 test3 test4">class</p>
</body>

选择DOM元素

querySelector和querySelectorAll可以使用css选择器选择元素 querySelector返回一个Element元素 querySelectorAll会返回一个NodeList对象，包含所有匹配的元素

let x = document.querySelector("#btn") === document.querySelector("#container>button")
x   // true
let container = document.querySelector("#container")
// 在指定元素上使用时只会返回后代中匹配的元素
let span = container.querySelector("span")
span    // <span>哈哈哈</span>

let inputList = document.querySelectorAll("#container>input")
inputList   // NodeList(3) [input, input, input]
let newList = document.querySelectorAll("span,input,button")
newList     // NodeList(6) [span, span, input, input, input, button#btn]

相比于老式的选择方法来说，NodeList是死的，而HTMLCollection是活的，其length会随着文档结构的变化而变化

let newSpanList = container.querySelectorAll("span")
let oldSpanList = container.getElementsByTagName("span")
newSpanList     // NodeList [span]
oldSpanList     // HTMLCollection [span]
container.append(document.createElement("span"))
newSpanList     // NodeList [span]
oldSpanList     // HTMLCollection(2) [span, span]

文档结构

span.parentNode     // 父元素
span.children       // 子元素的NodeList，不含非Element节点
span.firstElementChild  // 第一个子元素
span.lastElementChild   // 最后一个子元素
span.previousElementSibling     // 左侧同辈元素，没有则为null
span.nextElementSibling     // 右侧同辈元素，没有则为null

对文档进行遍历，并对所有元素执行指定函数

function traverse(e, f){
    f(e)
    for(let child of e.children){   // 迭代所有子元素
        traverse(child, f)
    }
}
function traverse2(e, f){
    f(e)
    let child = e.firstElementChild  // 链表式迭代
    while(child !== null){
        traverse2(child, f)
        child = e.nextElementSibling
    }
}

若想不忽略Text节点甚至Comment节点(注释)，可使用下列方法

span.childNodes // 只读的NodeList对象，包含所有类型的子节点
span.firstChild // 当前节点的第一个子节点
span.lastChild  // 当前节点的最后一个子节点
span.previousSibling    // 前一个同辈节点
span.nextSibling    // 后一个同辈节点
span.nodeType   // 表示节点类型的数值，Document节点为9，Element节点为1，Text为3，Comment为8
span.nodeValue  // Text或Comment节点的文本内容
span.nodeName   // Element节点的HTML标签名(大写)

属性

span.getAttribute()     // 查询
span.setAttribute()     // 设置
span.hasAttribute()     // 检测
span.removeAttribute()  // 删除

let image = document.querySelector("img")
let url = image.src
image.id === "image"    // true

let form = document.querySelector("form")
form.action = "http://www.test.com/submit"
form.method = "POST"
form    // <form action="http://www.test.com/submit" method="POST"></form>

class属性

let p = document.querySelector("#test")
// classList 表示类名的集合，有add() remove() contains() toggle()方法
let classname = p.classList     // DOMTokenList(4) ['test1', 'test2', 'test3', 'test4']
classname.remove("test4")
classname.add("test0")
classname   // DOMTokenList(4) ['test1', 'test2', 'test3', 'test0']

元素内容

innerHTML直接更改内容，效率很高，但加设计序列化、解析，所以效率不高

document.body.innerHTML = "<h1>test</h1>"   // 直接更改内容，效率很高
document.body.innerHTML += "<p>test2</p>"   // 但追加设计序列化、解析，所以效率不高

纯文本内容

若想获得纯文本内容，可使用textContent

let para = document.querySelector("p")
let text = para.textContent     // 'test2'
para.textContent = "hello world"

创建、插入和删除节点

创建节点

let paragraph = document.createElement("P")     // 创建一个空的p元素
let emphasis = document.createElement("em")     // 创建一个空的em元素

在子节点中添加

append()和prepend()接收任意多参数，参数可以是Node节点可以是字符串，append添加到末尾，prepend添加到开头

emphasis.append("World")                        // 向em元素中添加文本
paragraph.append("hello", emphasis, "!")        // 向p中添加文本和em元素
paragraph.prepend("begin ")                      // 在第一个子节点添加文本
paragraph.innerHTML     // 'beginhello<em>World</em>!'

在同级节点添加

before()和after()也接收任意多参数，表示在当前节点前/后添加

para.after(paragraph)
paragraph.before(document.createElement("hr"))

复制

注意，同一个节点只能存在一个，如果将该节点插入到另一个位置，之前的就会消失，而不是复制若想创建副本，可使用cloneNode()，传入true复制全部内容

paragraph.after(paragraph.cloneNode(true))

替换或移除

remove()可以将节点从文档中删除，或使用replaceWith()替换

para.replaceWith(paragraph) // 参数为新节点
paragraph.remove()  // remove无需参数

码农公寓