JavaScript serialization 28 node relationship demonstration

Time:2020-9-14

1、 Relationship between nodes

  • (1) Get parent node
  • (2) Previous sibling node
  • (3) Next sibling node
  • (4) Gets the first child node in the tag
  • (5) Gets the last child node in the tag
  • (6) Gets the node of the element
  • (7) Gets the node of any sibling
  • Nodes include: label, attribute, text, comment, etc
  • Direct code
#box{
            width:200px;
            height:200px;
            background-color: red;
        }
    



    Button
    
        A link
    
    I'm a paragraph tag
    Ha ha ha


    window.onload = function (ev) {
        var a = document.getElementsByTagName('a')[0];
        console.log (a.parentnode); // get the parent node
        console.log (a.parentelement); // is also used to obtain the parent node, but there are some differences, which will be discussed later
        //Get sibling node
        var span = document.getElementById("span");
        //Next node
        var nextEle =  span.nextSibling ; // spaces and newlines are also used as tags in JS
        var nextEle2 =  span.nextElementSibling  Wei span.nextSibling ; // to make a judgment, the node of the element is taken instead of newlines or spaces
        var preEle = span.previousElementSibling || span.previousSibling;
        console.log(nextEle);
        console.log(nextEle2);
        console.log(preEle);

        console.log("-------------------");

        var box = document.getElementById("box");
        //Get the first child node
        console.log(box.firstElementChild || box.firstChild);
        //Get the last node
        console.log(box.lastElementChild || box.lastChild);
        //Get all nodes
        console.log(box.childNodes);
        //Get all element nodes (that is, nodes with non newline spaces)
        console.log(box.children);
    }

28.1
28.2

2、 Source code:

  • D28_1_GetAPI.html
  • Address:https://github.com/ruigege66/JavaScript/blob/master/DD28_1_GetAPI.html
  • Blog Garden:https://www.cnblogs.com/ruigege0000/
  • CSDN:https://blog.csdn.net/weixin_44630050?t=1
  • Welcome to WeChat official account: Fourier transform, personal account, for technical exchange only.
    911

Recommended Today

Golang naming convention

All naming of function name, variable name, constant name, type name, statement label and package name in go language follow a simple naming rule. It must start with a letter or underscore (), followed by any number of letters, numbers or underscores. In the go language, upper and lower case letters are different. There are […]