Summary of node and relationship properties in DOM

PHP中文网Original: 2017-06-21 13:20:591101browse

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="div1">
        <h1>培训课程</h1>
        <ul>
            <li>html+css</li>
            <li>javascript</li>
            <li>正式课</li>
            <li>移动端课程</li>
            <li>node.js正式课</li>
        </ul>
    </div>
    <script>//获取关系的属性var oDiv = document.getElementById("div1");
        console.log(oDiv.childNodes);//获取所有的子节点console.log(oDiv.children);//获取所有的元素子节点</script>
</body>
</html>

Node: Node labels, text, and comments in a page. . . They are all nodes

childNodes: Get all child nodes

children: Get all element child nodes

parentNode: Get the parent node

##previousSibling: Get the previous brother node

##nextSibling: Get the next brother node

firstChild: Get the first of all child nodes

lastChild: Get the last of all child nodes

The node types we need to master in js:

## Capital The tag name is null

## Text node (text) 3

#document　　　　　9　　　#document　　　null

Note: In standard browsers, we treat space and Enter as our Text node

Method: Simulate our children method to obtain the element child node under the specified element

<em><em><span style="color: #008000">       /        * getMyChildren:获取制定元素下的所有的元素节点<em><em><em>        * @parameter：</em></em></em> <br>　　*   ele:我们要获取谁下面的，就把谁传过来<br>　　　　　　　tagName:获取元素的类型
        * @return:
        *   我们最后获取的元素子节点
        *   by xxxxxxxxx
        * </span><span style="color: #008000">*/</span><span style="color: #0000ff">function</span><span style="color: #000000"> getMyChildren(ele,tagName){</span><span style="color: #0000ff">var</span> ary = [],nodes =<span style="color: #000000"> ele.childNodes;</span><span style="color: #0000ff">for</span>(<span style="color: #0000ff">var</span> i = 0;i<nodes.length;i++<span style="color: #000000">){</span><span style="color: #0000ff">var</span> cur =<span style="color: #000000"> nodes[i];</span><span style="color: #0000ff">if</span>(cur.nodeType===1<span style="color: #000000">){<br>　　　　　　　　　　　　if(tagName){<br>　　　　　　　　　　　　　　if(cur.nodeName.toLowerCase===tagName.toLowerCase){<br>　　　　　　　　　　　　　　　　ary.push(cur)<br>　　　　　　　　　　　　　　}<br>　<br>　　　　　　　　　　　　}else{<br></span></em></em>

 　　　　　　　　　　　　ary.push(cur);

　　　　　　　　　　　　}
                   
                }
            }return ary;

        }

Get the previous brother element child node of an element

 pre =(pre && pre.nodeType!==1=

Get all the brother element nodes of an element

 function prevAll(ele){var pre = ele.previousSibling,ary = [];while(pre){if(pre,nodeType===1){
                    ary.unshift(pre);
                }
                pre = pre.previousSibling;
            }return ary;
        }

The above is the detailed content of Summary of node and relationship properties in DOM. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Implementation of the "drag and drop" effect of a small demoNext article：Implementation of the "drag and drop" effect of a small demo

See more

Summary of node and relationship properties in DOM

Related articles