属性节点
属性本身就是一个对象(Attr对象),但是实际上我们都是操作的Element对象来进行操作属性。(可读可写)
Element.id
Element.src=""
如果某个属性是标准属性,我们可以直接用这个属性
Element.attibutes返回一个伪数组,包含了当前元素所有的属性名。
console.log(img.attributes) //返回img的所有属性名,是个伪数组
console.log(img.attributes["a"]) //返回img的属性名和属性值
Element.getAttribute()
获取某个属性zhi。没有则返回null 标准和不标准的属性名都行
Element.setAttribute()
用于添加或者修改属性。传两个值。要更改的属性值总是字符串,如果不是字符串,则会转化为字符串。
有就更改,没有就添加
Element.removeAttribute()
用来移除指定的属性。
Element.getAttributeNames()
获取所有属性名。返回一个数组。没有则返回空数组。
与Element.attributes区别,Element.attributes返回伪数组。
Element.hasAttribute()
用来检测某个属性是否存在。返回一个布尔值。
Element.hasAttributes()
用来检测当前元素是否有属性。返回一个布尔值。
文本节点
文本节点(Text)代表元素节点(Element)和属性节点(Attribute)的文本内容。
data(数据的意思)
data属性与textValue一样,用来设置或读取文本节点内容。
wholeText
wholeText属性将当前文本节点与相邻的文本节点,作为一个整体返回。
大多数情况下,wholeText属性的返回值,与data属性和textContent属性相同。
length 返回当前文本节点的长度。(跟字符串规矩一样)
文本节点的方法
appendData():在Text节点尾部追加字符串
向当前文本节点后面添加一个文本节点(字符串)
deleteData():删除Text节点内部的子字符串,
第一个参数为子字符串开始位置,第二个参数为子字符串长度
insertData():在Text节点插入字符串,
第一个参数为插入位置,第二个参数为插入的子字符串。
在下标前面插入
replaceData():用于替换文本,第一个参数为替换开始位置,
第二个参数为需要被替换掉的长度,第三个参数为新加入的字符串。
substringData():用于获取子字符串,
第一个参数为子字符串在Text节点中的开始位置,第二个参数为子字符串长度
第一个值为起始下标,第二个值为截取的长度
splitText() 用于将文本节点一分为二。它的参数就是分割位置(从零开始)
,分割到该位置的字符前结束。如果分割位置不存在,将报错。
normalize() 用于父节点将相邻的两个文本节点合并
remove() 用于移除文本节点
文档片段节点
DocumentFragment节点代表一个文档的片段,本身就是一个完整的 DOM 树形结构。
它没有父节点,parentNode返回null,但是可以插入任意数量的子节点。它不属于当前文档。
document.createDocumentFragment //创建文本节点