目录
一、获取元素的通常使用方法
1、利用DOM提供的方法获取元素
document.getElementByld()
document.getElementsBtTagName()
document.querySeletor等
逻辑性不强且繁琐
2、利用节点的层次关系来获取元素
利用父子兄弟节点关系获取元素
逻辑性强,但是兼容性稍差
二、节点的概述
网页中的所有内容都是节点(标签、属性、文本、注释等),在DOM中,节点使用node来表示
HTML DOM 树种的所有节点均可通过JavaScript进行访问,所有HTML元素(节点)均可被修改
也可以创建和删除。 一般情况下,节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeVaule(节点值)这三个基本属性
元素节点 nodeTpye 为 1
属性节点 nodeTpye 为 2
文本节点 nodeType 为 3 (文本节点包含文字、空格、换行等)
在我们实际开发中,节点操作主要操作的是元素节点
三、节点的类型
利用DOM 树可以把节点划分为不同的层级关系,常见的是父子兄层级关系
1、获取父级节点:node.parentNode
//获取erweima的父元素
var erweima = document.querySelector('.erweima')
console.log(erweima.parentNode);
注意:
得到是离元素最近的父级节点(类似于它的亲爸爸) 如果找不到父节点就返回为null
2、获取子级节点:
方法一:parentNode.childNodes(标准)
返回包含指定节点的子节点的集合,该集合为即时更新的集合,childNodes 所有子节点 包含 元素节点 文本节点等等
如果只想要获得里面的元素节点,则需要专门处理。所以我们一般不提倡使用childNodes
代码展示:
var ul = document.querySelector('ul')
for(var i = 0; i < ul.childNodes.length; i++){
if(ul.childNodes[i].nodeType == 1){
// ul.childNodes[i]是元素节点
console.log(ul.childNodes[i]);
}
}
结果展示:
方法二:parsentNode.childern(非标准)
获取所有的子元素节点 实际开发常用。
parsentNode.childern是一个只读属性,返回所以的子元素节点。它只返回子元素节点,其余节点不返回(这个是我们重点掌握的)。虽然children是一个非标准,但是得到了各个浏览器的支持,因此我们可以放心使用。
3、获取第一个元素和最后一个元素
方法一:
parentNode.firstChild
返回parentNode第一个子节点,找不到则返回null。同样,也是包含所有的节点
parentNode.lastChild
返回parentNode最后一个节点,找不到则返回null。同样,也是包含所有的节点
方法二:
parentNode.firstElementChild 返回parentNode第一个子节点
parentNode.lastElementChild 返回parentNode最后一个节点
方法三:
parentNode.chilren[0] 返回parentNode的第一个元素节点
parentNode.children[parentNode.children.length-1] 返回parentNode的最后一个元素节点
这是我们在实际开发中所用的写法,它既没有兼容性问题又返回第一个子元素或者最后一个元素
4、获取兄弟节点
方法一:
node.nextSibling
返回当前元素的下一个兄弟节点,找不到则返回null。同样,也是包含所有的节点
node.prevIoUsSibling
返回当前元素的上一个兄弟节点,找不到则返回null。同样,也是包含所有的节点
方法二:
node.nextElementSibling 返回当前元素的下一个兄弟元素节点,找不到则返回null。
代码展示:
//获取element的下一个兄弟元素节点的函数
function getNextElementSibliing(element) {
var el = element;
while (el = el.nextSibling) {
if(el.nodeType === 1) {
return el;
}
}
return null;
}
//获取element的上一个兄弟元素节点的函数
function getprevIoUsElementSibling(element){
var el = element;
while(el=el.prevIoUsSibling){
if(el.nodeType===1){
return el;
}
}
return null;
}
</script>
四、创建和添加节点
1、创建节点
document.createElement('tagName') 创建tagName为元素节点的名字
document.createElement()方法创建由tagName 指定的HTML元素。因为这次元素原先不存在,是根据我们的需求动态生成的,所以我们也称为动态创建元素节点。
2、添加节点:
(1)创建元素
(2)添加元素
node.appendChild(child) 将一个节点添加到指定父节点node的子节点列表的末尾
node 父级 child 子级 后面追加元素 类似于数组中的push
//在ul里面添加一个li元素
var ul = document.querySelector('ul')
ul.appendChild(li);
(3)添加指定节点
var lili = document.createElement('li')
ul.insertBefore(lili,ul.children[0])
3、删除节点
node.removeChild(child)
在父节点node中删除子节点child,并返回删除的节点
如:ul.removeChild(ul.children[0]);
删除ul中的第一个元素节点
注意:removeChild只能删除指定的一个节点
4、复制节点(克隆节点)
node.cloneNode()
node.cloneNode()方法返回调用函数的节点的第一个副本。也称为克隆节点/拷贝节点
注意:
1、如果括号参数为空或者false,则是浅拷贝,即只克隆赋值节点本身,不克隆里面的子节点
2、 node.cloneNode(false) 括号参数为空或者false,则是浅拷贝,即只复制标签,不复制里面的内容
—— 听闻少年二字,应与平庸相斥
原文地址:https://www.jb51.cc/wenti/3288688.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。