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

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 = “冬冬讲课”;


 

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值