Element 等节点
最后更新于：2022-04-02 03:26:04
[TOC]
## 实例属性
### Element.id 返回id
```
// HTML 代码为
// ...
//
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
```
//
var d = document.getElementById('d');
d.outerHTML
// ''
```
### Element.innerHTML 可设置/返回 改元素下的html
会对文本节点进行转义
```
// HTML代码如下
';
var p = document.querySelector('p'); p.id // "foo" ``` ### Element.accessKey ``` // var btn = document.getElementById('btn'); btn.accessKey // "h" ``` 按下`Alt + h`就能将焦点转移到它上面 ### Element.contentEditable，Element.isContentEditable 使元素可编辑 [看云] 能编辑的原理
<div contentEditable>史蒂夫</div>Hello
Hello
5 > 3
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 代码为 //Hello World
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 " ```