资讯专栏INFORMATION COLUMN

JavaScript DOM

Nekron / 2717人阅读

摘要:但上述两个情况中都是同一份文档。提示对象是对象的一部分,可通过属性对其进行访问。返回包含指定节点的子节点的集合,该集合为即时更新的集合。对象在中,对象表示元素属性节点的无序集合。

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) 是HTMLXML文档的编程接口。它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构,样式和内容。DOM 将文档解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合。简言之,它会将web页面和脚本或程序语言连接起来。

一个web页面是一个文档。这个文档可以在浏览器窗口或作为HTML源码显示出来。但上述两个情况中都是同一份文档。文档对象模型(DOM)提供了对同一份文档的另一种表现,存储和操作的方式。 DOM是web页面的完全的面向对象表述,它能够使用如 JavaScript等脚本语言进行修改。

我们之所以能够对Web页面进行添加、删除、更新、操控元素等等活动,就是因为这个DOM才得以实现。它定义了一套对象(方法)规则,使得JavaScript可以根据这些规则来进行编程。更像是一个文档API

DOM 节点(Node

根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:

整个文档是一个文档节点

每个HTML元素是元素节点

HTML元素内的文本是文本节点

每个HTML属性是属性节点

注释是注释节点

节点树

HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树:




    
        
        
         
    
        

Temperature Conversion

这也被称为W3C DOM 1级核心
W3C的DOM Level 1 Core是用于更改文档内容树的强大对象模型。所有主流浏览器都支持Mozilla Firefox和Microsoft Internet Explorer。它是网络上脚本编写的强大基础。
怎么称呼这些元素?

例:


  
    DOM 教程
  
  
    

DOM 第一课

Hello world!

节点没有父节点;它是根节点

的父节点是 节点

文本节点 "Hello world!" 的父节点是

节点

节点拥有两个子节点:

节点拥有一个子节点:</b> 节点</p></p> <p><p><b><title></b> 节点也拥有一个子节点:<strong>文本节点 "DOM 教程"</strong></p></p> <p><p><strong><b><h1></b> 和 <b><p></b> 节点是同胞节点</strong>,同时也是 <b><body></b> 的子节点</p></p> <p>并且</p> <p><p><b><head></b> 元素是 <b><html></b> 元素的首个子节点</p></p> <p><p><b><body></b> 元素是 <b><html></b> 元素的最后一个子节点</p></p> <p><p><b><h1></b> 元素是 <b><body></b> 元素的首个子节点</p></p> <p><p><b><p></b> 元素是 <b><body></b> 元素的最后一个子节点</p></p> <b>DOM 处理中的常见错误是希望元素节点包含文本。</b> <pre><p>在本例中:<b><title>DOM 教程,元素节点 </b>,包含值为 "DOM 教程" 的<strong>文本节点</strong>。</p></pre> <b><b>HTML DOM</b></b> <b>首先记住这个:</b> <pre> <b><strong>在 <b>HTML DOM</b> (文档对象模型)中,每个部分都是节点:</strong></b> <p><b>文档本身是文档节点</b></p> <p><b>所有<b>HTML</b>元素是元素节点</b></p> <p><b>所有 <b>HTML</b> 属性是属性节点</b></p> <p><b> <b>HTML</b>元素内的文本是文本节点</b></p> <p><b>注释是注释节点</b></p> </pre> <b><b>DOM Document</b></b> <pre> <b>每个载入浏览器的 <b>HTML</b> 文档都会成为 <b>Document</b> 对象。</b> <b> <b>Document</b>对象使我们可以从脚本中对 <b>HTML</b> 页面中的所有元素进行访问。</b> <b><strong>提示:<b>Document</b> 对象是 <b>Window</b> 对象的一部分,可通过 <b>window.document</b> 属性对其进行访问。</strong></b> </pre> <b><b>document.URL</b></b> <p><p>URL 属性可返回当前文档的 URL。<br>比如在现在的窗口下,控制台输入:</p></p> <pre>alert(document.URL) </pre> <p><script type="text/javascript">showImg("https://segmentfault.com/img/bVNXh4?w=609&h=152");</script></p> <b><b>document.getElementById()</b></b> <p>这个大家都很熟悉了,<b>getElementById()</b> 方法可返回对拥有指定 ID 的第一个对象的引用。</p> <pre><p>W3C还定义了一个工具函数:<b>getElementById()</b> 是一个重要的方法,在 <b>DOM</b> 程序设计中,它的使用非常常见。我们为您定义了一个工具函数,这样您就可以通过一个较短的名字来使用 <b>getElementById()</b> 方法了:</p></pre> <pre> function id(x) { if (typeof x == "string") return document.getElementById(x); return x; } // 上面这个函数接受元素 ID 作为它们的参数。使用前编写 x = id(x) 就可以了。</pre> <b><b>document.getElementsByName()</b></b> <p><b>getElementsByName()</b> 方法可返回带有指定名称的<strong>对象的集合</strong>。</p> <pre><p>该方法与 <b>getElementById()</b> 方法相似,但是它查询元素的 <b>name</b> 属性,而不是 id 属性。<br>另外,因为一个文档中的 <b>name</b> 属性可能不唯一(如 <b>HTML</b> 表单中的单选按钮通常具有相同的 <b>name</b> 属性),<strong>所有 <b>getElementsByName()</b> 方法返回的是元素的数组,而不是一个元素。</strong></p></pre> <p>由于这个方法返回的是一个数组,不是具体的元素,所以必须注意这点:</p> <pre> <input type="text" value="" name="myinput"/> <input type="button" value="" name="myinput" id="ID"/> <script type="text/javascript"> var inputA = document.getElementsByName("myinput")[0]; // [0]表示获得的所有input元素中第一个 var inputB = document.getElementById("ID"); // ID取值则很精确,因为ID的特殊性 var iA = inputA.attributes; // 元素自带对象,内含该元素所有属性(以键值对存在) alert(iA.length); // 3 alert(iA[0].name+" : "+iA[0].value); // "type : text" var iB = inputB.attributes; alert(iB.length); // 4 alert(iB[0].name+" : "+iB[0].value); // "type : button" </script> </pre> <b><b>document.getElementsByTagName()</b></b> <p>注意要和上面的区分,<b>TagName</b>指的是标签名</p> <pre> <b> <b>getElementsByTagName()</b> 方法可返回带有指定标签名的<strong>对象的集合</strong>,<strong>返回元素的顺序是它们在文档中的顺序。</strong> </b> <b>如果把特殊字符串 <b>"*"</b> 传递给 <b>getElementsByTagName()</b> 方法,<strong>它将返回文档中所有元素的列表,元素排列的顺序就是它们在文档中的顺序。</strong> </b> <p><strong>注释:传递给 <b>getElementsByTagName()</b> 方法的字符串可以不区分大小写。</strong></p> </pre> <pre> <input type="text" /> <input type="text" /> <input type="text" /> <script type="text/javascript"> var x = document.getElementsByTagName("INPUT")[0]; alert(x.tagName) // "INPUT" </script> </pre> <b><b>document.write()</b></b> <pre><p><strong><b>write()</b> 方法可向文档写入 HTML 表达式或 JavaScript 代码。</strong><br>可列出多个参数<b>(exp1,exp2,exp3,...)</b> ,它们将按顺序被追加到文档中。</p></pre> <pre>document.write("Hello World!"); </pre> <b>关于Document的更多属性方法可查W3C:HTML DOM Document 对象 </b> <b><b>DOM Element</b></b> <b>简介:</b> <pre> <p><p><strong>在 HTML DOM 中,Element 对象表示 HTML 元素(所有 HTML 元素是元素节点)。</strong></p></p> <p><p>Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。</p></p> <p><p><b>NodeList</b> 对象表示节点列表,比如 HTML 元素的子节点集合。</p></p> <p><p>元素也可以拥有属性。属性是属性节点(参见<b>DOM Attribute</b>)。</p></p> </pre> <b><b>element.parentNode</b></b> <pre><p><b>parentNode</b> 属性以 Node 对象的形式返回指定节点的父节点。<br>如果指定节点没有父节点,则返回 <b>null</b>。</p></pre> <pre> <div> <h1>H1</h1> </div> <script type="text/javascript"> var h = document.getElementsByTagName("H1")[0]; alert(h.parentNode.nodeName); // "DIV" </script> </pre> <b><b>element.style</b></b> <pre><p><b>HTMLElement.style</b> 属性返回一个 CSSStyleDeclaration 对象,表示元素的 内联style 属性(attribute),但忽略任何样式表应用的属性。 通过 style 可以访问的 CSS 属性列表,可以查看 CSS Properties Reference。</p></pre> <pre> <div> <h1>H1</h1> </div> <script type="text/javascript"> var h = document.getElementsByTagName("H1")[0]; h.setAttribute("style","font-size:100px;color: blue;") </script></pre> <p><script type="text/javascript">showImg("https://segmentfault.com/img/bVNXNM?w=865&h=193");</script></p> <pre> <b> <b>elt.style.cssText = "color: blue";</b> 设置多个样式属性</b> <b> <b>elt.setAttribute("style", "color: blue");</b> 设置多个样式属性</b> <b> <b>elt.style.color = "blue";</b> 直接设置样式属性</b> <b> <b>var st = elt.style; st.color = "blue";</b> 间接设置样式属性</b> <p>通常,要了解元素样式的信息,仅仅使用 style 属性是不够的,这是因为它只包含了在元素内嵌 style 属性(attribute)上声明的的 CSS 属性,而不包括来自其他地方声明的样式,如 <head> 部分的内嵌样式表,或外部样式表。要获取一个元素的所有 CSS 属性,你应该使用 window.getComputedStyle()。</p> </pre> <b><b>element.childNodes;</b></b> <pre><p><b>childNodes</b> 属性返回节点的子节点集合,以 <b>NodeList</b> 对象。</p></pre> <p>提示:您可以使用 <b>length</b> 属性来确定子节点的数量,然后您就能够遍历所有的子节点并提取您需要的信息。</p> <pre><p><b>Node.childNodes</b> 返回包含指定节点的子节点的集合,该集合为即时更新的集合(live collection)。</p></pre> <p><b>获得的<b>Nodelist</b>是实时更新的,如果你新增一个子节点,下次调用<b>chilNodes</b>属性返回的<b>Nodelist</b>会变化(更新)。</b></p> <p><b> <b>Nodelist</b>不是数组!这一点很重要</b></p> <pre><!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>

this is div

this is H1

this is H2

这是DIV2的文本节点

Element P


MDN:Node.childNodes、NodeList 深入理解 NodeList - 挨踢前端 - 博客园 由于这个特性,所以一般推荐使用.childrenjQuery 遍历 - children() 方法 DOM Attribute Attr 对象

在 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高级程序设计,对于我而言,中文版,书中很多地方一笔带过,所以用自己所理解的,尝试细致解读下。如有纰漏或错...

    teren 评论0 收藏0
  • JavaScript 简介

    摘要:简介原文链接简称是一种轻量级,解释型的编程语言,其函数是一等公民。标准的目标是让任何一种程序设计语言能操控使用任何一种标记语言编写出的任何一份文档。核心规定了如何映射基于的文档结构,以便简化对文档的任意部分的访问和操作。 JavaScript 简介 原文链接 JavaScript ( 简称:JS ) 是一种 轻量级,解释型 的编程语言,其函数是一等公民。众所周知,它是用于网页开发的脚...

    URLOS 评论0 收藏0
  • Javascript简介

    摘要:以下内容都是一些概念性的知识点弄懂这些基本的概念是我们在世界看得更远的垫脚石诞生于年年公司开发发布时临时将名字改为当时它的主要目的是处理以前由服务端语言负责的输入验证操作随着其发展现在已不再局限于数据验证而是具备了与浏览器窗口及其内容等几乎 以下内容都是一些概念性的知识点,弄懂这些基本的概念是我们在JavaScript世界看得更远的垫脚石. Javascript Javascript诞...

    Near_Li 评论0 收藏0
  • JavaScript 闯关记》之简介

    摘要:浏览器只是实现的宿主环境之一,其他宿主环境包括和。年月,版发布,成为国际标准。事件定义了事件和事件处理的接口。对于已经正式纳入标准的来说,尽管各浏览器都实现了某些众所周知的共同特性,但其他特性还是会因浏览器而异。 JavaScript 是面向 Web 的编程语言,绝大多数现代网站都使用了 JavaScript,并且所有的现代 Web 浏览器(电脑,手机,平板)均包含了 JavaScri...

    baihe 评论0 收藏0
  • 简单聊聊DOM

    摘要:讨论在如何去使用元素用于在页面中嵌入或引入脚本代码,该元素默认被定义在元素中页面内容该属性定义规定的文本类型,可以为类型也可以为类型等其他类型和属性类似,这个属性定义脚本使用的语言,该属性不是标准规范定义引用外部脚本的内嵌代码与内 讨论在HTML如何去使用JavaScript 元素用于在HTML页面中嵌入或引入JavaScript脚本代码,该元素默认被定义在元素中 HTML页面内容: ...

    MASAILA 评论0 收藏0
  • JavaScript的组成 | DOM/BOM

    摘要:中主要关注的就是,对象的主要功能就是处理网页内容。中文翻译模型,如果你把这个词从中抽离出来,看下面的图片是不是就很好理解。年月制定的标准,由两大部分组成核心和。扩展鼠标和用户界面事件范围遍历,增加了对支持。 往期回顾 在上一期的《JavaScript的组成 | 核心-ECMAScript 》☜里,我们有说到JavaScript 是由三大部分组成,分别是:核心ECMAScript、文档对...

    worldligang 评论0 收藏0

发表评论

0条评论

Nekron

|高级讲师

TA的文章

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