[Java web编程]第3章 JavaScript脚本语言(Javascript DOM)

版权声明:本文为博主自学期间所整理的文章,欢迎转载与分享,自学交流+V“zhangdonghui370” https://blog.csdn.net/sinat_34137390/article/details/81537267

DOM(文档对象模型)是 HTML 和 XML 的应用程序接口(API)。DOM 将把整个页面规划成由节点层级构成的文档。HTML 或 XML 页面的每个部分都是一个节点的衍生物。

理解一下文档对象模型
        html文件加载到内存之后会形成一颗dom树,根据这些节点对象可以进行脚本代码的动态修改
        在dom树当中 一切皆为节点对象

DOM 通过创建树来表示文档,从而使开发者对文档的内容和结构具有空前的控制力。

W3C DOM 标准被分为 3 个不同的部分:

  1. 核心 DOM - 针对任何结构化文档的标准模型
  2. XML DOM - 针对 XML 文档的标准模型
  3. HTML DOM - 针对 HTML 文档的标准模型

XML DOM 定义了所有 XML 元素的对象和属性,以及访问它们的方法。

HTML DOM 是:

HTML 的标准对象模型

HTML 的标准编程接口

W3C 标准

HTML DOM 定义了所有 HTML 元素的对象和属性,以及访问它们的方法。

 

XML DOM与HTML DOM的关系

在XML DOM每个元素 都会被解析为一个节点Node,而常用的节点类型又分为

元素节点  Element

属性节点  Attr

文本节点  Text

文档节点  Document

HTML DOM是对XML DOM的扩展

进行 JavaScript DOM开发 可以同时使用 XML DOM和 HTML DOM

getElementById() 方法

getElementById() 方法返回带有指定 ID 的元素

getElementsByTagName() 方法

getElementsByTagName() 返回带有指定标签名的所有元素。

getElementsByName() 方法

getElementByName() 返回带有指定name的所有元素。

innerHTML属性

获取元素内容的最简单方法是使用 innerHTML 属性。

innerHTML 属性对于获取或替换 HTML 元素的内容很有用。


DOM 属性 -- nodeName

文档里的每个节点都有以下属性。
nodeName:一个字符串,其内容是给定节点的名字。
  var name = node.nodeName;
   * 如果节点是元素节点,nodeName返回这个元素的名称
   * 如果是属性节点,nodeName返回这个属性的名称
   * 如果是文本节点,nodeName返回一个内容为#text 的字符串
注:nodeName 是一个只读属性。


DOM 属性 -- nodeType

nodeType:返回一个整数,这个数值代表着给定节点的类型。
nodeType 属性返回的整数值对应着 12 种节点类型,常用的有三种:
Node.ELEMENT_NODE    ---1    -- 元素节点
Node.ATTRIBUTE_NODE  ---2    -- 属性节点
Node.TEXT_NODE       ---3    -- 文本节点
nodeType 是个只读属性


DOM 属性 -- nodeValue

nodeValue:返回给定节点的当前值(字符串)
 如果给定节点是一个属性节点,返回值是这个属性的值。
 如果给定节点是一个文本节点,返回值是这个文本节点的内容。
 如果给定节点是一个元素节点,返回值是 null
 nodeValue 是一个 读/写 属性,但不能对元素节点的 nodeValue 属性设置值,
    但可以为文本节点的 nodeValue 属性设置一个值。
   var li = document.getElementById(“li”);
   if(li.firstChild.nodeType == 3)
      li.firstChild.nodeValue = “冬冬讲课”;


猜你喜欢

转载自blog.csdn.net/sinat_34137390/article/details/81537267
今日推荐