Home >Web Front-end >JS Tutorial >Sharing of DOM knowledge points in js

Sharing of DOM knowledge points in js

小云云Original: 2018-03-14 16:41:241513browse

1. childNodes and nodeType

childNodes gets the child nodes, but the space between one label and another label will be calculated as text nodes. nodeType determines what type of node a node is. Only when nodeType==1 is the element node, 2 is the attribute node, and 3 is the text node.
2. Children gets child nodes. It only returns HTML nodes, not even text nodes. Although it is not a standard DOM attribute, it is the same as the innerHTML method and is supported by almost all browsers.
3. offsetParent obtains the positioned parent element node of the node.
4. FirstChild() and firstElementChild() have compatibility issues. Use if to deal with compatibility issues. The rest of lastchild and so on are similar to this.
5. Use dom to get element attributes, use setAttribute('attribute to be set', 'set attribute value'), removeAttribute(name), getAttribute(name), which are basically not commonly used. But there are also situations where it must be used.
6. Using className to select elements can encapsulate a simple method. This is a low version now and has no bugs, but it has strong limitations.

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>     
    </head>
    <body>
        <p id="p1">
            <ul>
                <li class="box"></li>
                <li></li>
                <li></li>
                <li class="box"></li>
                <li class="box"></li>
                <li></li>
                <li></li>
                <li class="box"></li>
            </ul>
        </p>
    </body>
    <script>
        function getByClass(oParent,sClass){
            //*号代表通配符
            var aResult=[];            var aEle = oParent.getElementsByTagName(&#39;*&#39;);            for(var i=0;i<aEle.length;i++){                if(aEle[i].className==sClass){
                    aResult.push(aEle[i]);
                }               
            }            return aResult;
        }        var p1 = document.getElementById(&#39;p1&#39;);        var aBox = getByClass(p1,&#39;box&#39;);        for(var i=0;i<aBox.length;i++){
            aBox[i].style.backgroundColor=&#39;red&#39;;
        }    </script></html>

7. Create nodes such as forum functions
Be sure to add the created node to his parent element
creatElement() to create the node
appendChild() to add the created node to his parent element before
insertBefore() in a certain Insert a node before
removeChild() to delete a node

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title>创建节点</title>
        <script>
            window.onload=function(){
                var oUl = document.getElementById(&#39;oUl&#39;);                var oBtn = document.getElementById(&#39;btn&#39;);                var input1 = document.getElementById(&#39;input1&#39;);                var aLi = document.getElementsByTagName(&#39;li&#39;);
                oBtn.onclick=function(){
                    var oLi = document.createElement(&#39;li&#39;);                 
                    oLi.innerHTML=input1.value;                    if(aLi.length>0){
                        oUl.insertBefore(oLi,aLi[0]);
                    }else{
                        oUl.appendChild(oLi);
                    }
                }
            }        </script>
    </head>
    <body>
        <p>
            <input id="input1" type="text" />
            <input id=&#39;btn&#39; type="button" value="创建" />
            <ul id=&#39;oUl&#39;>
            </ul>
        </p>
    </body></html>

Related recommendations:

Some summary of using DOM

Deep into the advanced application of DOM in JavaScript

Summary of native JavaScript operations on dom nodes

The above is the detailed content of Sharing of DOM knowledge points in js. 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：Example sharing of js seamless scrollingNext article：Example sharing of js seamless scrolling

See more

Sharing of DOM knowledge points in js

Related articles