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) //删除元素属性
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/tech/webdev/278920.html