前端js-----DOM之节点操作

news/2024/7/19 12:55:24 标签: js, javascript, 前端

在节点操作中,可以利用几点层次关系获取元素(父子兄节点关系)。
一般的,节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)三个基本属性。其中元素节点的nodeType为1;属性节点的nodeType为2;文本节点是nodeType为3.
1.父级节点(node.parentNode):得到的是离父级最近父级节点,如果找不到父节点,则返回null。
2.子节点(parentNode.childNodes):返回包含指定节点的子节点的集合(会包含元素节点,文本节点等等),注意是集合。可利用for循环找出节点为1的元素节点。

子节点(parentNode.children):注意!!!它只返回所有子元素节点(只是元素)。
parentNode.firstChild(获取第一个子节点,不管是元素还是文本还是属性)
parentNode.lastChild(获取最后一个子节点,不管是元素还是文本还是属性)
3.兄弟节点
node.nextSibling;(找不到返回null,包含元素节点,文本节点等等)
node.previousSibling;(找不到返回null,包含元素节点,文本节点等等)

以下两个获取兄弟元素节点(有兼容性)
node.nextElementSibling;
node.previousElementSibling;

javascript">//解决兼容性问题
function getNextElementSibling(element){
while(element=element.nextSibling){
if(element.nodeType === 1){
return element;
}
}
return null;
}

http://www.niftyadmin.cn/n/1143464.html

相关文章

前端js-----DOM之节点操作(增删改)

1.创建节点:document.createElement(‘tagName’); 2.添加节点:node.appendChild(child);将一个节点添加到指定父节点的子节点列表末尾,其中node为父元素。 node.insertBefore(child,指定元素);将一个节点添加到父节点的指定子节…

前端js-----DOM事件高级

事件高级: 注册事件有两种方式,第一个是传统方式;第二个是方法监听注册的方式。 addEventListener(); 特点为:同一个元素同一个事件可以注册多个监听器。其参数有三个,第一个参数为type:事件类型字符串&am…

前端js-----DOM事件高级(阻止默认行为事件冒泡)

有时候我们不需要一些默认行为,这时我们需要阻止默认行为:代码如下 a.onclick function(e){ //e.preventDefault();//适用普通浏览器 //e.returnValue;//ie 6 , 7, 8 return false;//无兼容,(仅限于传统注册方式,但r…

前端js-----动态生成表格(节点操作)

针对DOM节点操作&#xff0c;该案例效果图如下&#xff08;代码量不多&#xff0c;就没有结构与行为相分离&#xff09;&#xff1a; 原生js实现&#xff08;注释里面解释了做法&#xff09;&#xff1a; <!DOCTYPE html> <html><head><meta charset&quo…

前端js-----购物车加减事件(全选和全不选)

原生js&#xff08;效果图如下&#xff09;&#xff1a; 代码&#xff08;html、css、js没有分离&#xff09;&#xff1a; <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title><style type"text/css&q…

前端js-----手风琴(jQuery)

运用jQuery效果&#xff08;功能如下&#xff09;&#xff1a; 代码&#xff08;链式编程&#xff09;&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content&quo…

前端js-----购物车全功能(jQuery)

效果图&#xff1a; HTML&&CSS&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title&g…

快速幂与64位整数乘法(位运算)

矩阵快速幂和64位整数乘法 矩阵快速幂64位整数乘法 矩阵快速幂 问题链接&#xff1a; AcWing 90. 64位整数乘法 问题描述&#xff1a; 分析 快速幂需要用到位运算的思想&#xff0c;求 a b a^b ab&#xff0c;我们将 b b b转换成二进制的形式&#xff0c;假设 b 7 b7 b7&…