zoukankan      html  css  js  c++  java
  • Node节点

    1、Node:节点
    元素节点->HTML标签
    文本节点->文字 但是在标准浏览器(除了IE6~8)中会把空格和换行都当做文本节点来处理
    注释节点->注释
    document

    2、节点的特征
    元素节点:
    nodeType->1 nodeName->大写的标签名 nodeValue->null
    文本节点:
    nodeType->3 nodeName->#text nodeValue->文本内容
    注释节点:
    nodeType->8 nodeName->#comment nodeValue->注释内容

    document:
    nodeType->9 nodeName->#document nodeValue->null


    3、节点之间关系的属性
    childNodes:获取所有的子节点(既有元素的,也有文本和注释的)
    children:获取所有的元素子节点 ->在IE6~8下我们获取的结果不完全准

    parentNode:获取父亲节点
    previousSibling:获取上一个哥哥节点(可能是元素也可能文本或者注释)
    previousElementSibling:获取上一个元素哥哥节点(肯定是元素节点) ->在IE6~8下不兼容
    nextSibling:获取下一个弟弟节点
    nextElementSibling:获取下一个元素弟弟节点 ->在IE6~8下不兼容
    firstChild:获取所有子节点中的第一个(不一定是元素)
    firstElementChild:获取所有元素子节点中的第一个(一定是元素节点) ->在IE6~8下不兼容
    lastChild:获取所有子节点中的最后一个(不一定是元素)
    lastElementChild:获取所有元素子节点中的最后一个(一定是元素节点) ->在IE6~8下不兼容

    //获取指定元素下的所有元素子节点

    //思路:先获取所有的子节点,然后我们在把其中的元素子节点(nodeType等于1)单独的获取到

    function queryChildren(curEle) {
    var ary = [];//->先弄个容器用来存储我们需要的元素子节点
    var allNodes = curEle.childNodes;//->获取所有的子节点
    //循环遍历每一个子节点,把元素节点单独的存储到ary这个容器中
    for (var i = 0; i < allNodes.length; i++) {
    var cur = allNodes[i];
    if (cur.nodeType === 1) {
    //ary.push(cur);
    ary[ary.length] = cur;
    }
    }
    return ary;
    }
    //获取上一个元素哥哥节点
    function prev(curEle) {
    //兼容的话直接用,函数体中遇到return就不在执行了
    if (curEle.previousElementSibling) {
    return curEle.previousElementSibling;
    }
    //不兼容我们自己用while循环一级级的查找
    var pre = curEle.previousSibling;
    while (pre && pre.nodeType !== 1) {//->获取的节点存在并且不是元素节点,我们就一直循环向上找
    pre = pre.previousSibling;
    }
    return pre;
    }

     

  • 相关阅读:
    LeetCode 1110. Delete Nodes And Return Forest
    LeetCode 473. Matchsticks to Square
    LeetCode 886. Possible Bipartition
    LeetCode 737. Sentence Similarity II
    LeetCode 734. Sentence Similarity
    LeetCode 491. Increasing Subsequences
    LeetCode 1020. Number of Enclaves
    LeetCode 531. Lonely Pixel I
    LeetCode 1091. Shortest Path in Binary Matrix
    LeetCode 590. N-ary Tree Postorder Traversal
  • 原文地址:https://www.cnblogs.com/supershare/p/6229429.html
Copyright © 2011-2022 走看看