JavaScript中的document对象属性方法整理

document文档对象

方法：

一、获取元素（element也可以用）

1.document.getElementById() //通过id获取标签

2.document.getElementsByClassName() //通过类名获取(伪数组 所有伪数组都具备下标和length 可以用for循环进行遍历)

3.document.getElementsByTagName() //通过标签名获取(伪数组)
   Element.getElementsByTagName() //获取当前元素的子元素

4.document.getElementsByName() //通过name属性值获取(伪数组)
5.document.querySelectorAll() //通过选择器获取所有元素
　document.querySelectorAll(#box>img) //获取id为box的元素下面的所有img子元素

6.document.querySelector() //通过选择器获取第一个

7.document.getRootNode() //获取根节点 相当于整个页面

二、创建节点的方法

1.document.createElement('p') //创建元素 传入对应的标签名

2.document.createAttribute('') //创建属性节点（是一个对象） 默认是一个空值
    赋值：var attr = document.createAttribute('password')
　　　    attr.value='123456'

3.document.createTextNode('') //创建文本节点

后面带NS的表示命名空间内获取或声明

属性：

1.document.head //获取head标签
2.document.body //获取body 标签
3.document.forms //获取form标签 返回HTMLCollection
4.document.rootElement //获取根元素（svg里运用较多）
5.document.parentElement //body

Element元素对象

一、获取节点（只读）

1.Element.childElementCount //子元素个数

2.Element.children //获取所有子元素

3.Element.previousElementSibling //获取前一个兄弟元素

4.Element.previousSibling //获取前一个兄弟节点（换行空格也算）

5.Element.nextElementSibling //获取后一个兄弟元素

6.Element.nextSibling //获取后一个兄弟节点（换行空格也算）

7.Element.firstChild //获取第一个子节点

8.Element.lastChild //获取最后一个子节点

9.Element.parentNode //获取父节点

10.Element.childNodes //获取所有子节点（返回NodeList）

二、替换节点

1.Element.replaceChildren() //用传入的节点替换当前元素所有子节点
2.Element.replaceChild(newNode,node) //使用新的节点替换一个指定子节点

三、插入节点

1.Element.append() //追加一个或多个节点当前元素里面的最后
2.Element.appendChild() //追加一个节点到当前元素里面的最后（同一个元素只能追加一次，可以用不同变量定义）
3.Element.insertBefore() //追加一个节点到当前元素里面指定的子元素的前面

 

4.HTMLTableElement.insertRow()方法在给定的 中插入新行 ( <tr>) <table>，并返回对新行的引用。

　　参数index：新行的行索引。如果index等于-1或等于行数，则将该行作为最后一行附加。如果省略，则默认为-1

　　如果一个表有多个<tbody>元素，默认情况下，新行插入到最后一个<tbody>。要将行插入特定的 <tbody>：

　　let specific_tbody = document.getElementById(tbody_id);
　　let row = specific_tbody.insertRow(index)

　　注意： insertRow()将行直接插入到表中。该行不需要像 Document.createElement()用于创建新 <tr>元素的情况那样单独附加。

 

四、删除节点

1.Element.remove() //全部删除 包括自己
2.Element.replaceChildren('') //清空所有子节点
3.Element.removeChild('') //删除指定子节点

五、克隆 （可以克隆所有节点）

Element.cloneNode() //只会克隆自己 不会克隆里面内容
Element.cloneNode(true) //深度克隆 克隆自己包括里面内容

六、所有元素都具备的属性

Element.style //获取/设置元素行内样式
Element.className //获取/设置元素类名
Element.id //获取/设置元素id
Element.title //获取/设置元素title
Element.name //获取/设置name属性
Element.tagName //获取标签名（只读属性）
Element.innerHTML //获取/设置元素内容 识别html标签
Element.innerText //获取/设置元素内容 全部以文本识别

每个元素自带的属性都可以直接通过.访问

区分不同节点的属性(只读)

节点：元素节点 属性节点 文本节点(空格回车也属于文本节点)

Node.nodeType //节点类型（1表示元素 2表示属性 3表示文本）
Node.nodeValue //节点值（元素节点值null 属性节点的节点值即属性值 文本节点 文本内容）
Node.nodeName //节点名 （元素：标签名 属性：属性名 文本：#text）

元素节点的节点名是大写
属性节点节点名小写
文本节点节点名都是#text

元素对象的属性节点操作

Element.attributes //获取标签身上所有属性节点（返回NameNodeMap 具备key value对 可通过下标或key访问 拿到了一个属性节点对象）

Element.attributes //属性返回该元素所有属性节点的一个实时集合。该集合是一个 NamedNodeMap 对象，不是一个数组，所以它没有数组的方法，其包含的属性节点的索引顺序随浏览器不同而不同。更确切地说，attributes 是字符串形式的名/值对，每一对名/值对对应一个属性节点。

Element.getAttributeNode('') //参数：属性名 获取一个属性节点对象

Element.setAttributeNode('') //参数：属性名 设置一个属性节点

Element.removeAttributeNode('') //删除一个属性节点

NameNodeMap的方法：

Element.attributes.getNameItem('') //参数：属性 得到属性值
Element.attributes.setNameItem('') //参数：属性 设置属性值
Element.attributes.removeNameItem('') //参数：属性 删除属性(标签自带的属性也可以删)
Element.attributes.item() //参数：数值 通过下标获取属性对象
属性节点.previousSibling和属性节点.nextSibling 都是null

元素操作属性（可以操作元素身上的所有属性）

Element.getAttribute(name) //获取元素对应属性的属性值
Element.setAttribute(name, value) //给元素设置属性
Element.removeAttribute(name) //删除元素属性