从零开始DOM的学习总结

2018-01-16 本文已影响0人 HugeWilliam

DOM core中

获取元素的方法

getElementById

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

getElementsByTagName

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

getElementsByClassName

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

获取对象的子节点的属性

[elt].childNodes

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

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

还有：lastChild <==> [elt].childNodes[childNodes.length-1] 某对象的最后一个子节点

[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)

实际上在js中并不存在insertAfter的方法，不过我们可以自己编一个insertAfter的函数，然后调用


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>

```