[做題記錄]線段樹
阿新 • • 發佈：2021-12-10
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
相比於老式的選擇方法來說，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>" // 但追加設計序列化、解析，所以效率不高
純文字內容
若想獲得純文字內容，可使用textContentlet 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無需引數