《Dom Scripting》学习笔记

第三章 DOM

本章内容：

1、节点的概念。

2、四个DOM方法：getElementById, getElementsByTagName, getAttribute, setAttribute

节点

  举例：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  2. "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  5.  
  6. <head>
  7.  
  8. <meta http-equiv="content-type" content="text/html;
  9.  
  10. ➥charset=utf-8" />
  11.  
  12. <title>Shopping list</title>
  13.  
  14. </head>
  15.  
  16. <body>
  17.  
  18.   <h1>What to buy</h1>
  19.  
  20.   <p title="a gentle reminder">Don’t forget to buy this stuff.</p>
  21.  
  22.   <ul id="purchases">
  23.  
  24.     <li>A tin of beans</li>
  25.  
  26.     <li>Cheese</li>
  27.  
  28.     <li>Milk</li>
  29.  
  30.   </ul>
  31.  
  32. </body>
  33.  
  34. </html>

元素节点（element nodes）： <body>, <p>, and <ul>

文本节点（text nodes）： “Don’t forget to buy this stuff.”

在XHTML文档中，文本节点总是包含在元素节点内部。但并非所有元素节点都包含文本节点。在上例中，<ul>元素没有直接包含任何文本节点，它包含的<li>元素节点包含着文本节点。

属性节点（attribute nodes）： title="a  gentle  reminder"

因为属性总是被放在起始标签里，所以属性节点总是被包含在元素节点中。

getElementById：是与document对象相关联的函数。参数：想获得的那个元素的id（放在单引号或双括号中）。此函数会返回一个对象，该对象对应着拥有id的元素。

getElementByTagName：getElementByTagName（）方法将返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素。

getAttribute：查找元素属性的值。语法：object.getAttribute(attribute)。

当属性值不存在时，返回空或“null”（取决于浏览器）

  1. var paras = document.getElementsByTagName("p");
  2. for (var i=0; i< paras.length; i++)
  3.  {
  4.    var title_text = paras[i].getAttribute("title");
  5.    if (title_text) alert(title_text);
  6.  }
  7.  
  8. //if (title_text)等价于if (title_text != null)

setAttribute：对属性的节点值作出修改。当属性不存在时，创建属性并赋值。属性存在时，修改属性的值。语法：object.setAttribute(attribute,value)。

  1. var shopping = document.getElementById("purchases");
  2. alert(shopping.getAttribute("title"));//弹出空白或“null”
  3. shopping.setAttribute("title","a list of goods");
  4. alert(shopping.getAttribute("title"));//弹出a list of goods

《DOM Scripting》学习笔记-——第三章 DOM的更多相关文章

  1. The Road to learn React书籍学习笔记(第三章)

    The Road to learn React书籍学习笔记(第三章) 代码详情 声明周期方法 通过之前的学习,可以了解到ES6 类组件中的生命周期方法 constructor() 和 render() ...

  2. [HeadFrist-HTMLCSS学习笔记]第三章构建模块：Web页面建设

    [HeadFrist-HTMLCSS学习笔记]第三章构建模块:Web页面建设 敲黑板!! <q>元素添加短引用,<blockquote>添加长引用 在段落里添加引用就使用< ...

  3. JVM学习笔记-第三章-垃圾收集器与内存分配策略

    JVM学习笔记-第三章-垃圾收集器与内存分配策略 tips:对于3.4之前的章节可见博客:https://blog.csdn.net/sanhewuyang/article/details/95380 ...

  4. python学习笔记——第三章 串

    第三章 字符串学习 1.字符串不灵活, 它不能被分割符值 >>> format = "hello, %s. %s enough for ya?" >> ...

  5. JavaScript高级编程学习笔记(第三章之一）

    继续记笔记,JavaScript越来越有意思了. 继续... 第三章:JavaScript基础 ECMAScript语法在很大程度上借鉴了C和其它类似于C的语言,比如Java和Perl. 大小写敏感: ...

  6. [HeadFirst-JSPServlet学习笔记][第三章：实战MVC]

    第三章 实战MVC J2EE如何集成一切 Java2企业版(Java 2 Enterprise Editon,J2EE)是一种超级规范.规定了servlets2.4,JSP2.0,EJB2.1(Ent ...

  7. c#高级编程第七版 学习笔记 第三章 对象和类型

    第三章 对象和类型 本章的内容: 类和结构的区别 类成员 按值和按引用传送参数 方法重载 构造函数和静态构造函数 只读字段 部分类 静态类 Object类,其他类型都从该类派生而来 3.1 类和结构 ...

  8. o'Reill的SVG精髓（第二版）学习笔记——第三章

    第三章:坐标系统 3.1视口 文档打算使用的画布区域称作视口.我们可以在<svg>元素上使用width和height属性确定视口的大小.属性的值可以是一个数字,该数字会被当作用户坐标下的像 ...

  9. javascript dom编程艺术笔记第三章：DOM操作的5个基本方法

    JavaScript的 DOM操作,主要是对DOM这三个字母中D.O.M的操作.D代表的是document(文档),即我们可以使用javascript对文档进行操作,O代表的是object(对象),对 ...

随机推荐

  1. 在Power BI报表和仪表板中显示刷新日期\时间

    有人最近问我:“如何在报告和仪表板中显示最后刷新数据的日期和时间?”这里有两个简单的技巧在这分享下,也许可以帮助到你. 显示上次刷新日期\时间 要想显示刷新的日期和时间,我们需要在模型本身中存储时间刷 ...

  2. ckeditor_学习(1) 基本使用

    ckeditor 是一款强大的web编辑器.工作需要用到记录学习和使用过程,版本是ckeditor4. 1.下载ckeditor的安装包,建议下载标准版的. j将ckeditor.js 引入页面,调用 ...

  3. C++程序设计-面向对象

    1-1面向对象初探 变量也是Object Data: the properties  or status; is the core Operations: the functions对外能提供的服务, ...

  4. Windows下运行Linux命令

    安装Gow软件,Gow-0.7.0.exe,这样就可以在Windows命令行运行Linux命令,比如通过scp把Windows下的文件拷贝到Linux下. 直接运行安装,不会生成任何客户端,直接使用W ...

  5. 13.python错误和异常

    一.错误和异常1.程序中的错误分为俩种:(1)语法错误:不按照语言的规则,必须在程序执行前就改正(2)逻辑错误2.异常就是程序运行时发生错误的信号,分为三部分(1)Traceback:异常追踪的信息( ...

  6. 再见了我热爱的ACM赛场

    随着2017EC-Final结束,我的ACM生涯也真正结束了,区域赛三铜三银三金,没有打铁,对我来说算是很满足了. 为什么打了ACM?我记得进入大学之后大概认真上课两三周,我就开始对大学讲课失望,开始 ...

  7. robot framework中的timeout的关键词

    1.默认robotframework中的含有等待的关键词(如:Wait Until Element Is Enabled),未手动设置时默认该参数为5sec 2.关键词:sleep A)一般在调试的时 ...

  8. FlexRay笔记

    1.FlexRay具有高速.可靠及安全的特点.FlexRay在物理上通过两条分开的总线通信,每一条的数据速率是10MBit/s.CAN网络最高性能极限为1Mbps,而FlexRay总数据速率可达到20 ...

  9. 【mysql】Mgr实现数据库高可用架构

    转载:https://www.cnblogs.com/luoahong/articles/8043035.html MGR简介 MySQL Group Replication(下简称:MGR)是MyS ...

  10. （转载）o(1), o(n), o(logn), o(nlogn) 时间复杂度

    o(1), o(n), o(logn), o(nlogn) 时间复杂度的解释: https://blog.csdn.net/yhc166188/article/details/81162865 时间复 ...