节点

最新推荐文章于 2024-10-02 05:39:15 发布

前端小小白，真的白

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量81

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_48190576/article/details/123290483

版权

节点

获取节点

第一类：获取元素节点

获取非常规元素节点

html: document.documentElement

head: document .head

body: document.body

获取常规元素节点

document.getElmentById( )

document.getElementsByClassName( )

document.getElementsByTagName( )

document.querySelector( )

document.querySelectorAll( )

第二类：获取节点（包括但不限于元素节点）

注意：全都是属性，没有办法

1.childNodes

语法：父节点.childNodes

得到：该父节点下的所有子一级节点

2. children

语法：父节点.children

得到：该父节点下的所有子一级元素节点

3.firstChild

语法：父节点.firstChild

得到：该父节点下的第一个子节点

4.firstElementChild

语法：父节点.firstElementChild

得到：该父元素下的第一个子元素节点

5.lastChild

语法：父节点.lastChild

得到：该父元素下的最后一个子节点

6.lastElementChild

语法：父节点.lastElementChild

得到：该父元素下的最后一个子元素节点

7.previousSibling

语法：节点.previousSibling

得到：该节点的上一个兄弟节点（上一个哥哥节点）

8.previousElementSibling

语法：节点.previousElementSibling

得到：该节点的上一个兄弟元素节点（上一个哥哥元素节点）

9.nextSibling

语法：节点.nextSibling

得到：该节点的下一个兄弟节点（下一个弟弟节点）

10.nextElementSibling

语法: 节点.nextElementSibling

得到：该节点的下一个兄弟元素节点（下一个弟弟元素）

11.parentNode

语法：节点.parentNode

得到：该节点的父节点

12.parentElement

语法：节点.parentElement

得到：该节点的父元素节点

13.attributes

语法：节点.attributes

得到：该节点的所有属性节点

节点属性

属性节点：若干分类中的一种

节点属性：指描述节点的信息

常见的节点属性有三种

1.nodeType

用一个数字来区分不同的节点，给每一类节点做了一个编号

元素节点：1

属性节点：2

文本节点：3

注释节点：8

console.log('nodeType')
        console.log('元素节点 ：'，ele.nodeType)
        console.log('属性节点 ：'。attr.nodeType)
        console.log('文本节点 ：'，text.nodeType)
        console.log('注释节点 ：'，comment.nodeType)

2.nodeName

元素节点：大写标签名

属性节点：属性名

文本节点：#text

注释节点：#comment

   console.log('nodeName')
        console.log('元素节点 ：'，ele.nodeName)
        console.log('属性节点 ：'，attr.nodeName)
        console.log('文本节点 ：'，text.nodeName)
        console.log('注释节点 ：'，comment.nodeName)

3.nodeValue

元素节点：null

属性节点：属性值

文本节点：文本内容（包含换行和空格）

注释节点：注释内容（包括换行和空格）

 console.log('nodeValue')
        console.log('元素节点 ：'，ele.nodeValue)
        console.log('属性节点 ：'，attr.nodeValue)    
        console.log('文本节点 ：'，text.nodeValue) 
        console.log('注释节点 ：'，comment.nodeValue)

获取各种节点

1.获取元素节点

var ele = document.querySelector(‘div’)

console.log(ele)

2.获取属性节点

var attr =ele.attributes[0]

console.log(attr)

3.获取文本节点

var text = ele.childNodes[2]

console.log(text)

4.获取注释节点

var comment = ele.childNodes[1]

console.log(comment)

创建节点

指用 js 创建出一个节点，但是没有插入到页面中

创建元素节点

语法：document.createElement(‘标签名’)

返回值：一个被创建出来的标签

注意：你可以自定义标签名

var createEle = document.creeteElement
        console.log(createEle)

创建文本节点

语法：document.createTextNode(‘文本内容’)

返回值：一个文本节点

var createText = document.createTextNode('我是一个文本节点')
        console.log(createText)

插入节点

指把一个节点放在另一个节点内当作子节点使用

1.appendChild( )

语法：父节点.appendChild(子节点)

作用：把子节点插入到父节点内部，并且排列在

最后一个位置

creDiv.appendChild(creSpan)
        creSpan.appendChild(creText)

2.insertBefore（）

语法：父节点.insertBefore(要插入的节点，谁的前面)

代码：

需求：把 creDiv 插入到 pageDiv 内部并且排列在 p 的前面

  pageDiv.insertBefore(cre.Div, pageP)
        pageDiv.appendChild(creDiv)

 获取元素
        var pageDiv = document.querySelector（‘div’）
        var pageP   = document.qureySelector('p')        
      
    创建几个节点
        var cieDiv = document.createElement('div')
        var creSpan = document.createElement('dd')
        var creText = document.createTextNode('我是文本节点')