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标签 返回HTMLCollection4.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() //追加一个节点到当前元素里面指定的子元素的前面

四、删除节点

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

五、克隆 (可以克隆所有节点)

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

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

Element.style //获取/设置元素行内样式Element.className //获取/设置元素类名Element.id //获取/设置元素idElement.title //获取/设置元素titleElement.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) //删除元素属性

————————

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标签 返回HTMLCollection4.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() //追加一个节点到当前元素里面指定的子元素的前面

四、删除节点

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

五、克隆 (可以克隆所有节点)

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

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

Element.style //获取/设置元素行内样式Element.className //获取/设置元素类名Element.id //获取/设置元素idElement.title //获取/设置元素titleElement.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) //删除元素属性