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 " ```