Element 等節點 · PHP/Python/前端/Linux 等等學習筆記

[TOC] ## 實例屬性 ### Element.id 返回id ``` // HTML 代碼為 <p id="foo"> var p = document.querySelector('p'); p.id // "foo" ``` ### Element.accessKey ``` // <button accesskey="h" id="btn">點擊</button> var btn = document.getElementById('btn'); btn.accessKey // "h" ``` 按下`Alt + h`就能將焦點轉移到它上面 ### Element.contentEditable，Element.isContentEditable 使元素可編輯 [看云] 能編輯的原理 <pre class="hljs" contenteditable=""><code><span class="hljs-tag"><<span class="hljs-name">div </span> <span class="hljs-attr">contentEditable</span></span></code>><span style="font-size: 1em; font-weight: 400; color: "red"; font-family: Consolas, "Courier New", Courier, FreeMono, monospace;">史蒂夫</span><span class="hljs-tag" style="font-size: 1em; font-weight: 400; font-family: Consolas, "Courier New", Courier, FreeMono, monospace;"></<span class="hljs-name">div</span>></span></pre> 此可編輯 ### Element.attributes 元素的數組 ### Element.className，Element.classList ``` // HTML 代碼 <div class="one two three" id="myDiv"></div> var div = document.getElementById('myDiv'); div.className // "one two three" div.classList // { // 0: "one" // 1: "two" // 2: "three" // length: 3 // } ``` `classList`對象有下列方法。 * `add()`：增加一個 class。 * `remove()`：移除一個 class。 * `contains()`：檢查當前元素是否包含某個 class。 * `toggle()`：將某個 class 移入或移出當前元素。 * `item()`：返回指定索引位置的 class。 * `toString()`：將 class 的列表轉為字符串。 ### Element.dataset 讀取 ``` // <article // id="foo" // data-columns="3" // data-index-number="12314" // data-parent="cars"> // ... // </article> var article = document.getElementById('foo'); article.dataset.columns // "3" article.dataset.indexNumber // "12314" article.dataset.parent // "cars" ``` data 規則 data-abc-def`對應`dataset.abcDef`，`data-abc-1`對應`dataset["abc-1"]`。 ### Element.outerHTML 返回包括本身的html ``` // <div id="d"><p>Hello</p></div> var d = document.getElementById('d'); d.outerHTML // '<div id="d"><p>Hello</p></div>' ``` ### Element.innerHTML 可設置/返回該元素下的html 會對文本節點進行轉義 ``` // HTML代碼如下 <p id="para"> 5 > 3 </p> document.getElementById('para').innerHTML // 5 > 3 ``` ### Element.textContent 不對文本進行轉義 ``` document.getElementById('para').textContent // 5 > 3 ```` ### Element.clientHeight / clientWidth 返回整數 css的高度/寬度,如果沒有設置,則返回實際高度,包括padding,減去滾動條 ``` // 視口高度 document.documentElement.clientHeight // 網頁總高度 document.body.clientHeight ``` ### Element.clientLeft / clientTop 左邊框（left border）的寬度（單位像素），不包括左側的`padding`和`margin`。如果沒有設置左邊框，或者是行內元素（`display: inline`），該屬性返回`0`。該屬性總是返回整數值，如果是小數，會四舍五入 ### Element.scrollHeight / scrollWidth 當前元素總高度屬性只讀 ``` 包括溢出容器、當前不可見的部分。它包括padding，但是不包括border、margin以及水平滾動條的高度（如果有水平滾動條的話），還包括偽元素（::before或::after）的高度 ``` ### Element.children / childElementCount 返回子元素數組/子元素個數 ### Element.firstElementChild / lastElementChild 返回當前元素的第一個/最后一個子元素 ### Element.nextElementSibling / previousElementSibling 返回相鄰元素節點 ## 實例方法 ### 屬性相關方法 * `getAttribute()`：讀取某個屬性的值 `getAttribute('id')` * `getAttributeNames()`：返回當前元素的所有屬性名 * `setAttribute()`：寫入屬性值 `setAttribute('id','demo1')` * `hasAttribute()`：某個屬性是否存在 `hasAttribute('id')` * `hasAttributes()`：當前元素是否有屬性 * `removeAttribute()`：刪除屬性 `removeAttribute('id')` ### 事件相關方法 #### Element.addEventListener()：添加事件的回調函數 #### Element.removeEventListener()：移除事件監聽函數 #### Element.dispatchEvent()：觸發事件 ``` element.addEventListener('click', listener, false); element.removeEventListener('click', listener, false); var event = new Event('click'); element.dispatchEvent(event); ``` ### Element.scrollIntoView() 類似錨點定位參數為比爾值,`true` 與頂部對齊, `false` 與底部對齊 ### Element.getBoundingClientRect() 返回類似盒子模型信息 * `x`：元素左上角相對于視口的橫坐標 * `y`：元素左上角相對于視口的縱坐標 * `height`：元素高度 * `width`：元素寬度 * `left`：元素左上角相對于視口的橫坐標，與`x`屬性相等 * `right`：元素右邊界相對于視口的橫坐標（等于`x + width`） * `top`：元素頂部相對于視口的縱坐標，與`y`屬性相等 * `bottom`：元素底部相對于視口的縱坐標（等于`y + height`） ### Element.remove() ### Element.focus()，Element.blur() ### Element.click() ## 文本節點定義:如果一個節點只包含一段文本，那么它就有一個文本子節點，代表該節點的文本內容就算只有一個空格也算一個文本節點獲取文本節點 `var pElementText = document.querySelector('p').firstChild; ` 由于文本節點也節點,所以需要使用`firstChild`來定位到節點 * `appendData()`：在`Text`節點尾部追加字符串。 * `deleteData()`：刪除`Text`節點內部的子字符串，第一個參數為子字符串開始位置，第二個參數為子字符串長度。 * `insertData()`：在`Text`節點插入字符串，第一個參數為插入位置，第二個參數為插入的子字符串。 * `replaceData()`：用于替換文本，第一個參數為替換開始位置，第二個參數為需要被替換掉的長度，第三個參數為新加入的字符串。 * `subStringData()`：用于獲取子字符串，第一個參數為子字符串在`Text`節點中的開始位置，第二個參數為子字符串長度。 * `remove()` : 刪除文本節點 ``` // HTML 代碼為 // <p>Hello World</p> var pElementText = document.querySelector('p').firstChild; pElementText.appendData('!'); // 頁面顯示 Hello World! pElementText.deleteData(7, 5); // 頁面顯示 Hello W pElementText.insertData(7, 'Hello '); // 頁面顯示 Hello WHello pElementText.replaceData(7, 5, 'World'); // 頁面顯示 Hello WWorld pElementText.substringData(7, 10); // 頁面顯示不變，返回"World " ```