资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/DOM的理解和操作

DOM的理解和操作

lavnFan / 3333人阅读

摘要：描绘了一个层次化的节点树节点关系。它允许开发人员查找添加修改删除页面的某一部分。获取的是所有的标签返回包含带有指定类名的所有元素的节点列表。返回匹配的元素集合同上如果没有匹配项，返回空的节点数组。

什么是DOM？

Document Object Model的缩写，就是以层次化的模式来描述网页的方式。

Document就是指文档（网页文件）

Object是指把网页文档看做一个整体

Model模型模式

关于DOM

DOM是针对HTML和XML文档的一个API（应用程序程序接口）。

DOM描绘了一个层次化的节点树（节点关系）。

它允许开发人员查找、添加、修改、删除页面的某一部分。

DOM节点树

DOM的属性

nodeName ——节点的名字；

nodeType —— 返回一个整数，代表这个节点的类型，1-元素节点，2-属性节点，3-文本节点；

nodeValue —— 返回一个字符串，这个节点的值；

childNodes —— 返回一个数组，数组由元素节点的子节点构成；

firstChild —— 返回第一个子节点；

lastChild —— 返回最后一个子节点；

nextSibling —— 返回目标节点的下一个兄弟节点，如果目标节点后面没有同属于一个父节点的节点，返回null；

previousSibling —— 返回目标节点的前一个兄弟节点，如果目标节点前面没有同属于一个父节点的节点，返回null；

parentNode —— 返回的节点永远是一个元素节点，因为只有元素节点才有可能有子节点，document节点将返回null；

DOM节点的类型nodeType

nodeType属性返回节点类型的常数值。不同的类型对应不同的常数值，12种类型分别对应1到12的常数值

元素节点 —— Node.ELEMENT_NODE(1)

属性节点 —— Node.ATTRIBUTE_NODE(2)

文本节点 —— Node.TEXT_NODE(3)

CDATA节点 —— Node.CDATA_SECTION_NODE(4)

实体引用名称节点 —— Node.ENTRY_REFERENCE_NODE(5)

实体名称节点 —— Node.ENTITY_NODE(6)

处理指令节点 —— Node.PROCESSING_INSTRUCTION_NODE(7)

注释节点 —— Node.COMMENT_NODE(8)

文档节点 —— Node.DOCUMENT_NODE(9)

文档类型节点 —— Node.DOCUMENT_TYPE_NODE(10)

文档片段节点 —— Node.DOCUMENT_FRAGMENT_NODE(11)

DTD声明节点 —— Node.NOTATION_NODE(12)

DOM节点操作方法
方法 描述 栗子 注意
createElement() 创建元素节点 var node = document.createElement("div"); 创建的节点不会被自动添加到文档document里
createTextNode() 创建文本节点 var val = document.createTextNode("text"); 创建的节点不会被自动添加到文档document里
appendChild() 插入节点到最后 node.appendChild(val);
insertBefore() 插入节点到目标节点的前面 node.insertBefore(_span, _p); 节点在

节点前面插入，其中第二个参数是可选，如果第二个参数不写，将默认添加到文档的最后，相当于appendChild。
cloneNode(boolean) 复制节点 node.cloneNode(true);/node.cloneNode(false) 参数true，复制整个节点和里面的内容；false，只复制节点不要里面的内容，复制后的新节点不会被自动插入到文档。
removeChild() 删除节点 node.removeChild(_p);
getAttribute() 获取节点属性 node.getAttribute("title");
setAttribute() 设置节点属性 node.setAttribute("title","我是个美少女"); class属性不能这样设置。
hasChildNodes 判断元素是否有子节点 node.hasChildNodes; 返回布尔值。
replaceChild() 替换子节点 var returnNode = ul.replaceChild(li,lis[1]); //用创建的li替换原来的第二个li 用于替换节点，接受两个参数，第一参数是要插入的节点，第二个是要替换的节点，返回被替换的节点
document.getElementById() 返回带有指定ID的元素 var element=document.getElementById("intro");
document.getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。 var element=document.getElementsByTagName("p"); 获取的是所有的p标签
document.getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。 var element=document.getElementsByClassName("_p"); 获取的是所有的含有‘_p’类名的元素
document.getElementsByName() 返回带有指定名称的对象的集合 var x=document.getElementsByName("sex"); alert(x.length); 查询元素的 name 属性，比如单选框它有一组一样的name值，所以返回的是一个元素的数组，而不是一个元素。
document.querySelector 返回匹配的第一个元素 var obj = document.querySelector("#id"); var obj = document.querySelector(".classname"); var obj = document.querySelector("div"); 如果没有匹配项，返回null。
document.querySelectorAll 返回匹配的元素集合 同上 如果没有匹配项，返回空的nodelist(节点数组)。
云服务器 GPU云服务器 云计算和大数据的理解 Dom操作 dom对象操作 DOM交互操作

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84399.html

相关文章

  • React Virtual DOM 理解

    摘要：二原理每个都有两个，一个是新的，一个是原来的。三实现过程四算法的理解与实现本质上就是在和之间做了一个缓存。将差异的应用到真正的树上对真实上的树进行深度优先遍历，在所有的差异列表中找出当前遍历的节点差异，然后根据不同进行操作。 React Virtual DOM 一、概念 在react中，对于每个DOM对象都有一个相应的虚拟DOM对象，相当于DOM对象的轻量级副本 由于是Virtual...

    smallStone 评论0 收藏0

  • 我理解的关于Vue.nextTick()的正确使用

    摘要：在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的结构的时候，这个操作都应该放进的回调函数中。这样回调函数在更新完成后就会调用。 关于作者 程序开发人员，不拘泥于语言与技术，目前主要从事PHP和前端开发，使用Laravel和VueJs，App端使用Apicloud混合式开发。合适和够用是最完美的追求。 个人网站：http://www.linganmin.cn 最近刚写...

    YorkChen 评论0 收藏0

  • 我理解的关于Vue.nextTick()的正确使用

    摘要：在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的结构的时候，这个操作都应该放进的回调函数中。这样回调函数在更新完成后就会调用。 关于作者 程序开发人员，不拘泥于语言与技术，目前主要从事PHP和前端开发，使用Laravel和VueJs，App端使用Apicloud混合式开发。合适和够用是最完美的追求。 个人网站：http://www.linganmin.cn 最近刚写...

    CHENGKANG 评论0 收藏0

  • 关于DOM操作是异步的还是同步的相关理解

    摘要：关于异步应该很多地方都说过，是单线程的，严格的说，是指引擎中负责解释和执行代码的线程只有一个，除此之外，其实还有事件触发线程请求线程等，因此，应该说同步是单线程可能更准确些。 作者：心叶时间：2019-03-08 09:45 我的理解 先列出我的理解，然后再从具体的例子中说明： DOM操作本身应该是同步的（当然，我说的是单纯的DOM操作，不考虑ajax请求后渲染等） DOM操作之后导...

    jayzou 评论0 收藏0

  • 一起理解 Virtual DOM

    摘要：具体而言，就是每次数据发生变化，就重新执行一次整体渲染。而给出了解决方案，就是。由于只关注，通过阅读两个库的源码，对于的定位有了更深一步的理解。第二个而且，技术本身不是目的，能够更好地解决问题才是王道嘛。 前言 React 好像已经火了很久很久，以致于我们对于 Virtual DOM 这个词都已经很熟悉了，网上也有非常多的介绍 React、Virtual DOM 的文章。但是直到前不久...

    Tangpj 评论0 收藏0

  • 细说 jQuery 元素篇（一） - 理解 DOM

    摘要：最强大的特性之一就是简化了对元素的操作。从图中，我们可以看出元素中父元素子元素之间的关系。被封装到对象中的元素会被自动地，隐式地循环遍历。访问从上可知，返回的是对象，但是我们有时也希望直接对元素进行操作。 DOM - Document Object Model，即文档对象模型，它通过对象树来展示 HTML 代码。jQuery 最强大的特性之一就是简化了对 DOM 元素的操作。 DOM...

    everfight 评论0 收藏0

发表评论

登陆后可评论

0条评论

lavnFan

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<