Java教程

JavaScript document对象属性方法整理

本文主要是介绍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() //追加一个节点到当前元素里面指定的子元素的前面

四、删除节点

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) //删除元素属性

这篇关于JavaScript document对象属性方法整理的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!