第三章 DOM的基本

  • 节点分为不同的类型:元素节点、属性节点和文本节点
  • 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的工作模式是:先加载文档的静态内容、再以动态方式对它们进行刷新,动态刷新不影响文档的静态内容

时间: 2024-10-08 19:35:02

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

高性能javascript(第三章 DOM编程)

1.浏览器之DOM 浏览器通常要求 DOM 实现和 JavaScript 实现保持相互独立 这对性能意味着什么呢?简单说来,两个独立的部分以功能接口连接就会带来性能损耗.一个很形象的 比喻是把 DOM 看成一个岛屿,把 JavaScript(ECMAScript)看成另一个岛屿,两者之间以一座收费桥连接 每次 ECMAScript 需要访问DOM 时,你需要过桥,交一次“过桥费”.你操作 DOM 次数越多,费用就越高.一般的建议是尽量减少过桥次数,努力停留在 ECMAScript 岛上.本章将对

第三章 DOM

节点的概念 5个常用的DOM方法:getElementById.getElementsByTagName.getElementsByClassName.getAttribute.getAttribute DOM中的   “D”:文档      "O":对象    "M":模型 JS中的对象可分为三种类型: 用户定义对象:由程序员自行创建的对象 内建对象:内建在JS语言里的对象 宿主对象:由浏览器提供的对象

第三章DOM

1. DOM的概念 D:Document. O:Object.对象可以分为三类, 1. 用户自定义的对象. 2. 内建对象,如Array,Math,Date. 3. 宿主对象,浏览器提供的对象.如window对象,方法例如window.open,window.blur. M:Model,模型.即整个网页文档树.根元素是<html>.节点Node,包含元素节点(如<p>),文本节点(<p>之间的文本)和属性节点(p的样式). 2. CSS 1. 样式的继承 2. clas

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

第三章: 1.js的对象分为三种:①用户自定义对象 ② 内建对象(js提供的对象) ③宿主对象(js寄宿的环境-浏览器,提供的对象) 2.文档是由节点组成的集合,即dom树,html元素是根元素,是唯一一个没有被其它元素包含的元素. 3.元素节点并非直接包含文本节点,例如:<ul><li>你好</li><ul>    ul元素并没有直接包含文本元素 4.获取元素的方法: ①getElementById() ②getElementsByTagName ()  

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

计算监控属性构造参考 计算监控属性可使用以下形式进行构造: ko.computed( evaluator [, targetObject, options] ) - 这种形式是创建一个计算监控属性最常见的情况. evaluator - 用于返回计算值的函数. targetObject-如果给出定义的值this时KO调用回调函数.参见部分第三章 计算监控属性(1) 使用计算监控属性以获取更多信息. options - 计算监控属性的其他属性的对象.请参见下面的完整列表. ko.computed(

锋利的jQuery第三章

现在开始学习第三章,jQuery中的Dom操作. 以前我也看过w3school的dom,看过了很迷,不知道dom是什么. 1,dom是文档对象模型,dom操作分为3类:Dom Core(核心),HTML-DOM,CSS-DOM (1)Dom Core(核心):主要有getElementById(),getElementByTagName(),getAttribute()和setAttribute()等方法. (2)HTML-DOM:如 document.forms //取得forms对象; el

第19章 DOM基础

学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口).DOM描绘了一个层次化的节点树,运行开发人员添加.移除和修改页面的某一部分.DOM脱胎于Netscape及微软公司创始的DHTML(动态HTML),但现在它已经成为表现和操作页面标记的真正跨平台.语言中立的方式.   一.DOM介绍 DOM中的三个字母,D(文档)可以理解为整个Web加载的网页文档:O(对象)

JavaScript学习笔记(第一章——第三章)

说明 参考资料:<JavaScript高级程序设计(第3版)> 笔记主要为<JavaScript高级程序设计(第3版)>读书记录,按照此书的章节学习记录.方便以后查询复习(PS:正版书99大洋,没舍得买.在淘宝46买了一本盗版的并带一本 <JavaScript DOM编程艺术(第2版)>).两本书同时阅读,但以<JavaScript高级程序设计(第3版)>为主要学习路线.重要说明性内容将以近似书中原文摘出(以免出现个人解释歧义),外加自己遇到特殊情况说明(不

Android艺术开发探索第三章——View的事件体系(上)

Android艺术开发探索第三章----View的事件体系(上) 我们继续来看这本书,因为有点长,所以又分了上下,你在本片中将学习到 View基础知识 什么是View View的位置参数 MotionEvent和TouchSlop VelocityTracker,GestureDetector和Scroller View的滑动 使用scrollTo/scrollBy 使用动画 改变布局参数 各种滑动方式的对比 弹性滑动 使用Scroller 通过动画' 使用延时策略 这章的概念偏自定义View方