ThinkSSL🔒 一键申购 5分钟快速签发 30天无理由退款 购买更放心 广告
[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">&lt;<span class="hljs-name">div </span> <span class="hljs-attr">contentEditable</span></span></code>&gt;<span style="font-size: 1em; font-weight: 400; color: "red"; font-family: Consolas, &quot;Courier New&quot;, Courier, FreeMono, monospace;">史蒂夫</span><span class="hljs-tag" style="font-size: 1em; font-weight: 400; font-family: Consolas, &quot;Courier New&quot;, Courier, FreeMono, monospace;">&lt;/<span class="hljs-name">div</span>&gt;</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 &gt; 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 " ```