《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(对象),对 ...
随机推荐
- Dubbo的全局Filter配置
前言: 之前也写过dubbo的filter的文章, 后来和同事也有过交流, 才发生自己对dubbo的filter的机制, 还是存在一些误解, 尤其是自定义filter的定位, 不是那么清晰. 本文主要 ...
- 【paper】MTCNN
参考 1. MTCNN笔记; 完
- 【leetcode】412. Fizz Buzz
problem 412. Fizz Buzz solution: class Solution { public: vector<string> fizzBuzz(int n) { vec ...
- openssl查看apk的证书信息
查看apk的证书信息: openssl pkcs7 -inform DER -in CERT.RSA -noout -print_certs -text
- apk签名的流程
最后总结一下apk签名的整个流程: 一.对Apk中的每个文件做一次算法(数据SHA1摘要+Base64编码),保存到MANIFEST.MF文件中 二.对MANIFEST.MF整个文件做一次算法(数据S ...
- Python全栈之路----常用模块----sys模块
sys.argv 命令行参数 List,第一个元素是程序本身路径 #test.py import sys print(sys.argv) D:\ProgramLearning\Py_program& ...
- day03运算符 逻辑运算符
今日内容 运算符 算术运算符 取模% 打印1~100基数 #模2余1的为基数 #以1 3 5 7 9结尾的为奇数 # count =1 # while count<100: # print(co ...
- 第二个web网页
1.源代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">-------- ...
- live555 交叉编译移植到海思开发板
本文章参考了.http://blog.csdn.net/lawishere/article/details/8182952,写了hi3518的配置说明.特此感谢 https://blog.csdn.n ...
- 解决ansible上传速度慢的问题
问题: 假如有A.B.C.D....等机器,机器A为Ansible服务器,机器B.C.D...等为Ansible管理的节点服务器,A机器与其他机器都不在同一个网络,也就是A机器必须添加VPN之后才能与 ...