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 ...
随机推荐
- 2015多校联合训练赛 hdu 5308 I Wanna Become A 24-Point Master 2015 Multi-University Training Contest 2 构造题
I Wanna Become A 24-Point Master Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 ...
- hdu 1002 A + B Problem II（大正整数相加）
代码: #include<cstdio> #include<cstring> #define Min(a,b) ((a)<(b)?(a):(b)) using names ...
- luogu2261 [CQOI2007] 余数之和
题目大意 求 \[\sum_{i=1}^{n}(k\mod i)\] \(n,k\leq 10^9\). 题解 先只考虑\(n\leq k\)的情况. \[\sum_{i=1}^{n}(k\mod i ...
- nyoj--635--Oh, my goddess（dfs）
Oh, my goddess 时间限制:3000 ms | 内存限制:65535 KB 难度:3 描述 Shining Knight is the embodiment of justice an ...
- 【POJ 1830】 开关问题
[题目链接] http://poj.org/problem?id=1830 [算法] 列出异或方程组,用高斯消元求解 [代码] #include <algorithm> #include ...
- TCP心跳包
所谓的心跳包就是客户端定时放送简单的信息给服务器端,告诉它我还在而已.代码就是每 隔几分钟发送一个固定信息给服务器端,服务器端回复一个固定信息.如果服务器端几分钟后没有收到客户端信息则视客户端断开.比 ...
- php obstart
PHP ob_start() 函数介绍 2010-03-29 php ob_start 与 ob_end_flush() 是 php 的缓冲输出函数. ob_start([string output_ ...
- 43.qt通过qss自定义外观
样式: 文件格式类型: candy.qss /* R1 */ QDialog { /*设置背景图片*/ background-image: url(:/images/background.png); ...
- html页面中苹果手机遇到数字换行、样式变形
在做项目中遇到过几回苹果手机读取html页面时,如果出现一串数字,html页面会折行.变形,最后发现是因为苹果手机的打电话功能,如果html上有数字的话,苹果手机会以为是电话号码,就会改变其样式只需要 ...
- .net 获取当前网页的的url
正确的方法是:HttpContext.Current.Request.Url.PathAndQuery1.通过ASP.NET获取 如果测试的url地址是http://www.test.com/test ...