《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. 获取真实ip三个方法

    方法一: /** * 获取客户端IP地址 * * @return string */function get_client_ip(){ if (getenv("HTTP_CLIENT_IP& ...

  2. Java多线程入门中几个常用的方法

    一.currentThread()方法 currentThread方法就是返回当前被调用的线程. 该方法为一个本地方法,原码如下: /** * Returns a reference to the c ...

  3. 帝国cms自动保存图片

    <?=ECMS_ShowEditorVar("newstext",$ecmsfirstpost==1?"":stripSlashes($r[newstex ...

  4. 求数组的相邻子数组的最大值（txt文件存储）

    package mypackage; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.File ...

  5. /etc/profile ~/.bash_profile ~/.bashrc 等文件的执行过程 和 区别

    /etc/profile :系统的所有用户共享 ~/.bash_profile:仅针对当前用户有效 我的电脑只用于开发,因此全部配置/etc/profile 参考链接: https://blog.cs ...

  6. JavaScript 实现打印操作

    一.打印当前页面指定元素中的内容 方式一:直接使用window.print(); (1)首先获得元素的html内容(这里建议如果有样式最好是用内联样式的方式) var newstr = documen ...

  7. python------面向对象进阶反射详解(重点）

    一.反射 通过字符串映射或者修改程序运行时的状态,属性,或者方法. 1.getattr(object,name,default=None) 2.hasattr(object,name) 3.setat ...

  8. Linux中“零拷贝”

    服务器响应一个http请求的步骤 把磁盘文件读入内核缓冲区 从内核缓冲区读到内存 处理(静态资源不需处理) 发送到网卡的内核缓冲区(发送缓存) 网卡发送数据 数据从第一步中的内核缓冲区到第四步的内核缓 ...

  9. eclipse中mybatis自动生成插件使用

    对于使用Mybatis的开发者来说, 使用mybatis generator来生成mapper 以及配置文件, 可以大大简化工作, mybatis generator有多种工作方式, eclipse插 ...

  10. Syncthing – 数据同步利器---自己的网盘，详细安装配置指南，内网使用，发现服务器配置

    简介: 无论办公.文件共享.团队协作还是家庭照片.视频.音乐.高清电影的存储,我们常常都有文件同步和存储的需求.但随着国内各大网盘的花式阵亡或限速,早已没什么好选择了.好吧,我已经转战使用onedri ...