节点操作

2021年6月25日 2点热度 0条评论 来源: 青栲

节点操作

利用节点层级关系获取元素

  • 利用父子兄节点关系获取元素
  • 逻辑性强,但兼容性差

一般地,节点至少拥有node Type(节点类型)、nodeName(节点名称)和nodeValue(节点值)三个基本属性

  • 元素节点 nodeType 为1
  • 属性节点 nodeType 为2
  • 文本节点 nodeType 为3(文本节点包含文字、空格、换行等)
  • 主要操作元素节点

节点层级

  1. 父节点: .parentNode
  2. 子节点:parentNode.childNodes(标准)
    1)parentNode,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]);
	}
}

2)parentNode.children(非标准)
parentNode.children 是一个只读属性,返回所有的子元素节点。他只返回子元素节点,其余节点不返回
虽然children是一个非标准,但是得到了各个浏览器的支持,因此我们可以放心使用
3) parentNode.firstChild
firstChild 返回第一个子节点,找不到则返回null。同样,也是包含所有的节点。
4)parentNode.lastChild
lastChild 返回最后一个子节点
5)parentNode.firstElementChild
.firstElementChild 返回第一个子元素节点,找不到则返回null
6)parentNode.lastElementChild
.lastElementChild 返回最后一个子元素节点,找不到则返回null
注意:这两个方法有兼容性问题, IE9以上才支持
7)解决兼容性问题的方案:
如果想要第一个子元素节点,可以使用parentNode.children[0]
如果想要最后一个子元素节点,可以使用parentNode.children[parentNode.children.length - 1]
3. 兄弟节点

  1. node.nextSibling
    nextSibling 返回当前元素的下一个兄弟节点,找不到则返回null。同样,也是包含所有的节点
  2. node.previousSibling
    previousSibling 返回当前元素的上一个兄弟节点,找不到则返回Null,包含所有节点
  3. node.nextElementSibling
    nextElementSibling 返回当前元素下一个兄弟元素节点,找不到则返回null
  4. node.previousElementSibling
    previousElementSibling 返回当前元素上一个兄弟元素节点,找不到则返回null
    以上两个方法有兼容性问题

新浪下拉菜单案例

案例分析

  1. 导航栏里面的 li 都要有鼠标经过效果,所以需要循环注册鼠标事件
  2. 核心原理:当鼠标经过 li 里面的第二个孩子ul显示,当鼠标离开则 ul 隐藏
    原文作者:青栲
    原文地址: https://blog.csdn.net/qingkao123/article/details/103140627
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。