《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. swift3.0自定义相机界面

    这是公司上上上一个项目的自定义相机界面,原来是swift2.0写的,今天改为swift3.0,记录一下. 效果图如下:                                         ...

  2. 在linux系统安装tomcat后，bin文件下startup.sh启动不

    Linux里的tomcat下的 bin ,没法执行,   可直接到 bin 目录下 ,执行 chmod 777 *  就可以了. [srmdev@mvxl0793 bin]$ chmod 777  * ...

  3. IC卡触点释放时序

    IC卡触点释放时序过程如下: 要点: 终端必须通过把RST置为低电平状态来启动释放时序: 在置RST为低电平之后VCC断电之前,终端必须将CLK和IO设定为低电平状态: 在置RST.CLK和IO为低电 ...

  4. Unity在UI界面上显示3D模型/物体，控制模型旋转

    Unity3D物体在UI界面的显示 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- ...

  5. leetcode 3.Longest Substring Without Repeating Charcters

    在一个字符串中寻找出最长的无重复字符的子串的,在不断的后续检索中需要去掉前面一个重复的字符,那么就是需要记录之前所出现过的字符的,在这里需要利用hashmap来记录字符和其出现的位置之间的映射关系的, ...

  6. spring boot 之 spring task(定时任务)

    cron:通过表达式来配置任务执行时间cron表达式详解 一个cron表达式有至少6个(也可能7个)有空格分隔的时间元素.按顺序依次为: 秒(0~59)分钟(0~59)3 小时(0~23)4  天(0 ...

  7. solr 学习笔记（一）--搜索引擎简介

    一 搜索引擎是什么一套可对大量结构化.半结构化数据.非结构化文本类数据进行实时搜索的专门软件最早应用于信息检索领域,经谷歌.百度等公司推出网页搜索而为大众广知.后又被各大电商网站采用来做网站的商品搜索 ...

  8. how to tell gcc with c99 enable

    just copy the make file here. CC = gccCFLAGS = -Wall -std=c99OUTFILE = outputfileOBJS = source.oSRCS ...

  9. 程序猿大牛 Jeff Atwood 的两本中文书

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/happydeer/article/details/17094271 watermark/2/text ...

  10. Python3之set, frozenset记录

    set1 = set([1, 2, 3, 4]) set2 = frozenset([1, 2, 3, 4]) print(set1, set2, sep='|||') set1.add(" ...