文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

JavaScript DOM基础

一．DOM介绍 DOM中的三个字母，D（文档）可以理解为整个Web加载的网页文档；O（对象）可以理解为类似window对象之类的东西，可以调用属性和方法，这里我们说的是document对象；M（模型）可以理解为网页文档的树型结构...PS：IE中的所有DOM对象都是以COM对象的形式实现的，这意味着IE中的DOM可能会和其他浏览器有一定的差异。 1.节点 加载HTML页面时，Web浏览器生成一个树型结构，用来表示页面内部结构。...虽然IE8已经修复这个bug，但为了更好的兼容，开发人员只有尽可能避免使用getAttribute()访问HTML属性了，或者碰到特殊的属性获取做特殊的兼容处理。...5.setAttribute()方法 setAttribute()方法将设置元素中某个属性和值。它需要接受两个参数：属性名和值。如果属性本身已存在，那么就会被覆盖。...bug，但还是不建议使用。

1.7K90

DOM 节点遍历：掌握遍历 XML文档结构和内容的技巧

XML DOM - 导航节点可以使用节点之间的关系来导航节点。导航 DOM 节点通过节点之间的关系在节点树中访问节点，通常被称为"导航节点"。...中的节点树的一部分以及节点之间的关系：DOM - 父节点所有节点都有一个父节点。...previousSibling(): 使用 previousSibling() 方法和自定义函数获取节点的前一个兄弟节点。XML DOM 获取节点值nodeValue 属性用于获取节点的文本值。...获取元素的值在 DOM 中，一切都是节点。元素节点没有文本值。元素节点的文本值存储在子节点中，这个节点被称为文本节点。要检索元素的文本值，必须检索元素的文本节点的值。...在 book 元素中存在属性时，删除属性XML DOM 添加节点添加节点 - appendChild()appendChild() 方法将子节点添加到现有节点。

1.7K10
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    DOM扩展

    属性 说明 add(value) 将给定的字符串添加到列表中。...（1）innerHTML属性 读模式：返回调用元素的所有节点（包括元素、注释和文本节点）对应的HTML标记； 写模式：根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素原先的所有子节点...（包括元素、注释和文本节点）对应的HTML标记； 写模式：根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素。...document.body.contains(div); // true 掩码 节点关系 1 无关（给定的节点不再当前文档中） 2 居前（给定的节点在DOM树中位于参考节点之前） 4 居后（给定的节点在...DOM树中位于参考节点之后） 8 包含（给定的节点是参考节点的祖先） 16 被包含（给定的节点是参考节点的后代） 示例：通用的contains函数 function contains(refNode,

    1.9K31

    10Node对象

    获取指定节点的最后一个子节点 childNodes 获取所有的子节点，返回一个NodeList集合，但此集合为动态集合 var childNodes = parentElement.childNodes...解决方案 如果可以判断出什么情况下是空白节点（内容为回车符的空白节点）根据空白节点产生的情况来进行处理 根据空白节点产生的情况来进行处理DOM中的空白符 使用getElementByTagName...删除节点 removeChild()方法实现从HTML页面中删除指定节点。 被移除的这个子节点仍然存在于内存中，只是没有添加到当前文档的DOM树中。 因此，你还可以把这个节点重新添加回文档中。...如果该节点已经存在于DOM节点树结构中的话，则它会被从原始位置删除。 使用 Node append Child0或其他类似的方法将拷贝的节点添加到文档中之前，那个拷贝节点并不属于当前文档树的一部分。

    93130

    从零开始的 React 再造之旅

    每完成一个任务单元都把节点添加到 DOM 上。...请记住，浏览器是可以打断渲染流程的，如果还没渲染完整棵树就把节点添加到 DOM，用户会看到残缺不全的 UI 界面，给人一种很不专业的印象，这肯定不是我们想要的。...因此需要重构节点添加到 DOM 这部分代码，整棵树（fiber）渲染完成之后再一次性添加到 DOM，即 React commit 阶段。...获取，因为 children 不只是函数组件使用时包含的子孙节点，还需要组合组件本身的结构 注意以下代码省略了未改动部分。...Redact 如果在渲染阶段收到新的更新会直接丢弃已渲染的树，再从头开始渲染。而 React 会用时间戳标记每次更新，以决定更新的优先级。 源码还有很多优化等待读者去发现。。。

    1K10

    DOM「建议收藏」

    二、nodeName、nodeValue以及nodeType和innerHTML和value DOM将网页表示为一颗树，该树的节点类型有多种。...所以在构造DOM树时，根元素并不适合作为根节点，所以就出现了文档节点，而根节点作为文档节点的子节点。...5——ENTITY REFERENCE实体引用节点。实体引用节点可以被用于表示DOM树中的一个实体引用。 6——ENTITY实体节点，表示文档中已分析或未分析的实体。...可使用value获取其属性值。 类似的，form里的DOM元素（input select checkbox textarea radio）值获取时都使用value。...()//创建一个DOM片段 createDocumentFragment()创建一个文档碎片，把所有的节点都加在上面，最后把文档碎片一次性添加到document中，比一次次修改DOM更高效。

    1.4K20

    《JavaScript 模式》读书笔记（8）— DOM和浏览器模式1

    通常的经验法则是尽量减少更新DOM，这也就意味着将DOM的改变分批处理，并在“活动”文档书之外执行这些更新。 　　当需要创建一个相对比较大的子树，应该在子树完全创建之后再将子树添加到DOM树中。...当将文档碎片添加到DOM树时，不是将碎片本身添加到DOM树中，而是将文档碎片的内容添加进DOM树中。该操作是十分方便的。...在为DOM树添加新节点时文档碎片是非常有用的。但在更新DOM现有的部分时，仍然可以批处理提交修改。...但更清晰的方法是使用addEventListener()方法。在IE8.0之前的版本中没有该方法，在这些老版本浏览器中应该使用attachEvent()。 　　...考虑到可以从每次点击时创建的事件对象中获取数值，因此为每个数值维持按钮节点和计数器之间引用是十分低效的。

    1.3K20

    《JavaScript 模式》读书笔记（8）— DOM和浏览器模式1

    通常的经验法则是尽量减少更新DOM，这也就意味着将DOM的改变分批处理，并在“活动”文档书之外执行这些更新。 　　当需要创建一个相对比较大的子树，应该在子树完全创建之后再将子树添加到DOM树中。...当将文档碎片添加到DOM树时，不是将碎片本身添加到DOM树中，而是将文档碎片的内容添加进DOM树中。该操作是十分方便的。...在为DOM树添加新节点时文档碎片是非常有用的。但在更新DOM现有的部分时，仍然可以批处理提交修改。...但更清晰的方法是使用addEventListener()方法。在IE8.0之前的版本中没有该方法，在这些老版本浏览器中应该使用attachEvent()。 　　...考虑到可以从每次点击时创建的事件对象中获取数值，因此为每个数值维持按钮节点和计数器之间引用是十分低效的。

    1.3K30

    如何将HTML字符转换为DOM节点并动态添加到文档中

    将HTML字符转换为DOM节点并动态添加到文档中 将字符串动态转换为DOM节点，在开发中经常遇到，尤其在模板引擎中更是不可或缺的技术。...字符串转换为DOM节点本身并不难，本篇文章主要涉及两个主题： 1 字符串转换为HTML DOM节点的基本方法及性能测试 2 动态生成的DOM节点添加到文档中的方法及性能测试 本文的示例：...它被当做一个轻量版的 Document 使用，用于存储已排好版的或尚未打理好格式的XML片段。...我们也可以使用 frag.firstChild 来获取生成的div。 1.1.3 性能测试 下面我们来简单比对下上面三种方法的性能,只是测试生成单个节点，在实际使用中并不一定有实际意义。...createDocumentFragment方法和createNode方法，在这轮测试中不相上下。下面我们看看将生成的DOM元素动态添加到文档中的方法。

    10.1K20

    【前端基础篇】JavaScript之DOM介绍

    W3C 标准给我们提供了一系列的函数, 让我们可以操作: 网页内容 网页结构 网页样式 DOM树 一个页面的结构是一个树形结构, 称为 DOM 树....示例： let newDiv = document.createElement("div"); 说明： 该方法创建了一个新的 div 元素，但此时它还没有被添加到页面中，需要使用其他方法将其插入到 DOM...的文本节点，可以将它插入到一个元素中显示在页面上。 4. 元素节点.removeChild(element) 功能： 从 DOM 中删除子元素。...元素节点.previousElementSibling 返回指定元素的前一个兄弟元素（相同节点树层中的前一个元素节点）。...元素节点.nextElementSibling 返回指定元素的后一个兄弟元素（相同节点树层中的下一个元素节点）。 事件概述 什么是事件 JS 要构建动态页面, 就需要感知到用户的行为.

    1.1K12

    关于DOM的理解

    5——ENTITY REFERENCE实体引用节点。实体引用节点可以被用于表示DOM树中的一个实体引用。 6——ENTITY实体节点，表示文档中已分析或未分析的实体。...4、innerHTML innerHTML只对元素节点有用，获取元素节点内容，也就是元素节点包含的文本节点的值。其他节点使用nodeValue。...类似的，form里的DOM元素（input select checkbox textarea radio）值获取时都使用value。...可以通过多种方法来查找DOM元素： a、使用getElementById()和getElementByTagName()和getElementsByClassName()方法 b、通过一个元素节点的parentNode...()//创建一个DOM片段 createDocumentFragment()创建一个文档碎片，把所有的节点都加在上面，最后把文档碎片一次性添加到document中，比一次次修改DOM更高效。

    1.4K30

    前端day13-JS(WebApi)学习笔记(attribute语法、DOM节点操作)

    3-DOM节点：网页一切内容皆节点 3.1-DOM节点介绍 1.什么是节点：在HTML文档中，一切皆节点（HTML文档本身...、标签、属性、注释内容、文本） 2.什么是元素：元素在HTML中叫做标签，在JS的dom对象中称为元素（可以理解为标签的面向对象的叫法） 3.HTML标签属于节点的一种，叫做元素节点 4.节点三要素：...DOM树体现着HTML页面的层级结构，学习中经常提到的父元素子元素的说法也是建立在树这种数据结构的基础之上的,而DOM文档树则包含文档中所有内容。...2.png HTML页面中的所有内容都会体现在DOM文档树中，要理解这种结构，对构成它的每个节点就要先有了解。...()：dom推荐方式 动态创建一个dom对象（空标签，需要自己设置属性）在内存中 需要使用appendChild来添加到HTML document.write():慎用，因为可能会覆盖原本的内容 覆盖内容的原理了解即可

    3.4K11
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券