1.什么是DOM节点
DOM树:
DOM以树状结构出现的(倒立的树),方便开发人员获取,添加,删除和修改页面上的某一部分
DOM节点:
w3c,页面上所有的内容都可以称为节点,DOM的最小单元就是节点
DOM节点的种类:
节点包含一共12种,本节课就认识5种节点
- 1.元素节点: 标签: nodeType 1
- 2.属性节点: 属性: nodeType 2
- 3.文本节点: 文本: nodeType 3
- 4.注释节点: 注释: nodeType 8
- 5.文档节点: 文档: nodeType 9
2.如何获取节点:
通过节点关系(父子关系,兄弟关系)来获取
//获取父元素的第一个节点
父节点.firstChild
//节点的下一个兄弟节点
节点.nextSibling
//节点的上一个兄弟节点
节点.previousSibling
//父节点的最后一个字节点
父节点.lastChild
//节点的父节点
节点.parentNode
//获取所有的子节点(伪数组形式)
父节点.childNodes
3.获取元素节点:
//获取父元素的第一个元素节点
父节点.firstElementChild
//节点的下一个兄弟元素节点
节点.nextElementSibling
//节点的上一个兄弟元素节点
节点.previousElementSibling
//父节点的最后一个子元素节点
父节点.lastElementChild
//节点的父元素节点(兼容性不好,不用它)
节点.parentElement
//获取所有的子元素节点(伪数组形式)
父节点.children
4.节点的操作
创建节点:
语法:document.createElement('标签名')
返回值:创建好的元素节点
//1. 创建的节点
var oBtn = document.createElement('button');
console.log(oBtn);
oBtn.innerText = '我是按钮'
var oBox = document.getElementById('box')
追加节点:
语法:父节点.appendChild(子节点)
含义:将子节点追加到父节点的尾部
例子:document.body.appendChild(子节点)
oBox.appendChild(oBtn);
//把创建好的oBtn添加到oBox中
插入节点:
语法:父节点.insertBefore(子节点,谁的前面的谁)
含义:将子节点插入到父节点的指定位置
例子:oBox.insertBefore(oBtn,oBox.firstChild)
;将button插入到oBox的头部
oBox.insertBefore(oBtn,oBox.children[1])
//父节点.children: 数组,所有的标签
替换节点
语法:父节点.replaceChild(新节点,旧节点(位置))
不常用
含义:在父节点内,将老节点替换成新节点
oBox.replaceChild(oBtn,oBox.children[1])
删除节点:
语法1:父节点.removeChild(子节点)
含义:把子元素从父元素中移除
语法2:节点.remove()
最常用
含义:把子元素从页面中删除
oBox.children[0].remove();
oBox.removeChild(oBox.children[0])
克隆节点
语法:节点.cloneNode(turn/false)
作用:克隆出来一个节点
turn:代表克隆元素本身和元素的子元素以及后台
false:代表克隆元素本身
console.log(oBox.cloneNode(false));
console.log(oBox.cloneNode(true));
节点属性
nodeType
:节点属性nodeName
:节点名称nodeValue
:节点值
5.获取行间样式和非行间样式
var tianIn = document.querySelector('div');
//获取行间样式
tianIn.style.width
window.getComputedStyle(tianIn, null)['width'];
//获取非行间样式
window.getComputedStyle(tianIn, null)['width'];
今天的文章【JavaScript】学习第十二天(DOM节点)分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/86971.html