DOM-Element类型、Text类型

Element 对象对应网页的 HTML 元素。每一个 HTML 元素在 DOM 树上都会转化成一个Element节点对 象。

attributes：返回一个与该元素相关的所有属性的集合。

classList：返回该元素包含的 class 属性的集合。

className：获取或设置指定元素的 class 属性的值。

clientHeight：获取元素内部的高度，包含内边距，但不包括水平滚动条、边框和外边距。

clientTop：返回该元素距离它上边界的高度。 clientLeft：返回该元素距离它左边界的宽度。

clientWidth：返回该元素它内部的宽度，包括内边距，但不包括垂直滚动条、边框和外边距。

innerHTML：设置或获取 HTML 语法表示的元素的后代。

tagName：返回当前元素的标签名。 innerText:返回元素的内部文本内容。

常用方法

        

方法	描述
element.innerHTML = new html content	改变元素的 innerHTML
element.attribute = value	修改属性的值
element.getAttribute()	返回元素节点的指定属性值。
element.setAttribute(attribute , value )	设置或改变 HTML 元素的属性值
element.style.property = new style	改变 HTML 元素的样式

element.innerHTML

<div id="div1">我是一个div</div>
 <script>
 var d1 = document.getElementById('div1');
 // 获取
console.log(d1.innerHTML);
 // 设置
d1.innerHTML = '我是新的内容'
 </script>

element.attribute = value 修改已经存在的属性的值

<div id="div1">123</div>
 <script>
 var d1 = document.getElementById('div1');
 // 直接将已经存在的属性进行修改
d1.id = 'div2';
 </script>

element.getAttribute() 返回元素节点的指定属性值。

<div id="div1">我是一个div</div>
 <script>
 var div = document.getElementById('div1');
 console.log(div.getAttribute('id')); // div1
 </script>

element.setAttribute(attribute , value ) 把指定属性设置或更改为指定值。

<div id="div1">我是一个div</div>
 <script>
 var d1 = document.getElementById('div1');
 // 设置div1的class为divCla
 d1.setAttribute('class', 'divCla');
 </script>

element.style.property 设置或返回元素的 style 属性。

<div id="div1">我是一个div</div>
 <script>
 var d1 = document.getElementById('div1');
 // 获取div1的style样式
console.log(d1.style);
 // 设置div1的style
 d1.style.backgroundColor = 'red';
 </script>

Text 节点由 Text 类型表示，包含按字面解释的纯文本，也可能包含转义后的 HTML 字符，但不含 HTML 代码。

属性及方法

length 文本长度

appendData(text) 追加文本

deleteData(beginIndex,count) 删除文本

insertData(beginIndex,text) 插入文本

replaceData(beginIndex,count,text) 替换文本

splitText(beginIndex) 从beginIndex位置将当前文本节点分成两个文本节点

document.createTextNode(text) 创建文本节点，参数为要插入节点中的文本

<div id="container"></div>
 <script>
 // 创建文本节点
var textNode = document.createTextNode('Hello World!');
 // 获取container
 var div = document.getElementById('container');
 // 将文本节点插入container
 div.appendChild(textNode);
 // 替换文本
textNode.replaceData(0,5,'Hi');
 // 插入文本
textNode.insertData(0, 'Hello')
 </script>

substringData(beginIndex,count) 从beginIndex开始提取count个子字符串