• 节点分为不同的类型:元素节点、属性节点和文本节点
  • getElementById()方法

这个方法将返回一个与那个有着给定id属性值的元素节点相对应的对象。注意大小写。该方法只有一个参数。这个参数也就是这个id值必须放在单引号或双引号里。

语法:document.getElementById(id)

  • getElementByTagName()方法

这个方法返回一个对象数组,每个对象分别对应着文档里有着给定标签的元素。

语法:document.getElementByTagName(tag)

可以利用length属性查出这个数组里的元素个数。document.getElementByTagName()方法允许把通配符作为参数,通配符作参数也必须放在引号里。如果你想知道某份文档里总共有多少个元素节点:

alert(document.getElementByTagName("*").length);

  • getAttribute()方法

只有一个参数就是你打算查询的属性的名字,语法:object.getAttribute(attribute)

getAttribute()方法不能通过document对象调用,只能通过一个元素节点对象调用它。所以,我们可以利用getAtrribute()方法把它的各种属性的值查询出来。

        <body>
<h1>what to buy</h1>
<p title="tips">Don't forget to buy this stuff</p>
<ul id="purchases">
<li>A tin of beans</li>
<li>Cheese</li>
<li>Milk</li>
</ul>
<script type="text/javascript">
var paras = document.getElementsByTagName("p");
for(var i=0; i<paras.length; i++){
alert(paras[i].getAttribute("title")); //tips
}
</script>
</body>
  • setAtrribute()方法

这个方法允许我们队属性节点的值做出修改。setAtrribute()方法也是一个只能通过元素节点对相关调用,但setAtrribute()方法需要向它传递两个参数:

object.setAtrribute(attribute,value)

        <script type="text/javascript">
var paras = document.getElementsByTagName("p");
for(var i=0; i<paras.length; i++){
paras[i].setAttribute("title","new tips");
alert(paras[i].getAttribute("title")); //new tips
}
</script>

setAtrribute()方法做出的修改不会反映在文档源代码里。

因为DOM的工作模式是:先加载文档的静态内容、再以动态方式对它们进行刷新,动态刷新不影响文档的静态内容

第三章 DOM的基本的更多相关文章

  1. 《DOM Scripting》学习笔记-——第三章 DOM

    <Dom Scripting>学习笔记 第三章 DOM 本章内容: 1.节点的概念. 2.四个DOM方法:getElementById, getElementsByTagName, get ...

  2. 第三章 DOM

    节点的概念 5个常用的DOM方法:getElementById.getElementsByTagName.getElementsByClassName.getAttribute.getAttribut ...

  3. 第三章DOM

    1. DOM的概念 D:Document. O:Object.对象可以分为三类, 1. 用户自定义的对象. 2. 内建对象,如Array,Math,Date. 3. 宿主对象,浏览器提供的对象.如wi ...

  4. 读高性能JavaScript编程 第三章

    第三章  DOM Scripting  最小化 DOM 访问,在 JavaScript 端做尽可能多的事情. 在反复访问的地方使用局部变量存放 DOM 引用. 小心地处理 HTML 集合,因为他们表现 ...

  5. JavaScript DOM编程艺术-学习笔记(第三章、第四章)

    第三章: 1.js的对象分为三种:①用户自定义对象 ② 内建对象(js提供的对象) ③宿主对象(js寄宿的环境-浏览器,提供的对象) 2.文档是由节点组成的集合,即dom树,html元素是根元素,是唯 ...

  6. KnockoutJS 3.X API 第三章 计算监控属性(5) 参考手册

    计算监控属性构造参考 计算监控属性可使用以下形式进行构造: ko.computed( evaluator [, targetObject, options] ) - 这种形式是创建一个计算监控属性最常 ...

  7. 好记心不如烂笔头之JQuery学习,第三章

    第三章中主要讲了几个对DOM进行操作的方法. 归纳如下: 属性的获取和设置: //属性的获取 $("li").attr("title"); //属性的设置 $( ...

  8. 第10章DOM笔记

    第十章 DOM 一 Node类型 共有12种节点类型,每个节点都有nodeType属性,用于表明节点类型,nodename 表示标签名称 nodeValue始终为null 1.操作节点 a)  app ...

  9. Knockout应用开发指南 第三章:绑定语法(3)

    原文:Knockout应用开发指南 第三章:绑定语法(3) 12   value 绑定 目的 value绑定是关联DOM元素的值到view model的属性上.主要是用在表单控件<input&g ...

随机推荐

  1. 模板 - 动态规划 - 区间dp

    因为昨天在Codeforces上设计的区间dp错了(错过了上紫的机会),觉得很难受.看看学长好像也有学,就不用看别的神犇的了. 区间dp处理环的时候可以把序列延长一倍. 下面是 $O(n^3)$ 的朴 ...

  2. VS中运行后控制台窗口一闪就没了

    使用VS2010后,用Ctrl+F5运行程序,结果控制台窗口一闪就没了,也没有出现”press any key to continue…” 或者“请按任意键继续”. 出现这种原因,主要是建立工程时选用 ...

  3. AC自动机板子(from. qwer)

    #include <cstdio> #include <cstring> #include <cstdlib> #include <algorithm> ...

  4. redis单机上部署集群

    一.安装单机redis  redis的安装:版本至少是3.2.8及其以上,这里以3.2.8版本为例说明 1.安装redis wget http://download.redis.io/releases ...

  5. thinkphp5使用前置后置操作

    下面举个例子,前置删除的例子   模型事件只可以在调用模型的方法才能生效,使用查询构造器通过Db类操作是无效的   控制器中实例化类   $cate=model('cate'); $cate-> ...

  6. [LOJ 2022]「AHOI / HNOI2017」队长快跑

    [LOJ 2022]「AHOI / HNOI2017」队长快跑 链接 链接 题解 不难看出,除了影响到起点和终点的射线以外,射线的角度没有意义,因为如果一定要从该射线的射出一侧过去,必然会撞到射线 因 ...

  7. HDU-2767-ProvingEquivalences

    链接:https://vjudge.net/problem/HDU-2767 题意: 给一个图,求最少需要几条边将其连成一个强连通图 思路: tarjan,缩点,考虑缩点后的图,出度为0的点和入度为0 ...

  8. applicationContext中普通数据源不用jndi数据源

    applicationContext.xml <?xml version="1.0" encoding="UTF-8"?> <beans xm ...

  9. (转)C#抽象类和接口对比

    c#中抽象类(abstract)和接口(interface)的相同点与区别  转自:http://blog.csdn.net/fxh_hua/archive/2009/08/20/4464739.as ...

  10. linux文件系统和目录树的关系

    文件系统是和底层的硬件系统紧密关联的,文件系统相当于是dev(设备或硬件)在Linux上面的显示,如/dev/hdc2 而目录树是逻辑的概念,其可以通过挂载的方式连接文件系统,先用df查看本地的文件系 ...