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. JS模块规范 前端模块管理器

    一:JS模块规范(为了将js文件像java类一样被import和使用而定义为模块, 组织js文件,实现良好的文件层次结构.调用结构) A:CommonJS就是为JS的表现来制定规范,因为js没有模块的 ...

  2. ueditor1.3.6jsp版在struts2应用中上传图片报"未找到上传文件"解决方案

    摘要: ueditor1.3.6jsp版在struts2应用中上传图片报"未找到上传文件"解决方案 在struts2应用中使用ueditor富文本编辑器上传图片或者附件时,即使配置 ...

  3. 2016年第2周读书笔记与工作笔记 scrollIntoView()与datalist元素

    这一周主要是看了html5网页开发实例与javascript 高级程序设计,供以后翻阅查找.  html5网页开发实例第1章与第二章的2.1部分: 第1章内容: html5在w3c的发展史. 浏览器的 ...

  4. .Net Core 1.0.0正式版安装及示例教程

    使用VS Code 从零开始开发调试.NET Core 1.0 RTM. .NET Core 是一个开源的.跨平台的 .NET 实现. VS Code 全称是 Visual Studio Code,V ...

  5. poj2186 强连通缩点

    Popular Cows Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 29773   Accepted: 12080 De ...

  6. ajax技术应用（转）

    ajax简介 AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术.Ajax不 ...

  7. Visual Studio Code 添加设置代码段(snippet)

    从VSCode发布以来就在关注,最近已经更新到版本0.10.8,已经支持了插件功能.日常使用编辑器已经由Sublime Text迁移到了VSCode.使用中遇到了这个问题,在网上也没搜到解决方案.记录 ...

  8. C# 图片超过指定大小将压缩到指定大小不失真

    using System;using System.Collections.Generic;using System.Drawing;using System.Drawing.Drawing2D;us ...

  9. 【CQOI2016纯净整合】BZOJ-4519~4524 （6/6）

    感觉CQOI的难度挺好的,比较贴近自身,所以拿出来做了一下 CQOI2016 Day1 T1:不同的最小割 涉及算法:最小割/分治/最小割树 思路: 最小割树裸题,直接分治最小割,记录下答案,最后排序 ...

  10. 洛谷P2246 SAC#1 - Hello World（升级版）

    题目背景 T1答案要mod1000000007(10^9+7),请重新提交,非常抱歉! 一天,智障的pipapi正在看某辣鸡讲义学程序设计. 题目描述 在讲义的某一面,他看见了一篇文章.这篇文章由英文 ...