《Dom Scripting》学习笔记

第三章 DOM

本章内容：

1、节点的概念。

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

节点

  举例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<meta http-equiv="content-type" content="text/html;

➥charset=utf-8" />

<title>Shopping list</title>

</head>

<body>

  <h1>What to buy</h1>

  <p title="a gentle reminder">Don’t forget to buy this stuff.</p>

  <ul id="purchases">

    <li>A tin of beans</li>

    <li>Cheese</li>

    <li>Milk</li>

  </ul>

</body>

</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”（取决于浏览器）

var paras = document.getElementsByTagName("p");

for (var i=0; i< paras.length; i++)

 {

   var title_text = paras[i].getAttribute("title");

   if (title_text) alert(title_text);

 }

//if (title_text)等价于if (title_text != null)

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

var shopping = document.getElementById("purchases");

alert(shopping.getAttribute("title"));//弹出空白或“null”

shopping.setAttribute("title","a list of goods");

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. 测试那些事儿—软测必备的Linux知识（一）

    1.Linux入门须知 1.1文件.目录 linux文件:Linux所有的内容都是以文件形式保存,包括硬件(一切内容皆文件),并且linux不靠扩展名区分文件类型. linux文件有多种基本类型,常见 ...

  2. Codeforces1076E. Vasya and a Tree（dfs+离线+动态维护前缀和）

    题目链接:传送门 题目: E. Vasya and a Tree time limit per test seconds memory limit per test megabytes input s ...

  3. Linux 系统下使用dd命令备份还原MBR主引导记录

    https://en.wikipedia.org/wiki/Master_boot_recordhttps://www.cyberciti.biz/faq/howto-copy-mbr/https:/ ...

  4. 基于python的unittest测试框架集成到jenkins（Mac）

    1.jenkins部分 1.1 安装jenkins jenkins下载地址:https://jenkins.io/download/ 安装步骤,疯狂点击下一步 1.2 打开jenkins服务 在浏览器 ...

  5. PythonStudy——函数的导入 Import of functions

    # 函数:完成 特定 功能的代码块,作为一个整体,对其进行特定的命名,该名字就代表函数# 难点:如何定义个函数 # 现实中很多问题要通过一些工具进行处理 => 可以将工具提前生产出来并命名# = ...

  6. PythonStudy——数据类型 Type of data

    数据类型:信息存在的状态为什么要来描述事物的具体状态:不同的事物需要不同的状态加以描述可以达到描述的最优化 python中有哪些常见的数据类型 1.整型 num = 10000000000000000 ...

  7. 建筑的永恒之道 (C·亚历山大 著)

    永恒之道 建筑或城市只有踏上了永恒之道,才会生机勃勃. 第1章 永恒之道 它是一个唯有我们自己才能带秩序的过程,它不可能被求取,但只要我们顺应它,它便会自然而然地出现. 质 为了探求永恒之道,我们首先 ...

  8. dos2unix 批量转化文件

    在windows和linux双平台下开发,同时也用git作为同步工具,但前期没有注意,导致很多文件使用windows下的换行符CRLF 参考资料了解dos2unix可以转化格式. 但有个问题,虽然可以 ...

  9. 新系统centos7重启网络报错

    场景: 在不知名云上新弄的centos7,改了IP之后启动不起来,使用systemctl status network查看结果如下:       排查过程:   1)NetworkManager是否关 ...

  10. 论文阅读笔记：【MDNet】

    [MDNET]: H Nam, B Han. Learning multi-domain convolutional neural networks for visual tracking[C]. / ...