《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. Combining Lexical and Grammatical Features to Improve Readability Measures for First and Second Language Texts.-paper

    http://www.aclweb.org/anthology/N07-1058 Volume:Human Language Technologies 2007: The Conference of ...

  2. Python3根据基础概率随机生成选项

    想要实现一个功能:不同事件发生的基础概率不同,根据基础概率来随机生成选项. 比如,北京的秋天有四种状态,并分别对应一个基础概率,然后随机生成某一天的天气情况. weatherlist = ['Sunn ...

  3. Flutter 知识点

    Flutter:一个移动应用开发框架,它使用 Dart.C++.Skia 开发,对外提供了完全不依赖系统平台的 Widget 的能力,只通过自绘图形的方式工作,具有极其优秀的跨平台性.目前已经支持了 ...

  4. Java day1

    1. 学习java,首先是jdk的安装,JDK是 Java 语言的软件开发工具包,主要用于移动设备.嵌入式设备上的java应用程序.JDK是整个java开发的核心,它包含了JAVA的运行环境(JVM+ ...

  5. 这台计算机上缺少此项目引用的 NuGet 程序包，DotNetCompilerPlatform

    严重性 代码 说明 项目 文件 行 禁止显示状态错误 这台计算机上缺少此项目引用的 NuGet 程序包.使用“NuGet 程序包还原”可下载这些程序包.有关更多信息,请参见 http://go.mic ...

  6. can't access lexical declaration `a' before initialization

    <script type="text/javascript"> alert(a); let a=2; </script> 以上代码报错:   Referen ...

  7. Github访问速度慢和下载慢的解决方法

    原因 为什么访问速度慢.下载慢?github的CDN被某墙屏了,由于网络代理商的原因,所以访问下载很慢.Ping github.com 时,速度只有300多ms. 解决方法 绕过dns解析,在本地直接 ...

  8. 03-封装Response响应

    package com.day5; import java.io.BufferedWriter; import java.io.IOException; import java.io.OutputSt ...

  9. Docker系列07：Docker-compose

    1  什么是Docker-Compose Compose项目来源于之前的fig项目,使用python语言编写,与docker/swarm配合度很高. Compose 是 Docker 容器进行编排的工 ...

  10. 构建一个Vue项目

    一 我们需要安装vue.js Vue.js官网 当我们已经安装了vue-cli,那么我们需要更新Vue-cli. vue-cli3.0使用及配置 二 安装好了之后: 我们可以直接使用命令:mkdir ...