《DOM Scripting》学习笔记-——第三章 DOM
《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的更多相关文章
- The Road to learn React书籍学习笔记(第三章)
The Road to learn React书籍学习笔记(第三章) 代码详情 声明周期方法 通过之前的学习,可以了解到ES6 类组件中的生命周期方法 constructor() 和 render() ...
- [HeadFrist-HTMLCSS学习笔记]第三章构建模块：Web页面建设
[HeadFrist-HTMLCSS学习笔记]第三章构建模块:Web页面建设 敲黑板!! <q>元素添加短引用,<blockquote>添加长引用 在段落里添加引用就使用< ...
- JVM学习笔记-第三章-垃圾收集器与内存分配策略
JVM学习笔记-第三章-垃圾收集器与内存分配策略 tips:对于3.4之前的章节可见博客:https://blog.csdn.net/sanhewuyang/article/details/95380 ...
- python学习笔记——第三章 串
第三章 字符串学习 1.字符串不灵活, 它不能被分割符值 >>> format = "hello, %s. %s enough for ya?" >> ...
- JavaScript高级编程学习笔记(第三章之一）
继续记笔记,JavaScript越来越有意思了. 继续... 第三章:JavaScript基础 ECMAScript语法在很大程度上借鉴了C和其它类似于C的语言,比如Java和Perl. 大小写敏感: ...
- [HeadFirst-JSPServlet学习笔记][第三章：实战MVC]
第三章 实战MVC J2EE如何集成一切 Java2企业版(Java 2 Enterprise Editon,J2EE)是一种超级规范.规定了servlets2.4,JSP2.0,EJB2.1(Ent ...
- c#高级编程第七版 学习笔记 第三章 对象和类型
第三章 对象和类型 本章的内容: 类和结构的区别 类成员 按值和按引用传送参数 方法重载 构造函数和静态构造函数 只读字段 部分类 静态类 Object类,其他类型都从该类派生而来 3.1 类和结构 ...
- o'Reill的SVG精髓（第二版）学习笔记——第三章
第三章:坐标系统 3.1视口 文档打算使用的画布区域称作视口.我们可以在<svg>元素上使用width和height属性确定视口的大小.属性的值可以是一个数字,该数字会被当作用户坐标下的像 ...
- javascript dom编程艺术笔记第三章：DOM操作的5个基本方法
JavaScript的 DOM操作,主要是对DOM这三个字母中D.O.M的操作.D代表的是document(文档),即我们可以使用javascript对文档进行操作,O代表的是object(对象),对 ...
随机推荐
- 单细胞参考文献 single cell
许多分析软件 : https://github.com/seandavi/awesome-single-cell#software-packages Smart-seq.CEL-seq.SCRB-se ...
- pom.xml中添加远程仓库
maven的pom.xml中添加远程仓库 <repositories> <repository> <id>mvnrepository</id> < ...
- exe4j使用说明
1:首先下载exe4j,软件根据电脑的版本下载(32bit or 64bit,本人的电脑是64bit),我下载的是没显示电脑版本的exe4j,有本地导入的选项和联网下载的选项,安装jre后才能进入-图 ...
- 内置---排序(sorted)
# li = [1,23,4,5,6,6,7]# res = sorted(li,reverse=True) #反转后,从小到大 默认从大到小 #res = sorted(li) # print(re ...
- spring boot通过Interceptor和HandlerMethodReturnValueHandler实现统一处理为controller返回对象统计处理时间
思路:实现思路都是基于Aop实现,方式上可以通过spring aop和spring mvc的aop机制都能实现. 通过Interceptor的可以实现为controller插入开始时间和执行结束时间, ...
- Eclipse+PyDev 安装和配置
Eclipse+PyDev 安装和配置 2012-03-17 23:23:23 | 17465次阅读 | 评论:0 条 | Python开发有很多工具,其中Eclipse+Pydev 是最常见的一种 ...
- keepalived 高可用配置
下载地址:http://www.keepalived.org/software/keepalived-1.2.12.tar.gzht 安装方法:1. ./configure 可能出现的错误 !!! O ...
- cordova插件列表
主要来源为http://blog.csdn.net/github_39500961/article/details/76270299 1.获取当前应用的版本号 cordova plugin add c ...
- 廖雪峰Java6 IO编程-2input和output-7序列化
1.序列化 序列化是指把一个Java对象变成二进制内容byte[] 序列化后可以把byte[]保存到文件中 序列化后可以把byte[]通过网络传输 一个Java对象要能序列化,必须实现Serializ ...
- jquery：获取checked复选框的问题
jquery:获取checked复选框的问题 功能描述:要完成一个全选的功能,但总是获取不到复选框的被选中的个数,究其原因,是Jquery中length和checked使用不当所造成的. // 获取所 ...