javascript: The Document Object Model(DOM)

最新推荐文章于 2024-06-20 20:20:21 发布
最新推荐文章于 2024-06-20 20:20:21 发布
阅读量663 收藏
点赞数
分类专栏： javascript 文章标签： javascript object attributes reference processing class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sqlxx/article/details/5563419
版权

DOM

  • 节点类型的12个常量:
    • Node.ELEMENT_NODE
    • Node.ATTRIBUTE_NODE
    • Node.TEXT_NODE
    • Node.CDATA_SECTION_NODE
    • Node.ENTITY_REFERENCE_NODE
    • Node.ENTITY_NODE
    • Node.PROCESSING_INSTRUCTION_NODE
    • Node.COMMENT_NODE
    • Node.DOCUMENT_NODE
    • Node.DOCUMENT_TYPE_NODE
    • Node.DOCUMENT_FRAGMENT_NODE
    • Node.NOTATION_NODE
  • Node 的方法/特征:nodeName, nodeValue, nodeType, ownerDocument, firstChild, lastChild, childNodes, previousSibling, nextSibling, hasChildNodes(), attributes, appendChild(node), removeChild(node), replaceChild(newnode, node), insertBefore(newnode, node).
  • HTMLElement, 如HTMLDivElement代表了<div>
  • document.documentElement=<html>, document.body = <body>
  • element的attributes其实是NamedNodeMap, 可以用下列方法操作: getNamedItem(name), removeNamedItem(name), setNamedItem(node), item(pos).[这些方法都是返回一个Attr节点]. shortcuts:
    • getAttribute(name) = attributes.getNamedItem(name).value.
    • setAttribute(name, newvalue) = attribute.getNamedItem(name).value
    • removeAttribute(name) = attribute.removeNamedItem(name).
  • 访问指定节点:
    • getElementsByTagName()
    • getElementsByName()[ie 6和Opera 7.5在这个方法的实现上有些错误: 1. 还会返回id等于给定名称的元素.2. 他们仅仅检查<input/>和<img/>元素]
    • getElementById()[ie6有类似bug, id, name不分]
  • 创建和操作节点
    • createElement(), createTextNode(), appendChild()
    • 所有dom操作必须在页面完全下载完之后才能进行,因为页面正在载入 时,dom树还没有完全构建.所以必须使用onload事件.
    • removeChild(), replaceChild(), insertBefore()
    • createDocumentFragment().避免多次刷新document.

 

HTML DOM特征

 

  •  element.getAttribute("src") == element.src, element.getAttribute("border") == element.border. 例外是class, 因为class在ECMAScript中是一个保留字,所以element.getAttribute("class") == element.className.
  • table元素的额外属性.
    • <table>: caption, tBodies, tFoot, tHead, rows, createTHead(), createTFoot(), createCaption(), deleteTHead/TFoot/Caption(), deleteRow(position), insertRow(position).
    • <tbody>: rows, deleteRow(pos), insertRow(pos)
    • <tr>: cells, deleteCell(pos), insertCell(pos).

 

遍历DOM

NodeIterator( 深度优先搜索):

  • document.createNodeIterator(root, whatToShow, filter, entityReferenceExpansion)
  • whatToShow可以是:
    • NodeFilter.SHOW_ALL, SHOW_ELEMENT, SHOW_ATTRIBUTE, SHOW_TEXT, SHOW_CDATA_SECTION, SHOW_ENTITY_REFERENCE, SHOW_ENTITY, SHOW_PROCESSING_INSTRUCTION, SHOW_COMMENT, SHOW_DOCUMENT, SHOW_DOCUMENT_TYPE, SHOW_DOCUMENT_FRAGMENT, SHOW_NOTATION.
  • iterator.nextNode(), previousNode().
  • NodeFilter 子类, acceptNode()是唯一的方法,显示则返回NodeFilter.FILTER_ACCPET, 过滤则返回NodeFilter.FILTER_REJECT.

TreeWalker

  • 继承 NodeIterator,添加了:
    • parentNode()
    • firstChild()
    • lastChild()
    • nextSibling()
    • previousSibling()
  • document.createTreeWalker()
帅帅兔子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
DOM Scripting Web Design with JavaScript and the Document Object Model
09-05
英文第二版，pdf，高清， 涵盖HTML5内容。前端入门好书。
DOM Scripting Web Design JavaScript and the Document Object Model (2nd)
11-19
JavaScript Dom 编程艺术，第二版，英文版。学习JavaScript的经典教材
HTML DOM(Document Object Model)学习初步
breakingice的专栏
07-20 440
DOM是W3C的一种标准。
（3）选择元素——（2）文档对象模型（The Document Object Model）
今天，努力
09-15 1263
One of the most powerful aspects of jQuery is its ability to make selecting elements in the DOM easy. The Document Object Model serves as the interface between JavaScript and a web page; it provides a
DOM（Document Object Model，文档对象模型）
梦在哪里的博客
05-29 1263
DOM1. 历史2. 标准3. 应用程序3.1 Web浏览器3.2 JavaScript4. 实现4.1 布局引擎(Layout engines)4.2 库5. 参考文献 本文为译文，点击此处查看原文。 文档对象模型(DOM)是一个跨平台的、独立于语言的应用程序编程接口，它将XML文档视为树结构，其中每个节点都是表示文档一部分的对象。DOM表示具有逻辑树的文档。树的每个分支都以一个节点结束，每个节...
一篇文带你了解文档对象模型DOM（Document Object Model）
cai niaoyihao_的博客
06-06 2626
一篇文带你了解文本对象模型DOM（Document Object Model）
【JavaScript】Document Object Model 文档对象模型
YOU__FEI的博客
10-07 2284
DOM 全称是 Document Object Model 文档对象模型。大白话，就是把文档中的标签，属性，文本，转换成为对象来管理。Document 对象的理解：第一点：Document 它管理了所有的 HTML文档内容。第二点：Document 它是一种树结构的文档。有层级关系。第三点：它让我们把所有的标签都对象化。第四点：我们可以通过 Document访问所有的标签对象。注意：document 对象的三个查询方法，如果有 id 属性，优先使用getElementById 方法来进行查询。如果没有...
DOM(document Object model)
kui大师的博客
04-25 1518
DOM总结
javascript: The Browser Object Model(BOM)
Programmer
05-06 902
windowwindow对象是浏览器或者框架自身.top总是浏览器,parent是父框架,self表示自己. window通常可以省略.窗口操作: moveBy(dx, dy), moveTo(x, y), resizeBy(dw, dh), resizeTo(w, h).导航: window.open(url, frame name, attribute). at
The HTML DOM (Document Object Model)
weixin_30242907的博客
07-27 101
With the HTML DOM, JavaScript can access all the elements of an HTML document. The HTML DOM (Document Object Model) When a web page is loaded, the browser creates a Document Object Model of the p...
Day43
最新发布
m0_67496588的博客
06-20 529
JSON，Ajax
HTML入门教程：深度解析HTML，开启你的前端技术之旅
zhangwenok的博客
06-14 1497
HTML（HyperText Markup Language，超文本标记语言）是前端开发的基础，它负责构建网页的结构和内容。作为前端技术栈的基石，HTML的掌握程度直接影响到网页的开发效率和用户体验。本教程将带你从零开始，逐步深入了解HTML的各个方面，帮助你打下坚实的前端技术基础。HTML是一种用于创建网页的标准标记语言，它通过一系列的元素（elements）和标签（tags）来定义网页的结构和内容。HTML文档由一系列的元素组成，这些元素通过标签来标识。
工具链--nuxt框架 简介（一）
qq_35876316的博客
06-16 353
Nuxt框架是一个基于Vue.js的服务器端渲染（SSR）框架，旨在提供一套完整的前端开发解决方案，帮助开发者构建高性能、可扩展的Web应用。是一个功能强大、易于使用的Web开发框架，适用于多种开发场景和需求。Nuxt框架建立在Vue.js之上，它抽象出了管理异步数据、中间件和路由所涉及的大部分复杂配置。Nuxt不仅继承了Vue.js的所有优点，如易用性、灵活性等，还与Node.js紧密集成，使得开发者可以在项目中轻松地使用Node.js的各种功能。
VUE el-select Select 选择器 选项是对象，显示是一个值name ，但是绑定的对象值是id方案
mqiqe的专栏
06-14 338
在 Vue 中使用 Element UI 的 el-select 组件时，如果希望显示对象的某个属性（如 name），但实际绑定的是对象的另一个属性（如 id），需要使用 value-key 和 label 属性来分别指定这两个属性。在这个示例中，v-model=“selectedId” 用于绑定选择的值，该值将是选中项的 id。当用户选择一个选项时，selectedId 将被更新为选中项的 id，而 el-select 下拉列表中显示的是每个选项的 name 属性。
Vue在表单校验中trigger属性指定何时触发校验规则
李长渊的博客
06-13 897
Vue在表单校验中trigger属性指定何时触发校验规则
Vue3：解决在main.ts 中调用自定义的js文件会报错的问题
SUMMERENT的博客
06-14 176
案例：Vue3 ，使用的是main.ts ，在main.ts 中调用自定义的ruoComment.js文件会报错，解决报错：找到tsconfig.json文件。//1.将输出结构重定向到目录。,//2.编译时允许有js }加上如下代码：即可解决问题。,//3.添加路径支持js。
vue格网图
南北粉面馆
06-16 311
【代码】vue格网图。
document object model
05-12
文档对象模型（Document Object Model，简称DOM）是一种基于XML的文档结构表示方法，它把整个文档抽象成一个树形结构，每个节点都是一个对象，可以通过操作这些对象来改变文档的显示和内容。DOM提供了一种独立于平台...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

帅帅兔子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值