美文网首页
从零开始DOM的学习总结

从零开始DOM的学习总结

作者: HugeWilliam | 来源:发表于2018-01-16 08:26 被阅读0次

    DOM core中

    获取元素的方法

    getElementById

    通过元素的id属性获取对象

    getElementsByTagName

    通过元素标签名获取对象,是一个数组

    getElementsByClassName

    通过元素的class属性获取对象,也是一个数组

    获取对象的子节点的属性

    [elt].childNodes

    获取某对象下的所有子节点,是一个数组来着的

    其中有一些简写
    比如:firstChild <==> [elt].childNodes[0] <font color="green">某对象的第一个子节点</font>

    还有:lastChild <==> [elt].childNodes[childNodes.length-1] <font color="green">某对象的最后一个子节点</font>

    [elt].parentNode

    获取某元素节点的父元素节点,只有一个对象

    [elt].previousSibling

    获取某元素节点的上一个兄弟元素节点

    [elt].nextSibling

    获取某元素节点的下一个兄弟元素节点

    [elt].nodeType

    判断某个元素的子节点的属性,返回一个数字

    有三个常用的需要记住:
    1:Element 元素节点
    2:Attribute 属性节点
    3:Text 文本节点

    [nod].nodeName

    返回这个节点的节点名

    节点名有两种

    • 元素名,例如P,BODY,DIV
    • text 文本节点or节点的属性值

    [elt].nodeValue

    获取某个节点的文本值

    创建节点的方法及节点间的操作

    createElement(nodeName)

    在DOM结构外创建一个元素(p、div、span等)

    createTextNode("string")

    在DOM结构外创建一个文本节点

    parent.appendChild(son)

    往parent中的末尾追加son节点

    <html>
     <div id="mydiv"></div>
    </html> 
    <script>
     window.onload=function(){
         var mydiv = document.getElementById("mydiv");
         var parp = document.createElement("p");
         mydiv.appendChild(parp);
         /*将create的p元素append进div之中;*/
    }
    </script>
    

    parent.insertBefore(newElt,targetElt)

    在parent中,将newElt添加在targetElt之前

    *insertAfter(newElt,targetElt)

    <font style="color:green">实际上在js中并不存在insertAfter的方法,不过我们可以自己编一个insertAfter的函数,然后调用</font>

    
    function insertAfter(newElt,targetElt){
    
       var parent = targetElt.parentNode;
    
       if(targetElt == parent.lastChild){
    
           parent.appendChild(newElt);
    
       }else {
    
           parent.insertBefore(newElt,targetElt.nextSibling);
    
       }
    
    }
    

    节点的属性获取及操作

    [node].getAttribute("attr")

    获取该节点的attr属性的值

    [node].setAttribute("attr","value")

    将该节点中的attr属性的值设置为value


    HTML-DOM中

    在HTML-DOM中有一些类似HTML core的操作,但是要比core的篇幅要小,在浏览器呈现正宗的XHTML文档(即MIME类型是application/xhtml_xlm的XHTML文档)时会被直接忽略掉,但是在普通的html中,很灵活。

    下面列一些常用的HTML-DOM

    常见的HTML DOM

    [img].src 直接获取或者修改img对象中的src属性
    [a].href 直接获取或者修改a对象中的href属性
    [input].value 直接获取或者修改input对象中的value属性
    document.forms 获取document下所有的form表单元素
    document.body 获取文档中的body元素对象

    特殊的HTML-DOM

    document.innerHTML 获取或者修改document对象下的所有“HTML代码”

    例如:

    
    <body>
    
        <div id="test">
    
            <p>This is <em>my</em> content.</p>
    
        </div>
    
    </body>
    
    
    
    <script>
    
        var mydiv = document.getElementById("test");
    
        console.log(mydiv.innerHTML); 
    
        //<p>This is <em>my</em> content.</p>;
    
        //获取该div元素下的所有html代码(包括所有空白符)
    
    </script>
    
    ```
    

    相关文章

      网友评论

          本文标题:从零开始DOM的学习总结

          本文链接:https://www.haomeiwen.com/subject/fuwjoxtx.html