摘要:但上述两个情况中都是同一份文档。提示对象是对象的一部分,可通过属性对其进行访问。返回包含指定节点的子节点的集合,该集合为即时更新的集合。对象在中,对象表示元素属性节点的无序集合。
DOM简介( Document Object Model 文档对象模型) W3C
W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
W3C DOM 标准被分为 3 个不同的部分:
核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型
也就是说,DOM包含三个版本(?),对应不同的DOM模型,由于我对XML还不是很了解,这里主要先讨论HTML DOM
关于XML DOM 的W3C文档:XML DOM 教程 MDN:DOM概述 XML与HTML的区别 XML DOM解析 基础概念 什么是 HTML DOM?引自W3C:
HTML的标准对象模型
HTML 的标准编程接口
W3C 标准
HTML DOM 定义了所有 HTML 元素的对象和属性,以及访问它们的方法。
换言之,HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准
引自MDN:
文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构,样式和内容。DOM 将文档解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合。简言之,它会将web页面和脚本或程序语言连接起来。
一个web页面是一个文档。这个文档可以在浏览器窗口或作为HTML源码显示出来。但上述两个情况中都是同一份文档。文档对象模型(DOM)提供了对同一份文档的另一种表现,存储和操作的方式。 DOM是web页面的完全的面向对象表述,它能够使用如 JavaScript等脚本语言进行修改。
我们之所以能够对Web页面进行添加、删除、更新、操控元素等等活动,就是因为这个DOM才得以实现。它定义了一套对象(方法)规则,使得JavaScript可以根据这些规则来进行编程。更像是一个文档API
DOM 节点(Node)节点树根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:
整个文档是一个文档节点
每个HTML元素是元素节点
HTML元素内的文本是文本节点
每个HTML属性是属性节点
注释是注释节点
HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树:
这也被称为W3C DOM 1级核心Temperature Conversion
W3C的DOM Level 1 Core是用于更改文档内容树的强大对象模型。所有主流浏览器都支持Mozilla Firefox和Microsoft Internet Explorer。它是网络上脚本编写的强大基础。怎么称呼这些元素?
例:
DOM 教程 DOM 第一课
Hello world!
节点没有父节点;它是根节点
和 的父节点是 节点
文本节点 "Hello world!" 的父节点是
节点
且
节点拥有两个子节点: 和
节点拥有一个子节点:
和 节点是同胞节点
并且
元素是 元素的首个子节点
元素是 元素的最后一个子节点
元素是 元素的首个子节点
元素是 元素的最后一个子节点
DOM 处理中的常见错误是希望元素节点包含文本。HTML DOM 首先记住这个:在本例中:
DOM 教程 ,元素节点,包含值为 "DOM 教程" 的文本节点。
在 HTML DOM (文档对象模型)中,每个部分都是节点:DOM Document文档本身是文档节点
所有HTML元素是元素节点
所有 HTML 属性是属性节点
HTML元素内的文本是文本节点
注释是注释节点
每个载入浏览器的 HTML 文档都会成为 Document 对象。 Document对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。 提示:Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问。document.URL
URL 属性可返回当前文档的 URL。
比如在现在的窗口下,控制台输入:
alert(document.URL)document.getElementById()
这个大家都很熟悉了,getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。
W3C还定义了一个工具函数:getElementById() 是一个重要的方法,在 DOM 程序设计中,它的使用非常常见。我们为您定义了一个工具函数,这样您就可以通过一个较短的名字来使用 getElementById() 方法了:
function id(x) { if (typeof x == "string") return document.getElementById(x); return x; } // 上面这个函数接受元素 ID 作为它们的参数。使用前编写 x = id(x) 就可以了。document.getElementsByName()
getElementsByName() 方法可返回带有指定名称的对象的集合。
该方法与 getElementById() 方法相似,但是它查询元素的 name 属性,而不是 id 属性。
另外,因为一个文档中的 name 属性可能不唯一(如 HTML 表单中的单选按钮通常具有相同的 name 属性),所有 getElementsByName() 方法返回的是元素的数组,而不是一个元素。
由于这个方法返回的是一个数组,不是具体的元素,所以必须注意这点:
document.getElementsByTagName()
注意要和上面的区分,TagName指的是标签名
getElementsByTagName() 方法可返回带有指定标签名的对象的集合,返回元素的顺序是它们在文档中的顺序。 如果把特殊字符串 "*" 传递给 getElementsByTagName() 方法,它将返回文档中所有元素的列表,元素排列的顺序就是它们在文档中的顺序。注释:传递给 getElementsByTagName() 方法的字符串可以不区分大小写。
document.write()
write() 方法可向文档写入 HTML 表达式或 JavaScript 代码。
可列出多个参数(exp1,exp2,exp3,...) ,它们将按顺序被追加到文档中。
document.write("Hello World!");关于Document的更多属性方法可查W3C:HTML DOM Document 对象 DOM Element 简介:
element.parentNode在 HTML DOM 中,Element 对象表示 HTML 元素(所有 HTML 元素是元素节点)。
Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。
NodeList 对象表示节点列表,比如 HTML 元素的子节点集合。
元素也可以拥有属性。属性是属性节点(参见DOM Attribute)。
parentNode 属性以 Node 对象的形式返回指定节点的父节点。
如果指定节点没有父节点,则返回 null。
element.styleH1
HTMLElement.style 属性返回一个 CSSStyleDeclaration 对象,表示元素的 内联style 属性(attribute),但忽略任何样式表应用的属性。 通过 style 可以访问的 CSS 属性列表,可以查看 CSS Properties Reference。
H1
elt.style.cssText = "color: blue"; 设置多个样式属性 elt.setAttribute("style", "color: blue"); 设置多个样式属性 elt.style.color = "blue"; 直接设置样式属性 var st = elt.style; st.color = "blue"; 间接设置样式属性element.childNodes;通常,要了解元素样式的信息,仅仅使用 style 属性是不够的,这是因为它只包含了在元素内嵌 style 属性(attribute)上声明的的 CSS 属性,而不包括来自其他地方声明的样式,如
部分的内嵌样式表,或外部样式表。要获取一个元素的所有 CSS 属性,你应该使用 window.getComputedStyle()。
childNodes 属性返回节点的子节点集合,以 NodeList 对象。
提示:您可以使用 length 属性来确定子节点的数量,然后您就能够遍历所有的子节点并提取您需要的信息。
Node.childNodes 返回包含指定节点的子节点的集合,该集合为即时更新的集合(live collection)。
获得的Nodelist是实时更新的,如果你新增一个子节点,下次调用chilNodes属性返回的Nodelist会变化(更新)。
Nodelist不是数组!这一点很重要
MDN:Node.childNodes、NodeList 深入理解 NodeList - 挨踢前端 - 博客园 由于这个特性,所以一般推荐使用.childrenjQuery 遍历 - children() 方法 DOM Attribute Attr 对象 this is divthis is H1
this is H2
这是DIV2的文本节点Element P
在 HTML DOM 中,Attr 对象表示 HTML 属性。
HTML 属性始终属于 HTML 元素。
NamedNodeMap 对象在 HTML DOM 中,NamedNodeMap 对象表示元素属性节点的无序集合。
NamedNodeMap 中的节点可通过名称或索引(数字)来访问。
这段代码首先获得inputHTML元素,然后调用attributes返回NameNodeMap属性节点集合,里面的属性以键值对方式存在,之后调用value属性的属性值。
attribute.setNamedItem()setNamedItem() 方法向 nodeMap 添加指定的节点。
如果此节点已存在,则将替换该节点,并返回被替换的节点,否则返回值是 null。
var i = document.getElementById("input"); var c = document.createAttribute("class"); c.nodeValue = "cla"; i.attributes.setNamedItem(c)
创建属性节点,设置节点值,添加到元素节点下,然后设置属性节点,这里用的是attributes方法,即namednodemap.removeNamedItem(nodename)
添加属性节点也可以使用element.setAttributeNode(attributenode)方法;
关于更多:HTML DOM Attribute 对象,其中提到了不要在属性节点上使用节点对象的属性和方法 常用方法:HTML DOM 关于事件一章我会另开一篇博文继续研究文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/83061.html
摘要:发布后不久,微软就在其中加入了名为的实现命名为是为了避开与有关的授权问题。以现在的眼光来看,微软年月为进入浏览器领域而实施的这个重大举措,是导致日后蒙羞的一个标志性时间。微软推出其实现意味着有了两个不同的版本中的中的。 JavaScript简介 前言:最近在细读Javascript高级程序设计,对于我而言,中文版,书中很多地方一笔带过,所以用自己所理解的,尝试细致解读下。如有纰漏或错...
摘要:简介原文链接简称是一种轻量级,解释型的编程语言,其函数是一等公民。标准的目标是让任何一种程序设计语言能操控使用任何一种标记语言编写出的任何一份文档。核心规定了如何映射基于的文档结构,以便简化对文档的任意部分的访问和操作。 JavaScript 简介 原文链接 JavaScript ( 简称:JS ) 是一种 轻量级,解释型 的编程语言,其函数是一等公民。众所周知,它是用于网页开发的脚...
摘要:以下内容都是一些概念性的知识点弄懂这些基本的概念是我们在世界看得更远的垫脚石诞生于年年公司开发发布时临时将名字改为当时它的主要目的是处理以前由服务端语言负责的输入验证操作随着其发展现在已不再局限于数据验证而是具备了与浏览器窗口及其内容等几乎 以下内容都是一些概念性的知识点,弄懂这些基本的概念是我们在JavaScript世界看得更远的垫脚石. Javascript Javascript诞...
摘要:浏览器只是实现的宿主环境之一,其他宿主环境包括和。年月,版发布,成为国际标准。事件定义了事件和事件处理的接口。对于已经正式纳入标准的来说,尽管各浏览器都实现了某些众所周知的共同特性,但其他特性还是会因浏览器而异。 JavaScript 是面向 Web 的编程语言,绝大多数现代网站都使用了 JavaScript,并且所有的现代 Web 浏览器(电脑,手机,平板)均包含了 JavaScri...
摘要:中主要关注的就是,对象的主要功能就是处理网页内容。中文翻译模型,如果你把这个词从中抽离出来,看下面的图片是不是就很好理解。年月制定的标准,由两大部分组成核心和。扩展鼠标和用户界面事件范围遍历,增加了对支持。 往期回顾 在上一期的《JavaScript的组成 | 核心-ECMAScript 》☜里,我们有说到JavaScript 是由三大部分组成,分别是:核心ECMAScript、文档对...
阅读 2027·2023-04-26 02:23
阅读 1770·2021-09-03 10:30
阅读 1250·2019-08-30 15:43
阅读 1081·2019-08-29 16:29
阅读 461·2019-08-29 12:28
阅读 2235·2019-08-26 12:13
阅读 2078·2019-08-26 12:01
阅读 2330·2019-08-26 11:56