zoukankan      html  css  js  c++  java
  • JavaScript原生的节点操作

    前言:原生是Javascript的基础,还是需要多多重视,时间长都忘记了,现在整理一下。

    获取子节点


    1. children 不是标准的dom属性,但是几乎被所有浏览器支持。不包含文本节点.

    注意:在IE中,children包含注释节点。

    1. childNodes 是标准属性。返回所有子节点。包括文本节点。

    获取第一个子节点


    1.firstChild

    document.getElementById('b_pole').childNodes[0].childNodes[0].firstChild
    

    获取最后一个子节点


    1.lastChild

    document.getElementById('b_pole').childNodes[0].childNodes[0].lastChild
    

    判断是否有子节点


    1.hasChildNodes()

    document.getElementById('b_pole').childNodes[0].childNodes[0].hasChildNodes()
    

    判断节点类型与节点名称


    1.nodeType

    • 1:元素
    • 2:属性
    • 3:文本

    2.nodeName

    document.getElementById('b_pole').childNodes[0].childNodes[0].nodeType //1
    document.getElementById('b_pole').childNodes[0].childNodes[0].nodeName //UL
    

    创建DOM结构


    1.创建元素节点 createElement

    2.创建文本节点 createTextNode

    document.createElement('div')
    document.createTextNode('ok')
    

    插入节点


    1.insertBefore

    2.appendChild

    document.getElementById('b_pole').insertBefore(document.createTextNode('div'),document.getElementById('b_pole').firstChild)
    
    document.getElementById('b_tween').childNodes[0].nextSibling.previousSibling.appendChild(document.createTextNode('ZQZQZQZQZ'))
    

    移除节点


    1.removeChild

    document.getElementById('b_pole').removeChild(document.getElementById('b_pole').childNodes[0])
    

    并返回被删除的节点dom

    获取元素的下一个节点(同胞)


    1.nextSibling

    document.getElementById('b_pole').nextSibling
    

    获取元素的上一个节点(同胞)


    1.previousSibling

    document.getElementById('b_pole').previousSibling
    
  • 相关阅读:
    Spring中的AOP实现思路
    手写IOC-SPRINGPMVC-CONNPOOL
    职责链模式
    判断一个二叉树是不是对称二叉树
    合并区间
    shell命令中用source 和sh(或者bash)执行脚本的区别,以及export的作用
    angular指令的compile,prelink 和 postlink以及controller
    angular的启动原理
    高并发优化方法
    搭建ssm框架的一个小坑
  • 原文地址:https://www.cnblogs.com/zqzjs/p/6290762.html
Copyright © 2011-2022 走看看