1、CSS： 继承是CSS技术中的一项强大功能，节点树上的各个元素将继承其父元素的样式属性。

2、3种获取DOM元素方法：getElementById返回一个对象，getElementsByTagName、getElementsByClassName返回对象数组

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta 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 class="sale">Cheese</li>

            <li class="sale important">Milk</li>

        </ul>

        <script type="text/javascript">

            console.log(document.getElementById("purchases"));

            console.log("--------------------------------------");

            console.log(document.getElementsByTagName("li"));//是标签名称，不是name属性

            console.log("--------------------------------------");

            console.log(document.getElementsByTagName("*"));

            console.log("--------------------------------------");

            // console.log(document.getElementsByTagName("*i"));//不是这样写

            console.log("--------------------------------------");

            //下面是先根据Id找到元素对象，然后在该元素对象内找li标签

            var shopping=document.getElementById("purchases");

            console.log(shopping.getElementsByTagName("li"));

            console.log("--------------------------------------");

            console.log(document.getElementsByClassName("sale"));

            console.log("--------------------------------------");

            //获取同时含有多个类的元素，类之间用空格隔开

            console.log(document.getElementsByClassName("important sale"));

            console.log("--------------------------------------");

            //在特定区域根据类名找li标签

            var shopping=document.getElementById("purchases");

            console.log(shopping.getElementsByClassName("sale"));

        </script>

    </body>

</html>

3、getElementsByClassName是HTML5中的，低版本浏览器不支持，下面提供兼容性方法

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;

                }

            }

4、使用DOM提供的nodeValue属性获取或修改值

假如获取和修改上面页面p标签内容显示

首先获取到p元素节点var pElementNode=document.getElementsByTagName("p")[0]，因为只有一个p标签，所以取第一个

再获取p标签的文本节点var pTextNode=pElementNode.childNodes[0]或var pTextNode=pElementNode.firstChild，因为p标签内只有一个文本节点（如下会有两个文本节点<p>第一个文本节点<br/>第二个文本节点</p>）

获取文本节点内容pTextNode.nodeValue;//Don't forget to buy this stuff.

修改文本节点内容pTextNode.nodeValue="新赋值ppppppp";

《JavaScript DOM编程艺术》笔记一的更多相关文章

  1. JavaScript高级程序设计笔记之面向对象

    说起面向对象,大部分程序员首先会想到 类 .通过类可以创建许多具有共同属性以及方法的实例或者说对象.但是JavaScript并没有类的概念,而且在JavaScript中几乎一切皆对象,问题来了,Jav ...

  2. javascript高级程序设计--笔记01

    概述 JavaScript的实现包含三个部分: 1  核心(ECMAScript)   提供核心语言功能 2  文档对象模型(DOM)  一套提供了访问以及操作网页内容的API 3  浏览器对象模型( ...

  3. javascript事件小结（事件处理程序方式）--javascript高级程序设计笔记

    1.事件流:描述的是从页面中接收事件的顺序. 2.事件冒泡:IE的事件流叫做事件冒泡,即事件开始从具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到不具体的节点(文档). 3.事件捕获 ...

  4. JavaScript高级程序设计笔记（一）

    ---恢复内容开始--- 前三章为基础知识,为了方便以后查看,所以比较啰嗦.这里对函数的基本操作没有记录. 1.JavaScript的实现 虽然 JavaScript 和 ECMAScript 通常都 ...

  5. JavaScript高级程序设计笔记 事件冒泡和事件捕获

    1.事件冒泡 要理解事件冒泡,就得先知道事件流.事件流描述的是从页面接收事件的顺序,比如如下的代码: <body> <div> click me! </div> & ...

  6. <javascript高级程序设计>笔记

    1.要讲一个值转换成其对应的Boolean类型 ,可以调用转型函数Boolean(). var message=“hello world!”; var messageAsBoolean=Boolean ...

  7. javaScript高级程序设计笔记 2

    Undefinde Null Boolean Number String    基本类型 Object    引用类型 只有引用类型才能动态的添加属性 赋值基本类型和引用类型也不相同,复制的基本类型的 ...

  8. javaScript高级程序设计笔记 1

    核心  ECMAScript 文档对象模型  DOM 浏览器对象模型 BOM 延迟脚本  defer typeof操作符      判断字符类型  返回   undefined  boolean  s ...

  9. Javascript高级程序设计笔记 <第五章> 引用类型

    一.object类型 创建object实例的方式有两种: //第一种使用new操作符跟构造函数 var person= new Object(); person.name="小王" ...

  10. Javascript高级程序设计笔记(很重要尤其是对象的设计模式与继承)

    var obj = {'a':'a'}; var fun = function (){} console.log(typeof obj);//object console.log(typeof fun ...

随机推荐

  1. 【POJ 2406】Power Strings 连续重复子串

    看的<后缀数组——处理字符串的有力工具>这篇论文,在那里这道题是用后缀数组实现的,复杂度为$O(nlogn)$,很明显长度为$2×10^6$的数据会TLE,所以必需得用复杂度为$O(n)$ ...

  2. EF(Entity Framework)发生错误”正在创建模型，此时不可使用上下文“的解决办法。 正在创建模型，此时不可使用上下文。如果在 OnModelCreating 方法内使用上下文或如果多个线程同时访问同一上下文实例，可能引发此异常。请注意不保证 DbContext 的实例成员和相关类是线程安全的。 临时解决了这个问题，在Context的构造函数中，禁用了自动初始化：

    解决方案: 禁止上下创建. 修改.删除,默认为true public DataDbContext() : base("name=DataDbContext") {  this.Da ...

  3. 【LintCode】计算两个数的交集（二）

    问题分析: 用两个指针分别遍历即可. 问题求解: public class Solution { /** * @param nums1 an integer array * @param nums2 ...

  4. 算法与数据结构之折半查找（C语言）

    #include <stdio.h> #include<stdlib.h> int binsearch(int x,int v[],int n);//函数声明 int main ...

  5. 集成IJKplayer视频直播框架

    ijkplayer 是一款做视频直播的框架, 基于ffmpeg, 支持 Android 和 iOS, 网上也有很多集成说明, 但是个人觉得还是不够详细, 在这里详细的讲一下在 iOS 中如何集成ijk ...

  6. exit(0)、exit(1)、exit(-1)的区别

    exit(0) - 正常退出 exit(1) - 异常退出(除0外,其他值均为异常退出)

  7. python3下的paramiko 安装

    环境为centos6.7 python3为源码编译安装的,系统自带的python2 可以直接使用paramiko模块,但是在py3的环境下加载出错,所有需要安装新的paramiko 模块: 上了par ...

  8. 一次性下载CVPR2016的所有文章

    wget --no-clobber --convert-links --random-wait -r -p -E -e robots=off -U mozilla http://www.cv-foun ...

  9. 【BZOJ-4690】Never Wait For Weights 带权并查集

    4690: Never Wait for Weights Time Limit: 15 Sec  Memory Limit: 256 MBSubmit: 88  Solved: 41[Submit][ ...

  10. 【BZOJ-2342】双倍回文 Manacher + 并查集

    2342: [Shoi2011]双倍回文 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 1799  Solved: 671[Submit][Statu ...