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

js中DOM知识点分享

小云云

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

原创

1636人浏览过

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('*');            for(var i=0;i<aEle.length;i++){                if(aEle[i].className==sClass){
                    aResult.push(aEle[i]);
                }               
            }            return aResult;
        }        var p1 = document.getElementById('p1');        var aBox = getByClass(p1,'box');        for(var i=0;i<aBox.length;i++){
            aBox[i].style.backgroundColor='red';
        }    </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('oUl');                var oBtn = document.getElementById('btn');                var input1 = document.getElementById('input1');                var aLi = document.getElementsByTagName('li');
                oBtn.onclick=function(){
                    var oLi = document.createElement('li');                 
                    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='btn' type="button" value="创建" />
            <ul id='oUl'>
            </ul>
        </p>
    </body></html>

登录后复制