《JavaScript DOM编程艺术》笔记一
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编程艺术》笔记一的更多相关文章
- JavaScript高级程序设计笔记之面向对象
说起面向对象,大部分程序员首先会想到 类 .通过类可以创建许多具有共同属性以及方法的实例或者说对象.但是JavaScript并没有类的概念,而且在JavaScript中几乎一切皆对象,问题来了,Jav ...
- javascript高级程序设计--笔记01
概述 JavaScript的实现包含三个部分: 1 核心(ECMAScript) 提供核心语言功能 2 文档对象模型(DOM) 一套提供了访问以及操作网页内容的API 3 浏览器对象模型( ...
- javascript事件小结（事件处理程序方式）--javascript高级程序设计笔记
1.事件流:描述的是从页面中接收事件的顺序. 2.事件冒泡:IE的事件流叫做事件冒泡,即事件开始从具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到不具体的节点(文档). 3.事件捕获 ...
- JavaScript高级程序设计笔记（一）
---恢复内容开始--- 前三章为基础知识,为了方便以后查看,所以比较啰嗦.这里对函数的基本操作没有记录. 1.JavaScript的实现 虽然 JavaScript 和 ECMAScript 通常都 ...
- JavaScript高级程序设计笔记 事件冒泡和事件捕获
1.事件冒泡 要理解事件冒泡,就得先知道事件流.事件流描述的是从页面接收事件的顺序,比如如下的代码: <body> <div> click me! </div> & ...
- <javascript高级程序设计>笔记
1.要讲一个值转换成其对应的Boolean类型 ,可以调用转型函数Boolean(). var message=“hello world!”; var messageAsBoolean=Boolean ...
- javaScript高级程序设计笔记 2
Undefinde Null Boolean Number String 基本类型 Object 引用类型 只有引用类型才能动态的添加属性 赋值基本类型和引用类型也不相同,复制的基本类型的 ...
- javaScript高级程序设计笔记 1
核心 ECMAScript 文档对象模型 DOM 浏览器对象模型 BOM 延迟脚本 defer typeof操作符 判断字符类型 返回 undefined boolean s ...
- Javascript高级程序设计笔记 <第五章> 引用类型
一.object类型 创建object实例的方式有两种: //第一种使用new操作符跟构造函数 var person= new Object(); person.name="小王" ...
- Javascript高级程序设计笔记(很重要尤其是对象的设计模式与继承)
var obj = {'a':'a'}; var fun = function (){} console.log(typeof obj);//object console.log(typeof fun ...
随机推荐
- extjs store的操作
先来个声明,看着不错,贴过来的,没都测试过. Store.getCount()返回的是store中的所有数据记录,然后使用for循环遍历整个store,从而得到每条记录. 除了使用getCount() ...
- [Bundling and Minification ] 一、如何绑定
绑定和压缩(缩小)是ASP.NET 4.5出现的用来提高程序性能的两个重要的技术.绑定(Bundling)是将多个文件合并为一个文件,压缩(Minification)主要是将文件缩小,如Js .CSS ...
- Java反射机制学习与研究
Java反射机制:可以获取正在运行时的Java对象. 1.判断运行时对象对象所属的类. 2.判断运行时对象所具有的成员变量和方法. 3.还可以调用到private方法,改变private变量的值. S ...
- Android Studio 优秀插件汇总
第一部分 插件的介绍 Google 在2013年5月的I/O开发者大会推出了基于IntelliJ IDEA java ide上的Android Studio.AndroidStudio是一个功能齐全的 ...
- mysql 表被锁处理方案
1. 查询锁表信息 当前运行的所有事务 select * from information_schema.innodb_trx 当前出现的锁 select * from information_sch ...
- 单例模式（Singleton Pattern）
意图 保证一个类仅有一个实例,并提供一个该实例的全局访问点 可将一个实例扩展到n个实例.限定某类最多只能创建n个实例. 双重锁定实现单例模式 C# public sealed class Single ...
- 【Codeforces 723D】Lakes in Berland （dfs）
海洋包围的小岛,岛内的有湖,'.'代表水,'*'代表陆地,给出的n*m的地图里至少有k个湖,求填掉面积尽量少的水,使得湖的数量正好为k. dfs找出所有水联通块,判断一下是否是湖(海水区非湖).将湖按 ...
- asp.net mvc中应用缓存依赖文件（xml）的一个小demo
最近项目中加了一个通用模块,就是根据一些特殊的tag,然后根据处理这些tag在同一个视图中加载不同的model(个人觉得此功能无任何意义,只是把不同的代码放在了同一个View中). 我的处理思路是这样 ...
- 高级语言虚拟机的一点理解，对比.NET和Java平台
最近学习了一些高级语言虚拟机的知识,在此对.NET平台和java平台做一个简单的比较.对java平台已经很熟了,所以此处只介绍.NET平台下的一些概念. 一.CLI 通用语言基础架构(Common L ...
- 【BZOJ-3578】GTY的人类基因组计划2 set + map + Hash 乱搞
3578: GTY的人类基因组计划2 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 367 Solved: 159[Submit][Status][ ...