《JavaScript DOM 编程艺术》读书笔记之DOM基础

2024-05-06 16:14:05

字体：大中小

来源：转载

供稿：网友

这篇文章主要介绍了《JavaScript DOM 编程艺术》读书笔记之DOM基础,需要的朋友可以参考下

DOM

DOM：文档对象模型；

节点

元素节点：DOM的原子是元素节点。<body>、<p>、<ul>之类的元素。元素可以包含其他的元素。没有被包含在其他元素里的唯一元素是<html>元素

文本节点：在XHTML文档里，文本节点总是被包含在元素节点的内部。

属性节点：属性节点用来对元素做出更具体的描述。例如，几乎每个元素都有一个title属性，而我们可以利用这个属性对包含在元素里的东西作出准确的描述：

<p style="border-left-color: rgb(0, 153, 204); border-left-width: 1px; border-left-style: solid; padding: 0px 3px; margin: 3px auto 0px; width: 640px; background-color: rgb(242, 246, 251); clear: both; border-top-color: rgb(0, 153, 204); border-top-width: 1px; border-top-style: solid; border-right-color: rgb(0, 153, 204); border-right-width: 1px; border-right-style: solid;"> 复制代码代码如下:

		
		      var shopping = document.getElementById("purchase");
		      var items = shopping.getElementsByTagName("*");

这样就可以得到id属性值为purchase的元素包含着多少个元素。

getElementsByClassName方法只有较新的浏览器才支持。为了弥补这一点，DOM脚本程序员需要使用已有的DOM方法来实现自己的getElementsByClassName。而多数情况下，他们的实现过程都与下面这个getElementsByClassName大致相似：

复制代码代码如下:

		
		      function getElementsByClassName(node, classname){
		        if(node.getElementsByClassName){
		          return node.getElementsByClassName(classname);
		        }else{
		          var results = new Array();
		          var elems = node.getElementsByTagName("*");
		          for(var i=0;i<elems.length;i++){
		            if(elems[i].className.indexOf(classname) != -1){
		              results[results.length] = elems[i];
		            }
		         }
		         return results;
		      }
		   }

这个getElementsByClassName函数接受两个参数，第一个node表示DOM树中的搜素起点，第二个classname就是要搜索的类名了。

获取和设置属性

getAttribute是一个函数，它只有一个参数——你打算查询的属性的名字：

复制代码代码如下:

object.getAttribute(attribute)

setAttribute()允许我们对属性节点的值做出修改。通过setAttribute对文档作出修改后，在通过浏览器的view source（查看源代码）选项去查看文档的源代码时看到的仍将是改变前的属性值，也就是说，setAttribute做出的修改不会反映在文档本身的源代码里。这种“表里不一”的现象源自DOM的工作模式：先加载文档的静态内容，再动态刷新，动态刷新不影响文档的静态内容。这正是DOM的真正威力：对页面内容进行刷新却不需要在浏览器里刷新页面。

上一篇：《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库

下一篇：js实现键盘控制DIV移动的方法