美文网首页
从零开始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的学习总结

    DOM core中 获取元素的方法 getElementById 通过元素的id属性获取对象 getElement...

  • DOM学习总结

    初识DOM DOM是Document Object Model,即是文档对象模型。 文档对象模型有三种节点关系。分...

  • DOM学习总结

    一、Document document.locationlocation属性返回一个只读对象,提供了当前文档的UR...

  • HTML DOM初阶

    最近在学习javascript关于DOM的一些知识,在这里对DOM做一些总结。 1.DOM简介 DOM是W3C的标...

  • 2019-11-23

    vue虚拟DOM是什么?vue的虚拟DOM的用法 1、为什么需要虚拟DOM 前面我们从零开始写了一个简单的类Vue...

  • BFC和DOM初级认知总结

    DOM 最近看了JavaScript DOM编程艺术这本书的DOM章节,下面就总结下DOM这个章节关于DOM的知识...

  • DOM、BOM、事件知识总结

    DOM、BOM、事件知识总结 DOM相关知识 DOM(Document Object Model)文档对象模型 如...

  • React 基础学习总结

    React 基础学习总结 1、创建虚拟DOM对象的两种方式 React.createElement(type, p...

  • DOM简述2

    总结 + 我认为的重点 搜索归纳,以掌握 DOM 基本思想 DOM 的作用 === 表示 HTML 文档 DOM提...

  • dom总结:DOM拓展

    对 DOM 的两个主要的扩展是 Selectors API(选择符 API)和HTML5,还有Element Tr...

网友评论

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

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