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 ...
随机推荐
- linux程序设计——多线程（第十二章）
12.8 多线程 之前,总是让程序的主线程只创建一个线程.这节将演示怎样在同一个程序中创建多个线程,然后怎样以不同于其启动顺序将它们合并在一起.此外,还演示多线程编程时easy出现的时序问题. ...
- Narrow Art Gallery
Time Limit: 4000ms, Special Time Limit:10000ms, Memory Limit:65536KB Total submit users: 11, Accepte ...
- 设计模式C++实现——组合模式
模式定义: 组合模式同意你将对象组合成树形结构来表现"总体/部分"层次结构.组合能让客户以一致的方式处理个别对象以及对象组合. 这个模式可以创建一个树形结构,在同一个结构中处理嵌套 ...
- Uva1335 二分+贪心
/* 奇数怎么搞呢 二分到答案怎么judge呢 贪心怎么贪呢 假设贪心方案是 前两个挨着取 后面的能靠前就靠前 这样子似乎保证了ans最min 但是不管贪的对不对 操作起来时间GG 而且 如果真的这样 ...
- luogu1771 方程的解
题目大意 对于不定方程a1+a2+…+ak-1+ak=g(x),其中k≥2且k∈N,x是正整数,g(x)=x^x mod 1000(即x^x除以1000的余数),x,k是给定的数.我们要求的是这个不定 ...
- EOJ 2822 内存显示
一个 int 类型变量或 double 类型变量在连续几个字节的内存中存放.读取数值时,当数值中包含小数点时类型为 double,否则类型为 int.将读入的数值存放在 int 类型变量或 doubl ...
- TestNG环境搭建以及框架初识
TestNG的英文为Test Next Generation, 听上去好像下一代测试框架已经无法正常命名了的样子,哈哈,言归正传,啥是TestNG呢,它是一套测试框架,在原来的Junit框架的思想基础 ...
- php pdo操作
PDO(PHP Data Object) 是PHP 5 中加入的东西,是PHP 5新加入的一个重大功能,因为在PHP 5以前的php4/php3都是一堆的数据库扩展来跟各个数据库的连接和处理,什么 p ...
- SVO在ROS下的配置与运行
最近在做实验的时候,需要配置SVO,下面讲讲其中的过程以及遇到的问题: 首先说明配置环境:Ubuntu 14.04 + ROS indigo,ROS的安装我参考了ROS的官网上给出的教程:http:/ ...
- Centos7 docker nginx容器搭建
一.安装docker http://www.cnblogs.com/WJ--NET/p/8553807.html 二.创建Dockerfile #创建文件夹 mkdir centos_nginx cd ...