JavaScript(DOM编程一)
在什么位置编写js代码
一般把js代码写在window.onload方法中 执行该方法时页面已经加载完毕，可以获取到所有的dom元素
------------------------------------------------------------------------------------
-------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title> <script type="text/javascript"> //获取元素节点的子节点
window.onload = function(){
var v1=document.getElementsByTagName("li")//根据html文档的标签名称 获得所对应的节点集合
alert(v1.length);//页面将会打印8 var v2=document.getElementById("city");//根据html文档中的id属性得到对应的节点集合
var linode=v2.getElementsByTagName("li");//获取city节点的子节点li的集合
alert(linode.length);//将会打印4 var v3=document.getElementsByName("username");//根据html文档中的name属性来获取对应的节点集合
alert(v3.length);//页面将会打印1 } </script> </head>
<body>
<p>你喜欢哪个城市?</p>
<ul id="city">
<li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul> <br><br>
<p>你喜欢哪款单机游戏?</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul> <br><br>
name: <input type="text" name="username"
id="name" value="atguigu"/>
</body>
</html>
------------------------------------------------------------------
属性节点：某一元素节点中的属性
name: <input type="text" name="username"
id="name" value="哎呦不错哦"/>
window.onload中的代码
//读写属性节点
//1先获取对应的元素节点
var v=document.getElementById("name");
//2.在读取指定的属性值
alert(v.value);//输出 “哎呦不错哦”
//3.改变属性值
v.value="不错你大爷";
运行效果：
单击确定之后
---------------------------------------------------------------------------
读取文本节点：文本节点一定是元素节点的子节点
<p>你喜欢哪个城市?</p>
<ul id="city">
<li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
//读写文本节点
//1获取文本节点所在的元素节点
var v=document.getElementById("bj");
//通过firstchild方法定位到文本节点(因为id为bj的节点 为"<li id="bj" name="BeiJing">北京</li>" 而它只有一个子节点就是 北京)
var v2= v.firstChild;//定位到文本节点
alert(v2);//输出节点的类型
alert(v2.nodeValue);//通过nodeValue方法输出节点的内容 北京
v2.nodeValue="北京2"//改变值
运行效果：
--------------------------------------------------------------
子节点的概念
var v=document.getElementById("city");//获取#city 下的所有子节点
//通过ChildNodes方法可以得到节点的所有子节点
var v2=v.childNodes;
alert(v2);//打印v2的类型 是一个集合数组 表示该节点下的所有子节点
alert(v.childNodes.length);//将会该集合的长度 打印9
var v3=v.firstChild;//得到第一个子节点
var v4= v.lastChild;//得到最后一个子节点
alert(v3);//输出该节点类型
alert(v4);
运行效果：
思考为什么子节点是9个呢
修改程序：
少了一个文本节点
代码不变：再次执行：
---------------------------------------------------------------------------------------
---------------------------------------------------------------
小实验：用户每次单击文本都要在屏幕输出点击文本值
<p>你喜欢哪个城市?</p>
<ul id="city"><li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul> <br><br>
<p>你喜欢哪款单机游戏?</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
var vs=document.getElementsByTagName("li");
//alert(vs.length);
for(var i=0;i<vs.length;i++){
// 为每个li节点添加点击事件
vs[i].onclick=function(){
//得到当前操作的li节点
v1=this.firstChild;//这里不能写vs[i] 只能写this 表示当前的li节点 因为当用户点击的时候i的值每次都是8
alert(v1.nodeValue);
alert(i);//验证每次单击文本时 i的值 结果是：无论单击那个文本 打印的都是8
}
}
程序运行结果：
单击北京：
单击魔兽
这就是为什么只能使用this而不能使用数组下标的原因
-------------------------------------------------------------
小实验：单击文本 ，文字信息改变，再次单击，恢复单击之前的效果
<ul id="city"><li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul> <br><br>
<p>你喜欢哪款单机游戏?</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
var nodetext=document.getElementsByTagName("li");//得到所有的li节点
for(var i=0;i<nodetext.length;i++){//循环遍历
nodetext[i].onclick=function(){//为每个节点设置点击事件
var v2=this.firstChild.nodeValue;//得到文本值
var zz=/\^\^+/g;//正则表达式
if(zz.test(v2)){
// alert(v2+"1");
v2=v2.replace(zz,"");
}else{
// alert(v2+"2");
v2="^^"+v2;
}
this.firstChild.nodeValue=v2;//重新设定当前正在操作的元素值
}
}
运行效果：
单机之前：
逐个单击4个文本：
再次单击3个文本：
----------------------------------------------------------------
nodeValue,nodeType,nodeName这三个属性的测试
元素节点测试：
<p>你喜欢哪个城市?</p>
<ul id="city"><li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
//任何一个节点都有 nodeName,nodeType nodeValue这三个属性
//1.元素节点的这三个属性值测试
var v=document.getElementById("bj");//获得元素节点 li
alert(v.nodeName);//节点名称：li
alert(v.nodeType);//节点类型 元素节点：1
alert(v.nodeValue);//元素节点的nodeValue始终为null
运行结果：
-------------------------------------------------------------------
属性节点测试：
元素节点.getAttirbuteNode("属性值")
先看下面的代码：
var v=document.getElementById("name");//获取id为name的元素节点
alert(v.nodeType);//打印1 表示元素节点
var v2= v.getAttributeNode("name");//获得该元素节点下的属性节点
alert(v2.nodeType);//打印2 表示属性节点
// var v=document.getElementById("name"); var v2= v.getAttributeNode("name") 和下面的等价
var v3=document.getElementById("name").getAttributeNode("name");//获得指定的属性节点
alert(v3.nodeType);
运行结果：
先获取的是元素节点，所以打印1，后来获取的是元素节点下的属性节点，所以打印2，可以使用连缀的方式 ，所以第三条语句 获取的是属性节点 所以打印3
所以观察下面的代码：
//任何一个节点都有 nodeName,nodeType nodeValue这三个属性
//1.属性节点的这三个属性值测试
var v=document.getElementById("name").getAttributeNode("name");//获得指定的属性节点 元素节点中name属性
alert(v.nodeName);//属性节点的节点名 该节点表示是哪个属性 name 即通过该属性 获得了元素节点中的该属性节点
alert(v.nodeType);//节点类型 是属性节点 所以打印2
alert(v.nodeValue);//属性节点name属性中的值：username var v2=document.getElementById("name").getAttributeNode("id");//获得指定的属性节点 元素节点中id属性
alert(v2.nodeName);//属性节点的节点名 该节点表示是哪个属性 id 即通过该属性 获得了元素节点中的该属性节点
alert(v2.nodeType);//节点类型 是属性节点 所以打印2
alert(v2.nodeValue);//属性节点id属性中的值：name var v3=document.getElementById("name").getAttributeNode("value");//获得指定的属性节点 元素节点中value属性
alert(v3.nodeName);//属性节点的节点名 该节点表示是哪个属性 value 即通过该属性 获得了元素节点中的该属性节点
alert(v3.nodeType);//节点类型 是属性节点 所以打印2
alert(v3.nodeValue);//属性节点value属性中的值：哎呦不错哦 var v4=document.getElementById("name").getAttributeNode("type");//获得指定的属性节点 元素节点中type属性
alert(v4.nodeName);//属性节点的节点名 该节点表示是哪个属性 type 即通过该属性 获得了元素节点中的该属性节点
alert(v4.nodeType);//节点类型 是属性节点 所以打印2
alert(v4.nodeValue);//属性节点type属性中的值：text
打印结果：
-------------
-------------
-------------
-------------------------------------------------------------
文本节点测试：
//任何一个节点都有 nodeName,nodeType nodeValue这三个属性
//1.属性节点的这三个属性值测试
var v=document.getElementById("bj");//获得元素节点
var v2= v.firstChild;//获得文本节点 因为这个节点中只有一个子节点 所以使用lastChild也行
//上面两句和var v2=document.getElementById("bj").firstChild;等价
alert(v2.nodeName);//#text
alert(v2.nodeType);//文本节点类型 打印3
alert(v2.nodeValue);//文本值 北京
运行效果：
----------------------------------------------
nodeType nodeName 是只读的 而nodeValue是可以改变的
//nodeType nodeName 是只读的 而nodeValue是可以改变的 这三个属性值 只有文本节点使用nodeValue读写值 使用的最多
var v=document.getElementById("bj").firstChild;
alert(v.nodeValue);
v.nodeValue="北京2";//改变值
运行效果：
运行之前：
单击确定之后：
*****************************************************
总结一：
获取元素节点：
window.onload = function(){
//获取元素节点的三种方式
//1.通过id的名称来获取 getElementById
//2.通过标签名称来获取 getElementsByTagName
//3.通过标签中的name属性值 getElementsByName
var v=document.getElementById("bj");
alert(v.nodeType);//打印1
//该方法会返回一个数组
var v2=document.getElementsByTagName("p");//获取文档中的p标签 因为是有两个p表签 所以v2是一个数组的形式(即使只有一个p标签返回的仍然是一个数组) 那么使用v2[0]获得第一个p标签
alert("v2是："+v2+"它的长度："+v2.length);
v4=v2[0];//这个标签是一个元素标签
alert(v4.nodeType);//打印1
//这个方法也返回一个数组
var v3=document.getElementsByName("username");//input 表签中有name属性 该方法返回一个数组 尽管只有一个input属性 但仍然返回数组 所以 v3[0]即为获得元素标签
alert("v3是："+v3+"它的长度："+v3.length);
var v5=v3[0];
alert(v5.nodeType);//打印1
}
运行效果：
----------------------
---------------------
--------------------------------------
获取子节点方式：
-----------------------------------
读写文本节点
---------------------------------------
属性节点：
var v=document.getElementsByName("username")[0];//通过属性名称 获得的是一个元素节点的集合 而不是属性节点 因为只有一个元素 所以下标0即为得到的元素节点
//直接通过节点.属性名 读写属性值 而文本节点的值 则是先得到元素节点 然后得到文本节点 最后通过nodevalue得到文本值
alert(v.value);//打印该元素节点中 value属性中的具体值 “哎呦不错哦”
//改变它的值
v.value="你好";
运行效果：
单击确定之后：
JavaScript(DOM编程一)的更多相关文章
- 读书笔记：JavaScript DOM 编程艺术（第二版）
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
- JavaScript DOM 编程艺术·setInterval与setTimeout的动画实现解析
先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interv ...
- JavaScript DOM 编程艺术（第2版）读书笔记（1）
JavaScript 简史 JavaScript 是Netscape公司与Sun公司合作开发的.在 JavaScript 1.0发布时,Netscape Navigator主宰着浏览器市场.微软在推出 ...
- JavaScript DOM编程艺术学习笔记（一）
嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推 ...
- JavaScript DOM编程艺术第一章：JavaScript简史
本系列的博客是由本人在阅读<JavaScript DOM编程艺术>一书过程中做的总结.前面的偏理论部分都是书中原话,觉得有必要记录下来,方便自己翻阅,也希望能为读到本博客的人提供一些帮助, ...
- 《JavaScript dom 编程艺术》 placeholder占位符IE8兼容办法。
在<JavaScript dom 编程艺术>第11章学来的. 相对于用JavaScript替换文本框的提示语句 <!DOCTYPE html> <html lang=&q ...
- 《javascript dom编程艺术》笔记（一）——优雅降级、向后兼容、多个函数绑定onload函数
刚刚开始自学前端,如果不对请指正:欢迎各位技术大牛指点. 开始学习<javascript dom编程艺术>,整理一下学习到的知识.今天刚刚看到第六章,记下get到的几个知识点. 优雅降级 ...
- 《JavaScript DOM 编程艺术》
前几天京东买了一本书,在豆瓣上好评如潮,买下了啃一啃,书名<JavaScript DOM 编程艺术>,在好好深造一下javaScript.一边啃,一边敲.当然应该要做好笔记.一些简单的就看 ...
- JavaScript DOM编程艺术读后感（1）—— 平稳退化
最近,在读<JavaScript DOM编程艺术(第二版)>这本书,想着将自己的读后感记录下来,作为记忆吧. 其实我并不是最近才刚开始读这本书的,我读了有一段时间了.我是一名web前端开发 ...
- Java web JavaScript DOM 编程
JavaScript DOM 编程 (1).DOM概述及分类 (2).DOM结构模型:XML DOM 和 HTML DOM 关系? (3).结点,结点树,结点属性与方法? 1.DOM是什么? d ...
随机推荐
- apple 团队电话
back 苹果电话:400 670 18552 这个是国内能打通的
- Maven学习--------基础2
继续学习Maven. 4.2 变量 1) 问:怎样使用变量替换?项目中的某个配置文件比方jdbc.properties使用了一些pom中的变量,怎样在公布中使用包括真实内容的终于结果文件? 答:使用资 ...
- ADO.NET Entity Framework Extensions
一.情景 如果你的项目中有返回多结果集的存储过程. 如果你的项目要和老项目中的ADO.Net共用事务. 如果你要动态的创建数据库的表. 但是你还是希望使用Entity Framework.那么继续往下 ...
- C语言高速入门系列(一)
C语言高速入门系列(一) 本系列引言: 本教程的宗旨是将C语言入门的内容进行关键知识点的提纯,将一些笼统的废话去除; 再进行压缩,然后将本章的关键知识点做成路线图的,能够更加方便地掌握学习的方向; ...
- GNU TeXmacs 1.99.8 发布，所见即所得科学编辑器（看看老实的GUI）
GNU TeXmacs 1.99.8 已发布,这是一个支持各种数学公式的所见即所得编辑器,可以用来编辑文本.图形.数学.交互内容,它的界面非常友好,并且内置高质量的排版引擎. 更新内容: bug 修复 ...
- oc19--继承1
// // Phone.h // day13 #import <Foundation/Foundation.h> // 被继承的这个类我们称之为父类/ 超类 @interface Phon ...
- php basic syntax
php basic syntax PHP(Hypertext Preprocessor,超文本预处理器). 一.PHP入门 1.指令分隔符“分号” 语义分为两种:一种是在程序中使用结构 ...
- Spark MLlib介绍
Spark MLlib介绍 Spark之所以在机器学习方面具有得天独厚的优势,有以下几点原因: (1)机器学习算法一般都有很多个步骤迭代计算的过程,机器学习的计算需要在多次迭代后获得足够小的误差或者足 ...
- [HTML] 条件注释判断浏览器
<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--><!--[if IE]> 所有的IE可识别 <![e ...
- String不可变性
今天分析一下String,String有很多实用的特性,比如说“不可变性”,是工程师精心设计的艺术品.用final就是拒绝继承,防止内部属性或方法被破坏. 一,什么是不可变? String不可变很简单 ...