Summary of node and relationship properties in DOM-JS Tutorial-php.cn

Summary of node and relationship properties in DOM

PHP中文网

Release： 2017-06-21 13:20:59

Original

1132 people have browsed it

<!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>

Copy after login

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>

Copy after login

 　　　　　　　　　　　　ary.push(cur);

Copy after login

　　　　　　　　　　　　}
                   
                }
            }return ary;

        }

Copy after login

Get the previous brother element child node of an element

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

Copy after login

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;
        }

Copy after login

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!