js中DOM知识点分享-js教程-PHP中文网

js中DOM知识点分享

小云云

发布： 2018-03-14 16:41:24

原创

1480 人浏览过

1、childNodes和nodeType

childNodes获取子节点，但是会把中一个标签与另一个标签的空格当做文本节点来计算。nodeType判断一个节点是什么类型的节点。只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。
2、children获取子节点，它只返回HTML节点，甚至不返回文本节点，虽然不是标准的DOM属性，但它和innerHTML方法一样，得到了几乎所有浏览器的支持。
3、offsetParent获取该节点有定位的父元素节点。
4、firstChild()和firstElementChild()，有兼容问题，使用if来处理兼容问题。其余lastchild等的也是和这个相类似。
5、使用dom来获取元素属性，使用setAttribute(‘要设置的属性’，‘设置属性的值’),removeAttribute(名称)，getAttribute（名称），基本不常用。但也有必须用的情况。
6、使用className来选择元素，可以封装一个简单的方法，现在这个是低版本的，没有bug，但是有很强的局限性

<!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、创建节点比如论坛功能
一定要把创建好的节点加入到他的父元素下面
creatElement（）创建节点
appendChild()将创建好的节点添加到他的父元素之前
insertBefore()在某个节点之前插入
removeChild()删除某个节点

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

登录后复制