DOM

DOM：文档对象模型；

节点

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

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

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

<p title="a gentle reminder">Don't forget to buy this stuff.</p>

在DOM中，title="a gentle reminder"是一个属性节点。

CSS

获取元素

getElementById, getElementsByTagName, getElementsByClassName三种可以获取元素节点的方法。

getElementsByTagName允许把一个通配符作为它的参数，而这意味着文档里的每个元素都将在这个函数所返回的数组里占有一席之地。通配符（“*”）必须在引号里，这是为了和乘法操作有所区别。

还可以把getElementById和getElementsByTagName结合起来运用。如下所示：

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的真正威力：对页面内容进行刷新却不需要在浏览器里刷新页面。

<!--

作者：纤锐
出处：http://www.cnblogs.com/beginner2014/p/4150571.html
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接。谢谢合作。

-->

JavaScript DOM 编程艺术（第2版）读书笔记（3）的更多相关文章

  1. Javascript DOM 编程艺术（第二版）读书笔记——基本语法

    Javascript DOM 编程艺术(第二版),英Jeremy Keith.加Jeffrey Sambells著,杨涛.王建桥等译,人民邮电出版社. 学到这的时候,我发现一个问题:学习过程中,相当一 ...

  2. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  3. 《JavaScript DOM编程艺术（第二版）》读书总结

    这本书是一本很基础的书,但对于刚入前端不久的我来说是一本不错的书,收获还是很大的,对一些基础的东西理解得更加透彻了. 1.DOM即document object model的缩写,文档对象模型,Jav ...

  4. 【读书笔记】读《JavaScript DOM 编程艺术-第2版》

    1.DHTML DHTML曾被认为是HTML/XHTML.CSS和JavaScript相结合的产物,就像今天的HTML5那样,但把这些东西真正凝聚在一起的是DOM.如果真的需要来描述这一过程的话,“D ...

  5. Javascript DOM 编程艺术（第二版）读书笔记——DOM基础

    1.DOM是什么 D=document(文档) O=object(对象) M=Model(模型) DOM又称节点树 一些术语: parent(父)   child(子)   sibling(兄弟)   ...

  6. JavaScript -- JavaScript DOM 编程艺术(第2版)

    /* 渐进增强 平稳退化 网页 结构层(structural layer): HTML 表示层(presentation layer): CSS <link rel="styleshe ...

  7. 《JavaScript DOM 编程艺术 第 2 版》

    第 5 章 最佳实践 平稳退化:现在基本所有带交互的网站都使用 Ajax,SAP 也火起来了,平稳退化真是很难实现了(看到第七章发现我之前的观点是错了) 分离 JS 向下兼容 性能考虑 第 6 章 案 ...

  8. JavaScript DOM编程艺术读后感（1）—— 平稳退化

    最近,在读<JavaScript DOM编程艺术(第二版)>这本书,想着将自己的读后感记录下来,作为记忆吧. 其实我并不是最近才刚开始读这本书的,我读了有一段时间了.我是一名web前端开发 ...

  9. JavaScript DOM编程艺术（第2版）的简单总结

    介绍 JavaScript DOM编程艺术(第2版)主要讲述了 JavaScript.DOM 和 HTML5 的基础知识,着重讲述了 DOM 编程,并通过几个实例演示了具有专业水准的网页开发. 下面介 ...

  10. 《JavaScript Dom 编程艺术》读书笔记-第4章

    我的前端入门第一本书是<JavaScript Dom 编程艺术>,网上查找资料发现前端的入门推荐书籍最受好评的就是这本和<JavaScript 高级程序设计>了.之所以先选这本 ...

随机推荐

  1. MVC4 数据验证、特性、自动属性总结

    最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来. 十年河东十年河西,莫欺少年穷 学无止境,精益求精    最近在做自学MVC,遇到的问题很多,索性一点点总结 ...

  2. docker operation method note

    docker stop script #!/bin/bash CID_LIST=$(docker ps -q | xargs)if [ "$CID_LIST" = "&q ...

  3. Java基础之集合框架——使用堆栈Stack<>对象模拟发牌（TryDeal）

    控制台程序. public enum Rank { TWO, THREE, FOUR, FIVE, SIX, SEVEN, EIGHT, NINE, TEN, JACK, QUEEN, KING, A ...

  4. devexpress13学习系列（一）PDFViewer（1）

    使用这个组件,可以直接在winform里显示pdf文档,不需要另外装软件了. 有这么几个重要的属性: 1.DocumentFilePath:要读取的PDF的文件和路径. 2.CurrentPageNu ...

  5. 使用Navicat for Oracle新建表空间、用户及权限赋予---来自烂泥

    Navicat for Oracle是有关Oracle数据库的客户端工具.通过这个客户端,我们可以图形方式对Oracle数据库进行操作. 说 明我们此次试验的Oracle数据库版本是Oracle 10 ...

  6. MyEclipse下如何安装和使用ibatis插件（网上的资料对于myeclipse8.5根本就是没有用的，所以我还是自己选择了装了一个eclipse，然后将插件装在了eclipse中）

    (1)myeclipse→help→Myeclipse configuration center:点击sofeware选项卡,在Browes Software 下有一个输入框,点击add site按钮 ...

  7. 是否可以继承String类?

    是否可以继承String类? String类是final类故不可以继承

  8. BZOJ1930 [Shoi2003]pacman 吃豆豆

     dp,首先建出图,f[i][j]表示a吃到了i点,b吃到了j点的最大值,转移的时候转移拓扑序小的那一维,如果i拓扑序小于j,那么转移到f[k][j],否则转移到f[i][k],建出的图边数也要优化, ...

  9. java mybatis 框架下多种类型的参数传入到xml问题

    由于公司要求,最近从.net向java 转,然后过程中遇到各种奇葩问题,特在此随记一番. 场景:一个方法中有两个参数,一个List的集合,一个int 类型的参数,最初我在xml的sql参数,无论定义成 ...

  10. Java中的数组操作进阶

    package com.mi.array; import java.util.Arrays; /** * System.arraycopy(i, 0, j, 0, i.length);这种复制会覆盖目 ...