JavaScript

JavaScript基础知识整理

全称叫做JavaScript,简称叫做JS

是一门专门嵌入在浏览器中执行的脚本语言

JS运行在浏览器中,负责实现网页中的动画效果

或者是实现表单校验等功能

JS特点和优势(了解)

1、特点:

(1)JS是一门直译式的语言(边解释边执行,没有编译的过程)

(2)JS是一门基于对象的语言(JS中没有类的概念,也没有编译的过程)

JS中是有对象的(内置对象、自定义对象)

(3)JS是一门弱类型的语言

在java中:
String s = "abc";
int n = 100;JS:
var s = 100;
s = "abc";
s = true;
s = [];
s = function(){}

2、优势:

(1)JS具有良好的交互性

(2)JS具有一定的安全性(只能在浏览器内部运行,不能访问浏览器以外的资源)

(3)JS具有跨平台性(Java 虚拟机 JS 浏览器)

( JS语言是跨平台的,是因为有浏览器,但浏览器不跨平台

Java语言是跨平台的,是因为有虚拟机,但虚拟主机不跨平台 )

JavaScript语法

注释格式

JS的注释符号和Java的注释符号相同,如下:

// 单行注释内容
/* 多行注释内容 */

数据类型

1、基本数据类型

(1)数值类型(number)

在JS中,所有的数值在底层都是浮点型,但是在处理和显示的过程中会自动的和整型进行转换。

例如:2.4+3.6=6
特殊值:Infinity(无穷大) / -Infinity(负无穷大) / NaN(非数字)

(2)字符串类型(string)

在JS中,字符串类型属于基本数据类型,字符串常量可以使用单引号或者使用双引号引起来。例如:

var s1 = "Hello JS";
var s2 = 'Hello JS';

另外,JS中字符串类型有对应的包装对象(String),在需要时会自动的和包装对象进行转换。

var s1 = "Hello JS"; //基本数据类型 string
var s2 = new String("Hello JS"); //对象 Object

s1.valueOf();//将s1转成对象再调用valueOf函数,获取对象的内容 “Hello JS”

(3)布尔类型(boolean)

布尔类型的值有两个,分别为true和false。

(4)undefined

undefined类型的值只有一个,就是undefined,表示变量未定义(但不是指对象没有声明)。声明未赋值

是指声明了变量,但没有为变量赋值,该变量的值就是undefined。

/* 1.undefined类型 */
var x;
alert( x ); //undefined
alert( y ); //抛异常

(5)null

null类型的值也只有一个,就是null,表示空值。

可以作为函数的返回值,表示函数返回的是一个空的对象。

注意:null和undefined类型的变量是不能调用函数或属性的,会抛异常!

2、复杂数据类型

主要指对象(JS的内置对象、自定义的对象、函数、数组)

变量声明

JS中是通过var关键字声明变量,声明的变量是不区分类型,可以指向任意的数据。例如:

var x = 100;
x = "abc";
x = true;
x = [];
x = function(){}
x = new Object();
x = {};

另外,JS中多次声明同名的变量不会出现语法错误,例如:

/* 2.变量的定义 */
var s = "Hello"; // var s; s="Hello";
var s = 123; // var s; s=123;
alert( s ); //123

JS运算符

JS和Java中的运算符大致相同,例如:

算术运算符: +-*/%++--
赋值运算符: =+=-=*=/=%=
比较运算符: ==!=>>=<<=
位运算符: &|
逻辑运算符: &&||
前置逻辑运算符: ! (not)
三元运算符: 表达式 ? 表达式 : 表达式
。。。

JS语句

JS中的语句和Java中的语句也大致相同

1、if分支结构

if分支结构用于基于不同的条件来执行不同的动作。语法结构如下:

if (条件 1){
	当条件 1true 时执行的代码
}else if (条件 2){
	当条件 2true 时执行的代码
}else{
	当条件 1 和 条件 2 都不为 true 时执行的代码
}

2、switch语句

使用 switch 语句来选择要执行的多个代码块之一。语法结构如下:

switch(n){
	case 1:
		执行代码块 1
		break;
	case 2:
        执行代码块 2
		break;
    ...
	default:case 1case 2 不同时执行的代码
}

执行原理:首先设置表达式 n(通常是一个变量)。随后表达式的值会与结构中的每个
case 的值做比较。如果存在匹配,则与该 case 关联的代码块会被执行。请使用 break
来阻止代码自动地向下一个 case 运行。

3、for循环语句 – 循环代码块一定的次数

for 循环的语法结构如下:

for (语句 1; 语句 2; 语句 3){
	被执行的代码块
}

4、while循环 – 在指定条件为真时循环执行代码块

JS中while循环也分为while和do/while循环,下面为while循环语法结构:

while (条件){
	需要执行的代码
}

while 循环会在指定条件为真时循环执行代码块。

案例1:if分支案例: 接收用户输入的成绩,判断成绩所属的等级

80~100(包括80,也包括100) 优秀
60~80(包括60,但不包括80) 中等
0~60(包括0,但不包括60) 不及格

其他值 输入有误

代码实现如下:

var score = prompt("请输入您的成绩: ");
if( score >= 80 && score <=100 ){
	alert("您的成绩属于: 优秀!");
}else if( score >= 60 && score < 80 ){
	alert("您的成绩属于: 中等!");
}else if( score >= 0 && score < 60 ){
	alert("您的成绩属于: 不及格!");
}else{
	alert("您的输入有误, 请重新输入!");
}

案例2:switch语句案例

实现一个简易的计算器:可以接收用户输入的两个数值和一个操作符(+、-、*、/),根据操作符号的不同,对两个数值执行不同的运算。

代码实现如下:

//1.接收用户输入的数值和运算符, 中间用空格分隔
//prompt() 方法用于显示可提示用户进行输入的对话框。
var str = prompt("请输入数值1、运算符、数值2,中间用空格分隔:"); //"10 + 5"
//2.对用户输入的内容进行切割(以空格作为分隔符切割)
var arr = str.split(" "); // ["10", "+", "5"]
var num1 = arr[0] - 0 ;
var opt = arr[1];
var num2 = arr[2] - 0 ;
//3.通过switch分支实现计算器
switch( opt ){
	case "+":
		alert( "两个数的和为: "+( num1+num2 ) );
		break;
	case "-":
		alert( "两个数的差为: "+( num1-num2 ) );
		break;
	case "*":
		alert( "两个数的乘积为: "+( num1*num2 ) );
		break;
	case "/":
		alert( "两个数的商为: "+( num1/num2 ) );
		break;
	default:
		alert( "您输入的运算符有误, 请重新输入!" );
}

案例3:for循环语句案例

遍历1~100之间的所有整数,求1~100之间所有整数的和,并输出到控制台;

代码实现如下:

//--------------------------------------
var i = 1;
var sum = 0;
while( i <= 100 ){
    sum += i;
    i++;
}
alert( "1~100之间所有整数的和为: "+sum );
//--------------------------------------
var sum = 0;
for( var i=0; i<=100; i++){
	sum += i;
}
alert( "1~100之间所有整数的和为: "+sum );

//--------------------------------------

案例4:while循环语句案例

遍历下面数组中的元素,将元素输出到控制台。

var arr = [123, “abc”, false, new Object() ];

代码实现如下:

var arr = [123, "abc", false, new Object() ];
var index = 0;
while( index < arr.length ){
	console.log( arr[index] );
	index++;
}
for( var i=0; i<arr.length; i++ ){
	console.log( arr[i] );
}

JS数组

Array 对象用于在单个的变量中存储多个值。

JS数组的声明方式一:

//声明一个空数组,长度为零
var arr1 = [];
//声明一个数组,并为数组设置初始值
var arr2 = ["Hello", 111, false, new Object() ];

JS数组的声明方式二:

 //声明一个空数组,长度为零
var arr3 = new Array();
//声明一个数组,并为数组设置初始值
var arr4 = new Array("Hello", 111, false, new Object());

数组中的细节问题:

(1)JS中的数组可以存储任意类型的数据

(2)JS中的数组长度是可以被任意改变的

var arr1 = [];
console.log("此处数组的长度为: "+arr1.length ); // 0
arr1.length = 5;
console.log("此处数组的长度为: "+arr1.length ); // 5
arr1[9] = "a";
console.log("此处数组的长度为: "+arr1.length ); // 10
arr1[99] = "b";
console.log("此处数组的长度为: "+arr1.length ); // 100

JS函数

函数就是一个具有功能的代码块, 可以反复调用

函数就是包裹在花括号中的代码块,前面使用了关键词 function。

JS中声明函数的方式为:

function 函数名称([参数列表]){
	函数体
}

或者:

var 变量名/函数名 = function([参数列表]){
	函数体
}

调用函数: 函数名称([参数列表]);

综合练习

(自己完成)声明一个函数fn,在函数中实现:遍历指定的两个数值(例如1和100)之间的整数,将是3的倍数的数值存入到一个数组中,并将数组返回。

1、声明fn函数

function fn(x,y){
    var arr = [];
    for(var i=x,j=0;i<y;i++){
        if(i%3==0){
        	arr[j] = i;
        	j++;
    	}
    }
    return arr;
}

2、调用fn函数, 获取1~100之间是3的倍数的数值组成的数组

var arr = fn(1,100);

3、遍历数组中的元素, 输出在网页上(提示: document.write(“输出的内容”) )

for(var i=0;i<arr.length;i++){
	document.write(arr[i]+" ");
}

DOM操作

DOM: document Object Model,文档对象模型,其实专门为访问html元素提供的一套API。

DOM树:节点的层次

在这里插入图片描述

节点及其类型:

元素节点

属性节点:元素的属性,可以直接通过属性的方式来操作

文本节点:是元素节点的子节点,其内容为文本

DOM_在什么位置书写JS代码

1、在script标签内部可以书写JS代码:

在head或body标签内部可以添加一个script标签,在script标签内部可以直接书写JS代码!

<!-- 在script标签内部可以书写JS注释和JS代码 -->
<script type=*"text/javascript"*>
	//Js的单行注释
	/*JS的多行注释*/
	alert( "在html中引入JS的第一种方式..." );
</script>

案例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	//1.当整个HTML文档完全加载成功以后触发window.onload事件
	//事件触发时,执行后面function里面的函数体
	
	window.onload=function(){
		//2.获取所有的button节点,并取得第一个元素
		var btn=document.getElementsByTagName("button")[0];
		//3.为button的Onclick事件赋值,当点击button时,执行函数体
		btn.onclick=function(){
			//4.弹出helloworld
			alert("HelloWorld");
		}	
	}
</script>
</head>
<body>
	<button>Click Me!</button>
</body>
</html>

注意:

(1)一般地,不能在body节点之前来直接获取body内的节点,因为此时html文档还没有加载完成,获取不到指定的节点

(2)可以在整个html文档的最后编写类似代码,但是不符合习惯

(3)一般,在body节点之前编写js代码,但需要利用window。onload事件,该事件在文档完全加载之后被触发,所以其中的代码可以获取到当前文档的任何节点

2、通过script标签引入外部的JS文件**

在head或body标签内部,可以通过script标签引入外部的JS文件。例如:

<!-- 通过script标签可以引入外部的JS文件 -->
<script src="demo.js"></script>

注意:(1)在引入js文件的script标签内部不要书写JS代码,例如:

<script src="demo.js">
	alert( "JS..." ); //这里的代码不会执行
</script>

(2)不要将引入JS文件的script标签自闭,因为可能会导致文件引入失败!

扩展内容:也可以直接在元素上书写JS代码

<!-- 直接在元素上书写JS代码 -->
<button onclick="alert('Hello World!')">Click ME</button>

缺点:

(1)js和html强耦合,不利于代码的维护

(2)若click相应函数是比较复杂的,则需要先定义一个函数,然后在onclick属性中完成对函数的引用,比较麻烦

获取元素节点

如何获取元素节点

(1)**document.getElementById:根据id属性获取对应的单个节点

(2)**document.getElementByTagName:根据标签名获取指定节点名

(3)document.getElementsByName:根据节点的name属性获取符合条件的节点数组,但IE的实现方式和W3C标准有差别,在html文档中若某节点(li)没有name属性,则IE使用getElementsByName不能获取到节点数组,但谷歌、火狐可以

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	window.onload=function(){
		//1.获取id为bj的节点
		//在编写HTML文档时,需要确保id属性是唯一的
		//改方法为document对象的方法
		var bjNode=document.getElementById("bj");
		alert(bjNode);
		
		//2.获取所有的li节点
		//使用标签名获取指定节点的集合
		//改方法为Node接口的方法,即任何一个节点都有这个方法
		var liNodes=document.getElementsByTagName("li");
		alert(liNodes.length);
		
		var cityNode=document.getElementById("city");
		var cityLiNodes=cityNode.getElementsByTagName("li");
		alert(cityLiNodes.length);
		
		//3.根据HTML文档元素的name属性名来获取指定的节点的集合
		var genderNodes=document.getElementsByName("gender");
		alert( genderNodes.length);
		
		//若html元素自身没有定义name属性,则getElementsByName()方法对于IE无效,使用该方法时需谨慎
		var beijingNode=document.getElementsByName("beijing");
		alert(beijingNode.length);
	}
</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="fruit">
		<li id="pg" >苹果</li>
		<li>桔子</li>
		<li>香蕉</li>
		<li>火龙果</li>
	</ul>
	
	<br><br>
	gender:
		<input type="radio" name="gender" value=“male”/>Male
		<input type="radio" name="gender" value=“female”/>Female
	
</body>
</html>

获取元素节点子节点

只有元素节点才有子节点

(1)cityLiNodes属性获取全部的子节点:但是不实用

(2)firstChild属性获取第一个子节点

(3)lastChild属性获取最后一个子节点

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    //获取元素节点的子节点
	window.onload=function(){
		//1.获取#city节点的所有子节点
		var cityNode=document.getElementById("city");
		//2.利用元素节点的childNodes方法可以获取指定元素节点
		//但该方法不实用
		alert(cityNode.childNodes.length);//8
		
		//3.获取#city节点的所有li节点
		var cityLiNodes=cityNode.getElementsByTagName("li");
		alert(cityLiNodes.length);//4
		
		//4.获取指定节点的第一个子节点和最后一个子节点
		alert(cityNode.firstChild);//object HTMLLIElement
		alert(cityNode.lastChild);//object Text
	}
</script>
</head>
<body>
	<p>喜欢的城市</p>
	<ul id="city"><li id="bj" name="beijing">北京</li>
		<li>上海</li>
		<li>广州</li>
		<li>深圳</li>
	</ul>
	
</body>
</html>

获取属性节点

(1)**可以直接通过nameNode.id这样的方式来获取和设置属性节点的值

(2)通过元素节点的getAttributeNode方法来获取属性节点,然后在通过nodeValue来读写属性

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	//读写属性节点:通过元素节点 . 的方式来获取属性值和设置属性值
	window.onload=function(){
		//属性节点即为某一指定的元素节点的属性
		//方式1
		//1.获取指定元素节点
		var nameNode=document.getElementById("name");
		//2.再读取指定属性的值
		alert(nameNode.value);
		
		//3.指定属性的值
		nameNode.value="DOM属性"
		
		//方式2
		var nameNode=document.getElementById("name");
		var nameAttr=nameNode.getAttributeNode("value");
		alert(nameAttr);
		alert(nameAttr.nodeValue);
		nameAttr.nodeValue="DOM属性02"
	}
</script>
</head>
<body>
	name:
		<input type="text"  id="name" name="username"  value="dom"/>
</body>
</html>

获取文本节点

文本节点一定是元素节点的子节点!!!

(1)步骤:元素节点–>获取元素节点的子节点

(2)若元素节点只有文本节点一个子节点,可以先获取到指定的元素节点eleNode,然后利用eleNode.firstChild.nodeValue方法读写其文本节点的值

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    //获取文本节点
	window.onload=function(){
    	//文本节点一定是元素节点的子节点
		//1.获取文本节点所在的元素节点
		var bjNode=document.getElementById("bj");
		
		//2.通过firstChild定义到文本节点
		var bjTextNode=bjNode.firstChild;
		
		//3.通过操作文本节点的nodeValue属性来读写文本节点的值
		alert(bjTextNode.nodeValue);
	}
</script>
</head>
<body>
	<p>喜欢的城市</p>
	<ul id="city">
		<li id="bj" name="beijing">北京</li>
		<li>上海</li>
		<li>广州</li>
		<li>深圳</li>
	</ul>
	
</body>
</html>

节点属性

(1)nodeName:代表当前字节的名字,只读属性。

(2)nodeType:返回一个整数,这个数值代表着给定的节点的类型,只读属性

(3)nodeValue:返回给定节点的当前值(字符串),可读写的属性

①元素节点,返回值是null

②属性节点,返回值是这个属性的值

③文本节点,返回值是这个文本节点的内容

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

	 //关于节点的属性:nodeType,nodeName,nodeValue
	 //在文档中,任何一个节点都有着3个属性
	 //而id,name,value是具体节点的属性
	window.onload=function(){
    	//1.元素节点的3个属性
		var bjNode=document.getElementById("bj");
		alert(bjNode.nodeType);//元素节点:1
		alert(bjNode.nodeName);//节点名:li
		alert(bjNode.nodeValue);//元素节点没有nodeValue属性值:null
		
		//2.属性节点
		var nameAttr=document.getElementById("name").getAttributeNode("name");
		alert(nameAttr.nodeType);//属性节点:2
		alert(nameAttr.nodeName);//属性节点的节点名:属性名
		alert(nameAttr.nodeValue);//元素节点没有nodeValue属性值:属性值
		
		//3.文本节点
		var textNode=bjNode.firstChild;
		alert(textNode.nodeType);//元素节点:3
		alert(textNode.nodeName);//节点名:#text
		alert(textNode.nodeValue);//元素节点没有nodeValue属性值:文本值
		
		//nodeType,nodeName是只读的
		//nodeValue是可以被改变的
	}

</script>
</head>
<body>
	<p>喜欢的城市</p>
	<ul id="city"><li id="bj" name="beijing">北京</li>
		<li>上海</li>
		<li>广州</li>
		<li>深圳</li>
	</ul>
	<br>
	name:
		<input type="text"  id="name" name="username"  value="dom"/>
</body>
</html>

创建并加入节点

创建一个元素节点:

(1)createElement():按照给定的标签名创建一个新的元素节点

方法只有一个参数:被创建的元素节点的名字,是一个字符串。
方法的返回值:是一个指向新建节点的引用指针。返回值是一个元素节点,所以它的nodeType属性值等于1.

新元素节点不会自动添加到文档里,它只是一个存在于JavaScript上下文的对象。

创建一个文本节点:

(1) createTextNode(): 创建一个包含着给定文本的新文本节点。这个方法的返回值是一个指向新建文本节点引用指针。它是一个文本节点,它的nodeType属性等于3.
方法只有一个参数: 新建文本节点所包含的文本字符串。新元素节点不会自动添加到文档里

为元素节点添加子节点:

(1)appendChild():

var reference = element.appendChild(newChild) :
给定子节点newChild将成为给定元素节点element的最后一个子节点。
方法的返回值是一个指向新增子节点的引用指针.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	//新创建一个元素节点,并把该节点添加为文档中指定节点的子节点
	window.onload=function(){
		//1.document.createElement(elementTagName)
		//新创建一个元素节点,返回值为指向元素节点的引用
		//<li></li>
		var liNode=document.createElement("li");
		
		//创建”深圳“的文本节点
		//document.createTextNode(String)创建一个文本节点,参数为文本值,返回该文本节点的引用
		var szText=document.createTextNode("深圳");
		liNode.appendChild(szText);//<li>深圳</li>
		
		var cityNode=document.getElementById("city");
		//2.element.appendChild(newChild) :为elementNode新添加newChild子节点,该子节点将作为elementNode的最后一个子节点
		cityNode.appendChild(liNode);
	}
</script>
</head>
<body>
	<p>喜欢的城市</p>
	<ul id="city">
		<li id="bj" name="beijing">北京</li>
		<li>上海</li>
		<li>广州</li>
	</ul>
</body>
</html>

见练习1,2,3

替换节点及自定义的replaceEach方法**

(1)节点的替换

1). replaceChild():把一个给定父元素里的一个子节点替换为另外一个子节点
var reference = element . replaceChild( newChild,oldChild) ;
返回值是一个指向已被替换的那个子节点的引用指针
2).该节点除了替换功能以外还有移动的功能。
3).该方法只能完成单向替换,若需要使用双向替换,需要自定义函数replaceEach()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	window.onload=function(){
		//1.节点的替换
		var bjNode=document.getElementById("bj");
		var pgNode=document.getElementById("pg");
//		var cityNode=document.getElementById("city");
//		cityNode.replaceChild(pgNode,bjNode);
		
		//2.自定义节点的替换
		replaceEach(bjNode, pgNode);
		
		/*
		var cityNode = document.getElementById("city");
		//cityNode.replaceChild(rlNode, bjNode);
		
		//实现 bj 节点和 rl 节点的互换. 
		var gameNode = document.getElementById("game");
		
		//克隆 bjNode
		//cloneNode(deep) 若 deep 为true, 则可以克隆子节点
		var bjNode2 = bjNode.cloneNode(true);
		gameNode.replaceChild(bjNode2, rlNode);
		
		alert(2);
		
		cityNode.replaceChild(rlNode, bjNode);
		*/
	}
	//自定义互换两个节点的函数
	function replaceEach(aNode,bNode){
		//1. 获取 aNode 和 bNode 的父节点. 使用 parentNode 属性
		var aParent=aNode.parentNode;
		var bParent=bNode.parentNode;
		
		if(aParent&&bParent){
			//2. 克隆 aNode 或 bNode
			var aNode2=aNode.cloneNode(true);
			//3. 分别调用 aNode 的父节点和 bNode 的父节点的 replaceChild()
			//方法实现节点的互换
			bParent.replaceChild(aNode2,bNode);
			aParent.replaceChild(bNode,aNode);
		}
	}
</script>
</head>
<body>
	<p>喜欢的城市</p>
	<ul id="city">
		<li id="bj">北京</li>
		<li>上海</li>
		<li>广州</li>
	</ul>
	<br>
	<br>
	<p>喜欢的水果</p>
	<ul id="fruit">
		<li id="pg">苹果</li>
		<li>桔子</li>
		<li>香蕉</li>
	</ul>
</body>
</html>

见练习4

删除节点

(1). removeChild(): 从一个给定元素里删除一个子节点
var reference = element.removeChild(node);
返回值是一个指向已被删除的子节点的引用指针. 某个节点被 removeChild() 方法删除时, 这个节点所包含的所有子节点将同时被删除.
如果想删除某个节点, 但不知道它的父节点是哪一个, parentNode 属性可以帮忙。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	//测试 removeChild() 方法: 删除节点
	window.onload = function() {
		/*
		alert("1");	
		var bjNode = document.getElementById("bj");
		bjNode.parentNode.removeChild(bjNode);
		 */
		//为每个 li 节点添加一个 confirm(确认对话框): 确定要删除 xx 的信息吗?
		//若确定, 则删除
		var liNodes=document.getElementsByTagName("li");
		for(var i=0;i<liNodes.length;i++){
			liNodes[i].onclick=function(){
				var flag=confirm("确定要删除"+this.firstChild.nodeValue+"吗")
				if(flag){
					this.parentNode.removeChild(this);
				}
			}
		}
	}
</script>
</head>
<body>
	<p>喜欢的城市</p>
	<ul id="city">
		<li id="bj">北京</li>
		<li>上海</li>
		<li>广州</li>
	</ul>
	<br>
	<br>
	<p>喜欢的水果</p>
	<ul id="fruit">
		<li id="pg">苹果</li>
		<li>桔子</li>
		<li>香蕉</li>
	</ul>
</body>
</html>

见练习5

添加节点

(1). insertBefore(): 把一个给定节点插入到一个给定元素节点的给定子节点的前面
var reference = element.insertBefore(newNode,targetNode);
节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面. 节点 targetNode 必须是 element 元素的一个子节点。

(2). 自定义 insertAfter() 方法

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	//测试insertBefore()插入节点
	//该方法除了进行插入外,还有移动节点的功能
	window.onload = function() {
	//1.把#pg插入到#bj节点的前面
	var cityNode=document.getElementById("city");
	var bjNode=document.getElementById("bj");
	var pgNode=document.getElementById("pg");
	
//	cityNode.insertBefore(pgNode,bjNode);

	insertAfter(pgNode,bjNode);
	}
	
	//把newNode插入到refNode的后面
	function insertAfter(newNode,refNode){
		//1.测试refNode是否为其父节点的最后一个子节点
		//判断是否存在父节点
		var parentNode=refNode.parentNode;
		if(parentNode){
			var lastNode=parentNode.lastChild;
			//2.若是:直接把newNode插入为refNode父节点的最后一个子节点
			if(refNode==lastNode){
				parentNode.appendChild(newNode);
			}else{
				//3.若不是:获取refNode的下一个兄弟节点,然后插入到其下一个兄弟节点的前面
				var nextNode=refNode.nextSibling;
				parentNode.insertBefore(newNode,nextNode);
			}
		}
	}
</script>
</head>
<body>
	<p>喜欢的城市</p>
	<ul id="city">
		<li id="bj">北京</li>
		<li id="sh">上海</li>
		<li id="gz">广州</li>
	</ul>
	<br>
	<br>
	<p>喜欢的水果</p>
	<ul id="fruit">
		<li id="pg">苹果</li>
		<li>桔子</li>
		<li>香蕉</li>
	</ul>
</body>
</html>

innerHTML属性

(1). 浏览器几乎都支持该属性, 但不是 DOM 标准的组成部分. innerHTML 属性可以用来读, 写某给定元素里的 HTML 内容

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	//测试innerHTML属性
	window.onload = function() {
		var cityNode=document.getElementById("city");
		alert(cityNode.innerHTML);
		
		//互换#city节点和#fruit节点中的内容
		var fruitNode=document.getElementById("fruit");
		var tempHTML=cityNode.innerHTML;
		cityNode.innerHTML=fruitNode.innerHTML;
		fruitNode.innerHTML=tempHTML;
	}
</script>
</head>
<body>
	<p>喜欢的城市</p>
	<ul id="city">
		<li id="bj">北京</li>
		<li id="sh">上海</li>
		<li id="gz">广州</li>
	</ul>
	<br>
	<br>
	<p>喜欢的水果</p>
	<ul id="fruit">
		<li id="pg">苹果</li>
		<li>桔子</li>
		<li>香蕉</li>
	</ul>
</body>
</html>

练习

练习1:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	window.onload=function(){
    	//点击每个li节点,都弹出其文本框
    	//1.获取所有的li节点
    	var liNodes=document.getElementsByTagName("li");
    	//2.用for循环,得到每个li节点
    	for(var i=0;i<liNodes.length;i++){
    		//3.为每个li节点添加onclick响应函数
    		liNodes[i].onclick=function(){
    			//4.在响应函数中获取当前节点的文本值
    			alert(this.firstChild.nodeValue);
    		}
    	}
	}
</script>
</head>
<body>
	<p>喜欢的城市</p>
	<ul id="city">
		<li id="bj" name="beijing">北京</li>
		<li>上海</li>
		<li>广州</li>
		<li>深圳</li>
	</ul>
	
</body>
</html>

练习2:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	window.onload=function(){
    	//点击每个li节点,若li节点的文本值没有^^开头,加上;有,去除	
		var liNodes=document.getElementsByTagName("li");
		for(var i=0;i<liNodes.length;i++){
			liNodes[i].onclick=function(){
				var val=this.firstChild.nodeValue;
				var reg=/^\^{2}/g;
				if(reg.test(val)){
					val=val.replace(reg,"");
				}else{
					val="^^"+val;
				}
				this.firstChild.nodeValue=val;
			}
		} 
    	/*
    	//1.使用正则表达式判断是否以^^开始
    	//2.调用replace(reg,str)方法去除指定字符串
    	
    	var str="^^abc";
    	var reg=/^\^{2}/g;
    	alert(reg.test(str));//true
    	str=str.replace(reg,"");
    	alert(str);
    	
    	var str2="abc";
    	alert(reg.test(str2));//false
    	*/
	}
</script>
</head>
<body>
	<p>喜欢的城市</p>
	<ul id="city">
		<li id="bj" name="beijing">北京</li>
		<li>上海</li>
		<li>广州</li>
		<li>深圳</li>
	</ul>
	
</body>
</html>

练习3:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	//需求1:点击submit按钮时,检查是否选择 type,若没有选择给出提示: "请选择类型" ;
	//			检查文本框中是否有输入( 可以去除前后空格),若没有输入,则给出提示:“请输入内容“;
	//若检查都通过,则在相应的ul节点中添加对应的li节点

	//需求2:使包括新增的 li 都能响应 onclick 事件: 弹出 li 的文本值. 
	window.onload = function() {
		function showContent(liNode){
			alert("^_^#" + liNode.firstChild.nodeValue);
		}
		var liNodes=document.getElementsByTagName("li");
		for(var i=0;i<liNodes.length;i++){
			liNodes[i].onclick=function(){
				showContent(this);
			}
		}
		//1.获取#submit对应的按钮submitBtn
		var submitBtn = document.getElementById("submit");
		//2.为submitBtn添加onclick响应函数
		submitBtn.onclick = function() {
			//4.检查是否选择type,若没有选择给出提示:“请选择类型"
			//4.1选择所有的name="type"的节点types
			var types = document.getElementsByName("type");
			//4.2遍历types,检查其是否有一个type的checked属性存在,就可以说明有一个type被选中;通过if(元素节点.属性名)来判断某一个节点是否具有该属性
			var typeVal = null;
			for (var i = 0; i < types.length; i++) {
				if (types[i].checked) {
					typeVal = types[i].value;
					break;
				}
			}
			//4.3若没有任何一个type被选中,则弹出:”请选择类型“.响应方法结束
			//return false
			if (!typeVal) {
				alert("请选择类型");
				return false;
			}
			//5.获取name="name"的文本值:通过value属性:nameVal
			var nameEle = document.getElementsByName("name")[0];
			var nameVal = nameEle.value;
			//6.去除nameVal的前后空格
			var reg =/^\s*|\s*$/g;
			nameVal = nameVal.replace(reg,"");

			//使name的文本框也去除前后空格
			nameEle.value = nameVal;
			//7.把nameVal和“”进行比较,若是“”说明只出入了空格,弹出“请输入内容”
			//方法结束: return false
			if (nameVal == "") {
				alert("请输入内容");
				return false;
			}
			//8.创建li节点
			var liNode = document.createElement("li");
			//9.利用nameVal创建文本节点
			var content = document.createTextNode(nameVal);
			//10.把9加为8的子节点
			liNode.appendChild(content);
			//12. 为新创建的 li 添加 onclick 响应函数
			liNode.onclick = function(){
				showContent(this);
			}
			//11.把8加为选择的type对应的ul的子节点
			document.getElementById(typeVal).appendChild(liNode);
			//3.在onclick响应函数的结尾处添加return false, 就可以取消提交按钮的
			//默认行为.
			return false;
		}
	}
</script>
</head>
<body>
	<p>喜欢的城市</p>
	<ul id="city">
		<li id="bj">北京</li>
		<li>上海</li>
		<li>广州</li>
	</ul>
	<br>
	<br>
	<p>喜欢的水果</p>
	<ul id="fruit">
		<li id="pg">苹果</li>
		<li>桔子</li>
		<li>香蕉</li>
	</ul>
	<br>
	<br>
	<form action="ex-3.html" name="myform">
		<input type="radio" name="type" value="city">城市 
		<input type="radio" name="type" value="fruit">水果
		 name: <input type="text" name="name" /> 
		 <input type="submit" value="Submit" id="submit" />
	</form>

</body>
</html>

练习4:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	//需求:为所有的li节点添加onclick响应函数
	//实现city 子节点和game子节点对应位置的元素的互换
	window.onload = function() {
		//自定义互换两个节点的函数
		function replaceEach(aNode, bNode) {
			//1. 获取 aNode 和 bNode 的父节点. 使用 parentNode 属性
			var aParent = aNode.parentNode;
			var bParent = bNode.parentNode;

			if (aParent && bParent) {
				//2. 克隆 aNode 或 bNode
				var aNode2 = aNode.cloneNode(true);
				//克隆 aNode 的同时, 把 onclick 事件也复制. 
				aNode2.onclick = aNode.onclick;
				//克隆 aNode 的同时, 把 index 事件也复制. 
				aNode2.index = aNode.index;
				//3. 分别调用 aNode 的父节点和 bNode 的父节点的 replaceChild()
				//方法实现节点的互换
				bParent.replaceChild(aNode2, bNode);
				aParent.replaceChild(bNode, aNode);
			}
		}
		//1.获取所有的li节点
		var liNodes = document.getElementsByTagName("li");
		//2.为每一个li节点添加Onclick响应函数
		for (var i = 0; i < liNodes.length; i++) {
			//手动为每个li节点添加一个index属性
			liNodes[i].index = i;
			liNodes[i].onclick = function() {
				//3.找到和当前节点对应的那个li节点
				var targetIndex = 0;
				if (this.index < liNodes.length/2) {
					targetIndex = liNodes.length/2 + this.index;
				} else {
					targetIndex = this.index -  liNodes.length/2;
				}
				//交换index属性
				var tempIndex = this.index;
				this.index = liNodes[targetIndex].index;
				liNodes[targetIndex].index = tempIndex;
				//4.互换
				replaceEach(this, liNodes[targetIndex]);
			}
		}
	}
</script>
</head>
<body>
	<p>喜欢的城市</p>
	<ul id="city">
		<li id="bj">北京</li>
		<li>上海</li>
		<li>广州</li>
	</ul>
	<br>
	<br>
	<p>喜欢的水果</p>
	<ul id="fruit">
		<li id="pg">苹果</li>
		<li>桔子</li>
		<li>香蕉</li>
	</ul>
</body>
</html>

练习5:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	/*
	 * 为 #employeetable 的所有的 a 节点添加 Onclick 响应函数:
	 * 1. 弹出确认对话框: 确定要删除 xx 的信息吗? xx 为当前 a 节点所在的 td 所在的 tr 的
	 * 第一个 td 子节点的文本值, 且要去除前后空格.
	 * 2. 若点击 "确认" , 则删除 a 节点的所在的 行
	 *
	 * 注意:
	 * 1. a 节点是一个超级链接, 可以在其 onclick 事件中通过返回 false, 来取消默认行为
	 * 2. tr 的直接父节点为 tbody, 而不是 table
	 * 3. 可以把去除前后空格的代码写成一个 trim(str) 函数. 
	 *
	 * 为 #addEmpButton 添加 onclick 响应函数:
	 * 1. 获取 #name, #email, #salary 的文本框的值
	 * 2. 利用 1 获取的文本值创建 3 个 td 节点, 在创建一个 tr 节点. 并把以上的 3 个 td
	 *    节点价位 tr 节点的子节点
	 <tr>
	 <td>Tom</td>
	 <td>tom@tom.com</td>
	 <td>5000</td>
	 </tr>
	 * 3. 在创建一个 td 节点: <td><a href="deleteEmp?id=xxx">Delete</a></td> 
	 * 4. 把 3 创建的 td 也加为 tr 的子节点. 
	 * 5. 再把 tr 加为 #employeetable 的 tbody 子节点的子节点.
	 * 6. 为新创建的 tr 的 a 子节点添加 Onclick 响应函数, 使其也具备删除的功能. 
	 *
	 *
	 */
	window.onload = function() {
		function removeTr(aNode) {
			var trNode = aNode.parentNode.parentNode;
			var textContent = trNode.getElementsByTagName("td")[0].firstChild.nodeValue;
			textContent = trim(textContent);
			var flag = confirm("确定要删除" + textContent + "吗");
			if (flag) {
				trNode.parentNode.removeChild(trNode);
			}
			return false;
		}
		var aNodes = document.getElementById("employeetable")
				.getElementsByTagName("a");
		for (var i = 0; i < aNodes.length; i++) {
			aNodes[i].onclick = function() {
				removeTr(this);
				return false;
			}
		}
		function trim(str) {
			var reg = /^\s*|\s*$/g;
			return str.replace(reg, "");
		}
		document.getElementById("addEmpButton").onclick = function() {
			var nameVal = document.getElementById("name").value;
			var emailVal = document.getElementById("email").value;
			var salaryVal = document.getElementById("salary").value;

			var nameTd = document.createElement("td");
			nameTd.appendChild(document.createTextNode(nameVal));

			var emailTd = document.createElement("td");
			emailTd.appendChild(document.createTextNode(emailVal));

			var salaryTd = document.createElement("td");
			salaryTd.appendChild(document.createTextNode(salaryVal));

			var tr = document.createElement("tr");

			tr.appendChild(nameTd);
			tr.appendChild(emailTd);
			tr.appendChild(salaryTd);
			var aNode = document.createElement("a");
			aNode.href = "deleteEmp?id=xxx";
			aNode.appendChild(document.createTextNode("Delete"));
			var aTd = document.createElement("td");
			aTd.appendChild(aNode);
			tr.appendChild(aTd);

			aNode.onclick = function() {
				removeTr(this);
				return false;
			}
			document.getElementById("employeetable").getElementsByTagName(
					"tbody")[0].appendChild(tr);
		}
		//value: 用于获取 html 表单元素的值
		//alert(this.value); //
		//nodeValue: 用于获取文本节点的文本值. 
		//alert(this.nodeValue); //null
	}
</script>
</head>
<body>
	<center>
		<br> <br> 添加新员工 <br> <br> name: <input type="text"
			name="name" id="name" />&nbsp;&nbsp; email: <input type="text"
			name="email" id="email" />&nbsp;&nbsp; salary: <input type="text"
			name="salary" id="salary" /> <br> <br>
		<button id="addEmpButton" value="abc">Submit</button>
		<br> <br>
		<hr>
		<br> <br>
		<table id="employeetable" border="1" cellpadding="5" cellspacing=0>
			<tbody>
				<tr>
					<th>Name</th>
					<th>Email</th>
					<th>Salary</th>
					<th>&nbsp;</th>
				</tr>
				<tr>
					<td>Tom</td>
					<td>tom@tom.com</td>
					<td>5000</td>
					<td><a href="deleteEmp?id=001">Delete</a></td>
				</tr>
				<tr>
					<td>Jerry</td>
					<td>jerry@sohu.com</td>
					<td>8000</td>
					<td><a href="deleteEmp?id=002">Delete</a></td>
				</tr>
				<tr>
					<td>Bob</td>
					<td>bob@tom.com</td>
					<td>10000</td>
					<td><a href="deleteEmp?id=003">Delete</a></td>
				</tr>
			</tbody>
		</table>
	</center>
</body>
</html>

练习:Select级联选择

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<script type="text/javascript">
			
			window.onload = function(){
				
				//1. 为 #province 添加 onchange 响应函数
				document.getElementById("province").onchange = function(){
					
					//1.1 把 #city 节点除第一个子节点外都移除. 
					var cityNode = document.getElementById("city");
					var cityNodeOptions = cityNode.getElementsByTagName("option");
					
					var len = cityNodeOptions.length;
					for(var i =1; i < len; i++){
						cityNode.removeChild(cityNodeOptions[1]);
					}
					
					var provinceVal = this.value;
					if(provinceVal == ""){
						return; 
					}
					
					//2. 加载 cities.xml 文件. 得到代表给文档的 document 对象
					var xmlDoc = parseXml("cities.xml");
					
					//3. 在 cities.xml 文档中查找和选择的省匹配的 province 节点.
					
					//直接使用 XPath 技术查找 XML 文档中匹配的节点. 
					var provinceEles = xmlDoc.selectNodes("//province[@name='" + provinceVal + "']")
					                               
					//4. 再得到 province 节点的所有的 city 子节点
					var cityNodes = provinceEles[0].getElementsByTagName("city");
					
					//5. 遍历 city 子节点, 得到每一个 city 子节点的文本值
					for(var i = 0; i < cityNodes.length; i++){
						//6. 利用得到的文本值创建 option 节点
						//<option>cityName</option>
						var cityText = cityNodes[i].firstChild.nodeValue;
						var cityTextNode = document.createTextNode(cityText);
						var optionNode = document.createElement("option");
						optionNode.appendChild(cityTextNode);
						
						//7. 并把 6 创建的 option 节点添加为 #city 的子节点.
						cityNode.appendChild(optionNode);
					}

				}
				
				//js 解析 xml 文档的函数, 只支持 ie
				function parseXml(fileName){
				    //IE 内核的浏览器
				    if (window.ActiveXObject) {
				        //创建 DOM 解析器
				        var doc = new ActiveXObject("Microsoft.XMLDOM");
				        doc.async = "false";
				        //加载 XML 文档, 获取 XML 文档对象
				        doc.load(fileName);
				        return doc;
				    }
				}
				
			}
		
		</script>
		
	</head>
	<body>
		<select id="province">
			<option value="">请选择...</option>
			<option value="河北省">河北省</option>
			<option value="辽宁省">辽宁省</option>
			<option value="山东省">山东省</option>
		</select>
		
		<select id="city"><option value="...">请选择...</option></select>
	</body>
</html>

练习:Checkbox全选

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//需求: 若 #checkedAll_2 被选中, 则 name=items 的 checkbox 都被选中
//若 #checkedAll_2 取消选中, 则 name=items 的 checkbox 都取消选中
//若 name=items 的 checkbox 都被选中, 则 #checkedAll_2 的 checkbox 也被选中
//若 name=items 的 checkbox 有一个没有被选中, 则 #checkedAll_2 取消选择.

//提示: 事件需要加给  #checkedAll_2, 获取 name=items 的 checkbox 数组
//判断是否被选中, 若被选择, 则 name=items 的 checkbox 都要被选择
//若没有被选择, 则 name=items 的 checkbox 都要取消选择
//根据是否存在 checked 属性来判断是否被选择, 可以使其 checked = true 被选择
//checked = false 取消选择. 

//还需要给每个  name=items 的 checkbox 加响应函数
//判断  name=items 的 checkbox 是否都被选中: 选择的个数和总个数是否相等.
//若都被选择: 则使  #checkedAll_2 被选择
//若没有都被选择: 则使  #checkedAll_2 取消选择
	window.onload = function() {
		document.getElementById("checkedAll_2").onclick=function(){
			var flag=this.checked;
			var items=document.getElementsByName("items");
			for(var i=0;i<items.length;i++){
				items[i].checked=flag;
			}
		}
		
		var items = document.getElementsByName("items");
		for(var i=0;i<items.length;i++){
			items[i].onclick=function(){
				//记录有多少个 items 被选中了
				var number=0;
				for(var j=0;j<items.length;j++){
					if(items[j].checked){
						number++;
					}
				}
				
				document.getElementById("checkedAll_2").checked=(items.length==number);
			}
		}
		//全选
		document.getElementById("CheckedAll").onclick=function(){
			for(var i=0;i<items.length;i++){
				items[i].checked=true;
			}
		}
		//全不选
		document.getElementById("CheckedNo").onclick=function(){
			for(var i=0;i<items.length;i++){
				items[i].checked=false;
			}
		}
		//反选
		document.getElementById("CheckedRev").onclick=function(){
			for(var i=0;i<items.length;i++){
				items[i].checked=!items[i].checked;
			}
		}
		//提交
		document.getElementById("send").onclick=function(){
			for(var i=0;i<items.length;i++){
				if(items[i].checked){
					alert(items[i].value);
				}
			}
		}
	}
</script>
</head>
<body>
	<form method="post" action="">
		你爱好的运动是?
		<input type="checkbox" id="checkedAll_2" />全选/全不选 
		
		<br />
	   <input type="checkbox" name="items" value="足球" />足球
		<input type="checkbox" name="items" value="篮球" />篮球 
		<input type="checkbox" name="items" value="羽毛球" />羽毛球 
		<input type="checkbox" name="items" value="乒乓球" />乒乓球
		
		<br /> 		
		<input type="button" id="CheckedAll" value="全 选" />
		<input type="button" id="CheckedNo" value="全不选" />
		<input type="button" id="CheckedRev" value="反 选" /> 
		<input type="button" id="send" value="提 交" />
	</form>
</body>
</html>

练习:电灯开关

点击电灯可以实现开/关灯,代码实现如下:

var flag = "off"; //flag表示灯的状态, off表示灯是关闭的!
function changeImg( ){
    //1.通过id获取img元素(返回是一个JS对象)
    var imgObj = document.getElementById("img1");
    if( flag == "off" ){ // 表明灯是关闭状态, 点击后则需要打开
    	imgObj.src = "imgs/on.gif";
    	flag = "on"; // 更新灯的状态为开灯
    }else{ // flag="on" 表名灯是打开状态, 点击后则需要关闭
    	imgObj.src = "imgs/off.gif";
    	flag = "off";
    }
}

练习:增删改元素

点击网页中的按钮对html元素进行操作

练习1、添加元素:添加一个div元素到body中

function addNode(){
    //1.创建一个新的div元素(返回的是一个JS对象, 表示新创建的div元素)
    var newDivObj = document.createElement("div"); // \<div\>\</div\>
    newDivObj.innerHTML = "我是新来的....";
    //2.获取body元素(body是父元素)
    var bodyObj = document.body;
    //3.通过父元素(body)添加子元素(newDivObj)
    bodyObj.appendChild( newDivObj );
}

练习2、删除元素: 删除id为div_2的元素

function deleteNode(){
    //1.获取要删除的元素(id为div_2)
    var div2 = document.getElementById("div_2");
    //2.获取id为div_2的元素的父元素
    var parent = div2.parentNode;
    //3.通过父元素删除子元素
    parent.removeChild( div2 );
}

练习3、更新元素内容:将div_3的内容更新为当前时间

function updateNode(){
    //1.获取id为div_3的元素
    var div3 = document.getElementById("div_3");
    //2.获取表示当前时间的字符串
    var dateStr = new Date().toLocaleString();
    //3.将div_3元素的内容更新为当前时间
    div_3.innerHTML = dateStr;
}

练习:网页换肤

/** 练习1:执行下面的函数,切换字体大小 */
function resize( selector ){
	//获取id为newstext元素
	var div = document.getElementById("newstext");
	//将id为newstext元素的class属性值设置为 selector
	div.className = selector;
}

/** 练习2:执行下面的函数,为页面切换不同的皮肤
	点击换肤链接时,执行changeStyle函数,将link标签的href属性值指向
	不同的css文件的路径,就会使用不同的css文件中的样式 */
//定义数组,存放不同的皮肤(css文件的路径)
var styleArr = ["css/red.css", "css/green.css", "css/blue.css"];
var index = 0;
function changeStyle(){
	//获取head中的link标签(id=link)
	var link = document.getElementById("link");
	//	将link标签的href属性值指向css文件的路径
	link.href = styleArr[index];
	index++;
	if( index == styleArr.length ){ //如果下标等于数组长度
		index = 0; //则将下标重置为0
	}
}

总结:JS获取元素

document.getElementById( id值 ) – 通过元素的id值,获取一个元素。返回的是表示该元素的js对象。

document.getElementsByTagName( 元素名 ) – 通过元素名称获取当前文档中的所有指定名称的元素,返回的是一个数组,其中包含了所有指定名称的元素。

document.body – 获取当前文档中的body元素

ele.parentNode – 获取当前元素的父元素。ele表示当前元素

总结:JS增删改元素

document.createElement( 元素名称 ) – 根据元素名称创建指定名称的元素,返回的是表示新创建元素的js对象

parent.appendChild( child ) – 通过父元素添加子元素,其中parent表示父元素,child表示子元素

parent.removeChild( child )– 通过父元素删除子元素,其中parent表示父元素,child表示子元素

wDivObj)
bodyObj.appendChild( newDivObj );
}


练习2、删除元素: 删除id为div_2的元素

```javascript
function deleteNode(){
    //1.获取要删除的元素(id为div_2)
    var div2 = document.getElementById("div_2");
    //2.获取id为div_2的元素的父元素
    var parent = div2.parentNode;
    //3.通过父元素删除子元素
    parent.removeChild( div2 );
}

练习3、更新元素内容:将div_3的内容更新为当前时间

function updateNode(){
    //1.获取id为div_3的元素
    var div3 = document.getElementById("div_3");
    //2.获取表示当前时间的字符串
    var dateStr = new Date().toLocaleString();
    //3.将div_3元素的内容更新为当前时间
    div_3.innerHTML = dateStr;
}

练习:网页换肤

/** 练习1:执行下面的函数,切换字体大小 */
function resize( selector ){
	//获取id为newstext元素
	var div = document.getElementById("newstext");
	//将id为newstext元素的class属性值设置为 selector
	div.className = selector;
}

/** 练习2:执行下面的函数,为页面切换不同的皮肤
	点击换肤链接时,执行changeStyle函数,将link标签的href属性值指向
	不同的css文件的路径,就会使用不同的css文件中的样式 */
//定义数组,存放不同的皮肤(css文件的路径)
var styleArr = ["css/red.css", "css/green.css", "css/blue.css"];
var index = 0;
function changeStyle(){
	//获取head中的link标签(id=link)
	var link = document.getElementById("link");
	//	将link标签的href属性值指向css文件的路径
	link.href = styleArr[index];
	index++;
	if( index == styleArr.length ){ //如果下标等于数组长度
		index = 0; //则将下标重置为0
	}
}

总结:JS获取元素

document.getElementById( id值 ) – 通过元素的id值,获取一个元素。返回的是表示该元素的js对象。

document.getElementsByTagName( 元素名 ) – 通过元素名称获取当前文档中的所有指定名称的元素,返回的是一个数组,其中包含了所有指定名称的元素。

document.body – 获取当前文档中的body元素

ele.parentNode – 获取当前元素的父元素。ele表示当前元素

总结:JS增删改元素

document.createElement( 元素名称 ) – 根据元素名称创建指定名称的元素,返回的是表示新创建元素的js对象

parent.appendChild( child ) – 通过父元素添加子元素,其中parent表示父元素,child表示子元素

parent.removeChild( child )– 通过父元素删除子元素,其中parent表示父元素,child表示子元素

ele.innerHTML – 获取当前元素的html内容(从开始标签到结束标签之间的所有内容),还可以设置当前元素的html内容(如果元素内部有内容,将会覆盖原有内容)

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页