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 ...
随机推荐
- [LeetCode]Wildcard Matching 通配符匹配（贪心）
一開始採用递归写.TLE. class Solution { public: bool flag; int n,m; void dfs(int id0,const char *s,int id1,co ...
- JAVA小程序：和电脑猜拳
import java.util.Scanner; import java.util.Random; public class Hello { public static int judge ...
- ubuntu终端白屏的解决方法
昨天突发奇想的想为teminal设置一个背景, 这样.... 不过过了一会就高兴不起来了,,,,终端白屏!好吧,现在我页没办法彻底解决, 不过暂时的一个方法是可以把首选项->背景->背景图 ...
- Node.js：Strea
ylbtech-Node.js:Stream 1.返回顶部 1. Node.js Stream(流) Stream 是一个抽象接口,Node 中有很多对象实现了这个接口.例如,对http 服务器发起请 ...
- Node.js：Buffer
ylbtech-Node.js:Buffer 1.返回顶部 1. Node.js Buffer(缓冲区) JavaScript 语言自身只有字符串数据类型,没有二进制数据类型. 但在处理像TCP流或文 ...
- FH Admin
http://www.360doc.com/content/14/0713/08/8072791_394027312.shtml
- [源码管理] Windows下搭建SVN服务器
前文所述SVN客户端使用的时候,用的SVN服务器通常为外部,例如Google Code的服务器,不过,做为一个程序开发人员,就算自己一个人写程序,也应该有一个SVN版本控制系统,以便对开发代码进行有效 ...
- C++中值传递（pass-by-value）和引用传递（pass-by-reference）
1.pass-by-value的情况: 缺省情况C++以pass-by-value(继承C的方式)传递对象至(或来自)函数.函数参数都是以实际参数的复件为初值,调用端所获得的也是函数返回值的一个复件, ...
- C# 开放式并发冲突报错处理
1.调用DataSet.GetChanges()获取数据源中改变的数据 var data = ViewData.GetChanges() as ReleaseData; 2.为新增的数据 data 加 ...
- js与jquery基础知识对比（一）---2017-05-06
用表格做的,想要对比的内容一目了然,红色部分为重点 js jquery 取元素 id: document.getElementById("aa"); 取到的是dom对象 cla ...