《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 ...
- WEB学习笔记1-综述
WEB前端基本技术:HTML.CSS.JavaScript 概念: 从职责上讲,Web前端开发要涉及网站开发的方方面面,从前端UI到和后端的数据交互都属于前端开发的范畴.Web前端开发是兼具艺术气息和 ...
- linux ipv6开启的配置文件
1./etc/sysconfig/network-scripts/ifcfg-eth0 DEVICE=eth0TYPE=EthernetUUID=9d1d6e2a-cfc5-4e60-8f28-b77 ...
- jQuery-2.DOM---节点插入
DOM内部插入append()与appendTo() 动态创建的元素是不够的,它只是临时存放在内存中,最终我们需要放到页面文档并呈现出来.那么问题来了,怎么放到文档上? 这里就涉及到一个位置关系,常见 ...
- Arcmap查找孤路
本文将介绍如何查出孤路——如下图红色框中的路: 方法一:使用拓扑检查 1. 使用merge,将所有道路合并到一个图层.注意,不能先分图层进行拓扑检查,因为本不是孤路的数据可能会被挑出来. 2. 对合并 ...
- 百战程序员-xml
1.用自己的语言说出,为什么需要XML? XML 是一种元标注语言,该语言提供一种描述结构数据的格式.这有助于更精确地声明内容,方便跨越多种平台的更有意义的搜索结果.此外,XML 将起用新一代的基于 ...
- 解决插值表达式闪烁问题 - v-cloak
v-cloak页面在js没有加载出来的时候,不显示该部分 linux可以通过响应式设计模式,来模拟2,3G网络 <!DOCTYPE html><html><head> ...
- alpha冲刺（1/10）
前言 队名:旅法师 作业链接 队长博客 燃尽图 会议 会议照片 会议内容 陈晓彬(组长) 今日进展: 召开会议 安排任务 博客撰写 构建之法的阅读 问题困扰: Java的学习感觉无从下手,学基础语法好 ...
- Elasticsearch5.5.1学习笔记
在linux下增加ik分词 一.下载分词器安装包 wget https://github.com/medcl/elasticsearch-analysis-ik/releases/download/v ...
- js 关于定时器的知识点。
Js的同步和异步 同步:代码从上到下执行. 异步:每个模块执行自己的,同时执行. js本身就是同步的,但是需要记住四个地方是异步. Js的异步 1.定时器 2.ajax 3事件的绑定 4. ...