JS 中DOM的基本操作之获取节点和节点属性 |
您所在的位置：网站首页 › js获取name节点 › JS 中DOM的基本操作之获取节点和节点属性 |
|
1.DOM节点
一般来说我们分为三个大类: 元素节点(标签) / 文本节点(标签内的文字) / 属性节点(标签上的属性) 元素节点: 通过 getElementBy... 获取到的都是元素节点 属性节点: 通过 getAttribute 获取到的都是属性节点 文本节点: 通过 innerText 获取到的就是元素的文本节点 2.获取子节点先书写结构,供下面获取 你好 测试文本 JS是世界上最好的语言 2.1 获取某一节点下 所有的 子一级节点, 获取到的是一个伪数组 语法: 元素.childNodes //0.获取元素 var div = document.querySelector('div') //1.childNotes console.log(div.childNodes) /** * 拿到的是一个伪数组,里面有7个节点 * [0]: text 从一直到中间有一个换行和一堆空格 ,这是一个文本节点 * [1]: p 这个就是 p 标签,他是第二个节点,这是一个元素节点 * [2]: text 从 一直到 中间有一个换行和一堆空格 ,这是一个文本节点 * ... */ 2.2 获取某一节点下 所有的 子一级元素节点, 获取到的是一个伪数组 语法: 元素.children //2. children console.log(div.children) // 这里只有 div 内部的标签 2.3 获取某一节点下子一级的 第一个节点 语法: 元素.firstChild //3. firstChild console.log(div.firstChild) // #text 2.4 获取某一节点下子一级的 最后一个节点 语法: 元素.lastChild //4. lastChild console.log(div.lastChild) // #text 2.5 获取某一节点下子一级的 第一个元素节点 语法: 元素.firstElementChild //5. firstElementChild console.log(div.firstElementChild) 2.6获取某一节点下子一级的 最后一个元素节点 语法: 元素.lastElementChild //6. lastElementChild console.log(div.lastElementChild) 3.获取兄弟节点先书写结构,供下面获取 你好 测试文本 JS是世界上最好的语言 3.1 获取对应的 下一个兄弟节点 语法:元素.nextSibling 3.2 获取对应的 上一个兄弟节点 语法:元素.previousSibling 3.3 获取对应的 下一个兄弟元素节点 语法:元素.nextElementSibling 3.4 获取对应的 上一个兄弟元素节点 语法:元素.previousElementSibling //0. 获取元素 var span = document.querySelector('span') //1. nextSibling // console.log(span.nextSibling) // #text //2. previousSibling // console.log(span.previousSibling) // #text //3. nextElementSibling console.log(span.nextElementSibling) // h1标签 //4.previousElementSibling console.log(span.previousElementSibling) // p 4.获取父节点与属性节点这里先书写结构,供下面获取: 你好 测试文本 JS是世界上最好的语言 4.1 获取父节点 语法: 元素.parentNode 4.2 获取元素的所有属性节点 语法: 元素.attributes //0.获取节点 var h1 = document.querySelector('h1') //1.获取父节点 console.log(h1.parentNode) //2. attributes console.log(h1.attributes) 5. 节点属性 宣传部会计 //0.获取元素 var ul = document.querySelector('ul') //1. 元素节点 var sleNode = ul.firstElementChild //2. 属性节点 var attrNode = ul.attributes[0] //3.文本节点 var textNode = ul.firstChild 5.1 nodeType 节点类型 节点中的一个属性 nodeType 能够区分当前节点是什么类型 1 -> 元素节点 2 -> 属性节点 3 -> 文本节点 //1. nodeType console.log('元素节点',sleNode.nodeType) console.log('属性节点',attrNode.nodeType) console.log('文本节点',textNode.nodeType) 5.2 nodeName 节点名称 元素节点 -> 大写的边签名 (LI/UL/DIV) 属性节点 -> text (属性名) 文本节点 -> #text //2. nodeName console.log('元素节点',sleNode.nodeName) console.log('属性节点',attrNode.nodeName) console.log('文本节点',textNode.nodeName) 5.3 nodeValue 节点的值 元素节点 -> 没有 nodeValue 也就是会输出 null 属性节点 -> 对应的属性值 文本节点 -> 对应的文本内容 //3. nodeValue console.log('元素节点',sleNode.nodeValue) console.log('属性节点',attrNode.nodeValue) console.log('文本节点',textNode.nodeValue) |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |