JavaScript简介
JavaScript语言是用来完成网页的数据验证,运行在客户端,需要运行浏览器来解析执行JavaScript代码
特点:
①交互性,可以做信息的动态交互
②安全性,不允许直接访问本地硬盘
③跨平台性,只要是可以解释JS语言的浏览器都可以执行
JavaScript和HTML代码的结合方式
方式一:在head标签中或者在body标签中使用script标签来书写JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS与HTML结合方式(第一种)</title>
<script type="text/javascript">
//alert是JavaScript语言提供的警告框函数,可以接收任意类型的参数,该参数是警告框的提示信息
alert("new world");
</script>
</head>
<body>
</body>
</html>
方式二:使用script标签引入单独的JavaScript代码文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS与HTML结合方式(第二种</title>
<!-- 使用script标签引入外部的js文件来执行
src属性用来引入js文件路径(可以是绝对路径,也可以是相对路径)
script标签可以用来定义js代码,也可以用来引入js文件
但是两种方式只能选其一,不能够同时使用
js执行顺序是从上到下依次执行
-->
<script type="text/javascript" src="JS与HTML结合方式(第二种).js"></script>
<script type="text/javascript">
alert("hello js")
</script>
</head>
<body>
</body>
</html>
alert("new world");
变量
变量是可以存放某些值的内存的命名
JavaScript的变量类型
①数值类型:number
②字符串类型:string
③对象类型:object
④布尔类型:boolean
⑤函数类型:function
JavaScript中特殊的值
①undefined:未定义,所有js变量没有赋予初始值的时候默认都是undefined
②null:空值
③NAN:Not a Number,非数字,非数值。
JavaScript的定义变量格式
var 变量名;
var 变量名=值;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS变量定义格式</title>
<script type="text/javascript" src="JS变量定义格式.js"></script>
</head>
<body>
</body>
</html>
var i;
i = "new world";
//typeof()是js语言提供的取变量数据类型返回的函数
alert(typeof (i));
var j = 32;
alert(typeof (j))
var a = 12;
var b = "abc";
alert(a * b); //输出NaN
关系运算符
常规关系运算符与Java语言相通,不相同的如下:
等于:==,等于是指简单的字面值的比较
全等于:===,除了做字面值的比较外,还会比较两个变量的数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关系运算符</title>
<script type="text/javascript" src="关系运算符.js"></script>
</head>
<body>
</body>
</html>
var a = "12";
var b = 12;
alert(a==b); //true
alert(a===b); //false
逻辑运算符
且运算:&&
或运算:||
取反运算:!
在JS语言中,所有变量都可以作为一个boolean类型的变量来使用,0、null、undefined、""(空字符串)都认为为false;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>逻辑运算</title>
<script type="text/javascript" src="逻辑运算.js"></script>
</head>
<body>
</body>
</html>
/**
* 在JS语言中,所有变量都可以作为一个boolean类型的变量来使用
* 0、null、undefined、""(空字符串)都认为为false
*/
var a = 0;
if (a){
alert("0为true");
}else {
alert("0为false");
}
var b = null;
if (b){
alert("null为true");
}else {
alert("null为false");
}
var c = undefined;
if (c){
alert("undefined为true");
}else {
alert("undefined为false");
}
var d = "";
if (d){
alert("空串为true");
}else {
alert("空串为false")
}
/**
* &&且运算两种情况:
* ①当表达式全为true的时候,返回最后一个表达式的值
* ②当表达式中有一个为false的时候,返回第一个为false的表达式的值
*
* ||或运算两种情况:
* ①当表达式全为false时,返回最后一个表达式的值
* ②当有一个表达式为true时,返回第一个为true的表达式的值
*
* 并且&&且运算 和 ||或运算 有短路,也就是说当&&或者||运算有了结果后,后面的表达式将不再执行
*/
var e = "abc";
var f = true;
var g = false;
var h = null;
alert(e && f); //返回f的值”true"
alert(f && e); //返回e的值"abc"
alert(e && g); //返回g的值“false”
alert(e && h); //返回h的值"null"
alert(e && g && h); //返回g的值"false"
alert(g || h); //返回h的值"null"
alert(h || g); //返回g的值"false"
alert(e || h); //返回e的值"abc"
数组
数组的定义:
var 数组名 = []; //空数组
var 数组名 = [1,'abc',true]; //定义数组同时赋值元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组</title>
<script type="text/javascript" src="数组.js"></script>
</head>
<body>
</body>
</html>
var a = [true,1]; //定义一个空数组
alert(a.length); //0
a[0] = 12;
alert(a[0]); //12
alert(a.length); //1
/*js语言中的数组,只要通过数组下标值添加元素,数组就会按照最大下标值进行扩容*/
a[2] = "new world";
alert(a.length); //3
alert(a[1]); //undefined
/*数组遍历*/
for (var i = 0; i < a.length; i++) {
alert(a[i]);
}
函数
函数的定义方式有两种:
第一种:可以使用function关键字来定义函数;
function 函数名(形参列表){
函数体
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数的定义(第一种)</title>
<script type="text/javascript" src="函数的定义(第一种).js"></script>
</head>
<body>
</body>
</html>
function f1(){
alert("无参函数被调用!")
}
//函数被调用才会执行
f1();
function f2(a,b){
alert("有参函数被调用!a=" + a + "b=" + b)
}
f2(1,"abc");
//在js语言中,定义有返回值的函数:只需要在函数体中直接使用return语句返回值即可
function f3(a,b){
return a+b;
}
alert(f3(1,2));
第二种:格式如下
var 函数名 = function(形参列表){ 函数体 }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数的定义(第二种)</title>
<script type="text/javascript" src="函数的定义(第二种).js"></script>
</head>
<body>
</body>
</html>
var f1 = function (a,b){
return a+b;
}
alert(f1(100,200));
注意:在JS中函数的重载会直接覆盖掉上一次定义的函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS中不允许函数的重载</title>
<script type="text/javascript" src="JS中不允许函数的重载.js"></script>
</head>
<body>
</body>
</html>
function f1(){
alert("无参函数f1被调用!")
}
function f1(a,b){
alert("有参函数f1被调用!")
}
f1(); //有参函数f1被调用
f1(1,2) //有参函数f1被调用
函数的arguments隐形参数(只在function函数内)
在function函数中不需要定义,可以直接用来获取所有参数的变量,称为隐形参数;相当于java语言中的可变长参数,可变长参数其实是一个数组,js中的隐形参数也和java可变长参数相同操作类似数组。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>隐形参数arguments</title>
<script type="text/javascript" src="隐形参数arguments.js"></script>
</head>
<body>
</body>
</html>
function f1() {
alert(arguments.length); //查看函数参数个数
for (var i = 0; i < arguments.length; i++) {
alert(arguments[i]); //相当于操作参数数组
}
alert("无参函数f1()");
}
f1(1,2,3,4,5);
//计算所有参数相加的和并返回
function sum(num1,num2) {
var result = 0;
for (var i = 0; i < arguments.length; i++) {
if (typeof (arguments[i]) == "number"){
result = result + arguments[i];
}
}
return result;
}
alert(sum(1,2,3,4,5,6,7,8,9));
JS中的自定义对象
Object形式的自定义对象
对象的定义:
var 变量名 = new Object(); //对象实例(空对象)
变量名.属性名 = 值; //定义一个属性
变量名.函数名 = function(){} //定义一个函数
对象的访问:
变量名.属性名/函数名();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Object形式的自定义变量</title>
<script type="text/javascript" src="Object形式的自定义对象.js"></script>
</head>
<body>
</body>
</html>
var obj1 = new Object();
obj1.name = "pero";
obj1.run = function () {
alert(this.name + "跑起来!")
}
alert(obj1.name);
obj1.run();
{}花括号形式的自定义对象
var 变量名 = {
属性名:值,
属性名:值,
函数名:function(){}
}; //定义一个对象(空对象)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>花括号形式的自定义对象</title>
<script type="text/javascript" src="花括号形式的自定义对象.js"></script>
</head>
<body>
</body>
</html>
var obj1 = {
name:"nano",
run:function () {
alert(this.name + "跑起来!")
}
};
obj1.run();
JS中的事件
事件是指电脑输入设备与页面进行交互的响应
常用的事件
①onload加载完成事件:页面加载完成后,常用于做页面js代码初始化操作;
②onclick单击事件:按钮的点击响应操作;
③onblur失去焦点事件:常用于输入框失去焦点后验证其输入内容是否合法;
④onchange内容发生改变事件:常用下拉列表和输入框内容发生改变后的操作;
⑤onsubmit表单提交事件:常用于表单提交前验证所有表单是否合法。
事件的注册
通知浏览器当事件响应后要执行哪些操作代码,成为事件注册或者事件绑定
静态注册事件:
通过HTML标签的事件属性直接赋予事件响应后的代码
动态注册事件:
先通过JS代码获取HTML标签的dom对象,然后再通过dom对象.事件名 = function(){}这种形式赋予事件响应后的代码
动态注册基本步骤:①获取标签对象;②标签对象.事件名 = function(){}
onload事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onload事件</title>
<script type="text/javascript" src="onload事件.js"></script>
</head>
<!-- 静态注册onload事件
onload事件是浏览器解析完页面之后会自动触发的事件
<body onload="onloadFun()">
-->
<body>
</body>
</html>
function onloadFun() {
alert("静态注册onload事件,相关代码!")
}
//onload事件动态注册固定的写法
window.onload = function () {
alert("动态注册的onload事件")
}
onclick按钮事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onclick事件</title>
<script type="text/javascript" src="onclick事件.js"></script>
</head>
<body>
<!-- 静态注册onclick事件-->
<button onclick="onclickFun()">按钮1</button><br/>
<button id="btn01">按钮2</button>
</body>
</html>
function onclickFun() {
alert("静态注册onclick事件")
}
//动态注册onclick事件
window.onload = function () {
//①获取标签对象
/**
* document是JS语言提供的一个对象(文档),整个html页面的所有内容
* getElementById():通过id属性获取标签对象
*/
var btnObj = document.getElementById("btn01");
//alert(btnObj);
//②通过标签对象.事件名 = function(){}
btnObj.onclick = function () {
alert("动态注册的onclick事件")
}
}
onblur失去焦点事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onblur失去焦点事件</title>
<script type="text/javascript" src="onblur失去焦点事件.js"></script>
</head>
<body>
<table>
<tr>
<td>用户名:</td>
<td><input type="text" onblur="onblurFun();"/></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" id="pw01"/></td>
</tr>
<tr>
<td><button>重置</button></td>
<td><button>提交</button></td>
</tr>
</table>
</body>
</html>
//静态注册失去焦点事件
function onblurFun() {
//console是控制台对象,是由JS语言提供,专门用来向浏览器的控制器打印输出,用于测试
//log()是打印方法
console.log("静态注册失去焦点事件");
}
//动态注册失去焦点事件
window.onload = function (){
//①获取标签对象
var pw01 = document.getElementById("pw01");
//②通过标签对象.事件名 = function(){};
pw01.onblur = function () {
console.log("动态注册失去焦点事件")
}
}
onchange事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onchange事件</title>
<script type="text/javascript" src="onchange事件.js"></script>
</head>
<body>
<!-- 静态注册onchange事件 -->
国籍:
<select onchange="onchangeFun()">
<option>---请选择你的国籍---</option>
<option>中国</option>
<option>美国</option>
<option>法国</option>
<option>英国</option>
<option>德国</option>
</select><br/>
想前往的国家:
<select id="sel01">
<option>---请选择你的国籍---</option>
<option>中国</option>
<option>美国</option>
<option>法国</option>
<option>英国</option>
<option>德国</option>
</select>
</body>
</html>
function onchangeFun(){
alert("国籍已改变")
}
//动态注册onchange事件
window.onload = function () {
//①获取标签对象
var selObj = document.getElementById("sel01");
//②通过标签对象.事件名 = function(){}
selObj.onchange = function () {
alert("想前往的国家已经改变")
}
}
onsubmit事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onsubmit事件</title>
<script type="text/javascript" src="onsubmit事件.js"></script>
</head>
<body>
<!-- return false可以组织表单提交 -->
<form action="https://localhost:8080" method="get" onsubmit="return onsubmitFun()">
<input type="submit" value="静态注册onsubmit事件"/>
</form>
<form action="https://localhost:8080" method="get" id="form01">
<input type="submit" value="动态注册onsubmit事件"/>
</form>
</body>
</html>
//静态注册表单提交onsubmit事件
function onsubmitFun() {
//需要验证所有表单项是否合法,如果有一个不合法阻止表单提交
alert("静态注册onsubmit事件,表单不合法阻止提交");
return false;
}
//动态注册表单提交onsubmit事件
window.onload = function () {
//①获取标签对象
var formObj = document.getElementById("form01");
//②通过标签对象.事件名 = function(){}
formObj.onsubmit = function () {
alert("动态注册onsubmit事件,表单不合法阻止提交");
return false;
}
}
DOM模型
全称为Document Object Model 文档对象模型,就是将HTMl页面文档中的标签、属性、文本转换成为对象来管理
Document对象
<html>
<head>
<title>MyHtml.html<title>
</head>
<body>
<a href="https://localhost:8080">我的链接</a>
<h1>我的标题</h1>
</body>
</html>
文档 | |||
根元素 <html> | |||
元素 <head> | 元素 <body> | ||
元素 <title> | 属性 href | 元素 <a> | 元素 <h1> |
文本 "文档标题" | 文本 "我的链接" | 文本 "我的标题" |
Document对象理解
①Document对象管理了所有的html文档内容;
②Document是一种树状结构的文档,有层级关系;
③把所有的标签都对象化;
④可以通过Document访问所有的标签对象。
Document对象中的方法
①document.getElementByID(elementID)
通过标签的id属性查找标签dom对象,elementID是标签的id属性
②document.getElementsByName(elementName)
通过标签的name属性查找标签dom对象,elementName是标签的name属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>getElementsByName</title>
<script type="text/javascript" src="getElementsByName.js"></script>
</head>
<body>
<table>
<tr>
<td>兴趣爱好:</td>
<td><input type="checkbox" name="hobby" value="JavaScript" checked="checked">JavaScript</td>
<td><input type="checkbox" name="hobby" value="Java">Java</td>
<td><input type="checkbox" name="hobby" value="Go">Go</td>
<td><input type="checkbox" name="hobby" value="C#/CPP">C#/C++</td>
</tr>
<tr>
<td><button id="checkAll">全选</button></td>
<td><button id="checkNo">全不选</button></td>
<td><button id="checkReverse">反选</button></td>
</tr>
</table>
</body>
</html>
window.onload = function () {
var checkAllObj = document.getElementById("checkAll");
var checkNoObj = document.getElementById("checkNo");
var checkReverseObj = document.getElementById("checkReverse");
checkAllObj.onclick = function () {
//获取指定name属性查询返回多个标签对象集合,该集合的操作和数组相同
//集合中每个元素都是dom对象,元素顺序就是在页面中从上到下的顺序
var hobbies = document.getElementsByName("hobby");
for (var i = 0; i < hobbies.length; i++) {
hobbies[i].checked = true;
}
}
checkNoObj.onclick = function () {
var hobbies = document.getElementsByName("hobby");
for (var i = 0; i < hobbies.length; i++) {
hobbies[i].checked = false;
}
}
checkReverseObj.onclick = function () {
var hobbies = document.getElementsByName("hobby");
for (var i = 0; i < hobbies.length; i++) {
if (hobbies[i].checked){
hobbies[i].checked = false;
}else {
hobbies[i].checked = true;
}
}
}
}
③document.getElementsByTagName(tagName)
通过标签名查找标签dom对象,tagName是标签名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>getElementByTagName</title>
<script type="text/javascript" src="getElementsByTagName.js"></script>
</head>
<body>
<table>
<tr>
<td>兴趣爱好:</td>
<td><input type="checkbox" value="JavaScript" checked="checked">JavaScript</td>
<td><input type="checkbox" value="Java">Java</td>
<td><input type="checkbox" value="Go">Go</td>
<td><input type="checkbox" value="C#/CPP">C#/C++</td>
</tr>
<tr>
<td><button id="checkAll">全选</button></td>
<td><button id="checkNo">全不选</button></td>
<td><button id="checkReverse">反选</button></td>
</tr>
</table>
</body>
</html>
window.onload = function () {
var checkAllObj = document.getElementById("checkAll");
var checkNoObj = document.getElementById("checkNo");
var checkReverseObj = document.getElementById("checkReverse");
checkAllObj.onclick = function () {
//获取指定tagName属性查询返回多个标签对象集合,该集合的操作和数组相同
//集合中每个元素都是dom对象,元素顺序就是在页面中从上到下的顺序
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
inputs[i].checked = true;
}
}
checkNoObj.onclick = function () {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
inputs[i].checked = false;
}
}
checkReverseObj.onclick = function () {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked){
inputs[i].checked = false;
}else {
inputs[i].checked = true;
}
}
}
}
④document.createElement(tagName)
通过给定的标签名,创建一个标签对象,tagName是要创建的标签名
document对象三个查询方法的使用注意事项
如果有id属性,优先使用getElementById方法来查询;如果没有id属性,优先使用getElemenstByName方法来查询;如果id属性和name属性都没有,再使用getElementsByTagName方法来查询。以上三个方法一定要在页面加载完成后执行,才能够查询到标签对象。
验证用户名是否有效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>getElementByID</title>
<script type="text/javascript" src="getElementByID.js"></script>
</head>
<body>
用户名:<input type="text" id="username" value=""/><br/>
<button onclick="onclickFun()">校验1</button><br/>
<button id="but01">校验2</button>
</body>
</html>
/**
* 点击校验按钮获取输入框中的内容,验证其是否合法
* 验证规则:必须由数字、字母、下划线组成,并且长度为5~12位
*/
function onclickFun() {
var usernameObj = document.getElementById("username");
var usernameText = usernameObj.value;
var patt = /^\w{5,12}$/;
if (patt.test(usernameText)){
alert("用户名合法")
}else {
alert("用户名不合法")
}
}
window.onload = function () {
var button01 = document.getElementById("but01");
button01.onclick = function () {
var username = document.getElementById("username");
var usernameText = username.value;
var patt = /^\w{5,12}$/;
if (patt.test(usernameText)){
alert("校验成功,用户名合法!");
}else {
alert("校验失败,用户名不合法!")
}
}
}
正则表达式对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>regexp正则表达式</title>
<script type="text/javascript" src="regexp正则表达式.js"></script>
</head>
<body>
</body>
</html>
var patt = new RegExp("e");
alert(patt); /* /e/ */
var str = "abcde";
alert(patt.test(str));
var patt01 = /[abc]/; //表示要求字符串中,是否包含字母a或b或c
var patt02 = /[a-z]/; //是否包含小写字母
var patt03 = /[A-Z]/; //是否包含大写字母
var patt04 = /[0-9]/; //是否包含数字
var patt05 = /\w/; //是否包含字母、数字、下划线
var patt07 = /n+/; //匹配任何包含至少一个n的字符串。
var patt08 = /n*/; //匹配任何包含零个或多个n的字符串。
var patt09 = /n?/; //匹配任何包含零个或一个n的字符串。
var patt10 = /n{3}/; //匹配包含连续3个n的序列的字符串。
var patt11 = /n{5,12}/; //匹配包含5至12个连续n的序列的字符串。
var patt12 = /n{2,}/; //匹配包含至少2个连续n的序列的字符串。
var patt13 = /n$/; //匹配任何结尾为 n 的字符串。
var patt14 = /^n/; //匹配任何开头为 n 的字符串。
var patt15 = /a=n/; //匹配任何其后紧接指定字符串 n 的字符串。
var patt16 = /a!n/; //匹配任何其后没有紧接指定字符串 n 的字符串
var patt17 = /^a{3,5}$}/; //从头到尾必须完全匹配,有连续字符a三到五个
验证提示效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户名验证</title>
<link rel="stylesheet" href="用户名验证.css">
<script type="text/javascript" src="用户名验证.js"></script>
</head>
<body>
<form action="http://localhost:8080" method="get" id="form01">
<table>
<tr>
<td>用户名:</td>
<td><input type="text" id="userName" value=""/></td>
<td><span id="userNameSpan"></span></td>
</tr>
<tr>
<td><input type="reset" value="重置" ></td>
<td><input type="submit" value="提交"></td>
</tr>
</table>
</form>
</body>
</html>
#userNameSpan{
color: red;
}
#img{
width: 18px;
height: 18px;
}
/**
* 用户名输入完毕后光标离开后显示输入内容是否合法
*/
//动态注册
window.onload = function (){
//获取userName标签对象
var usernameObj = document.getElementById("userName");
var submitObj = document.getElementById("form01");
usernameObj.onblur = function (){
var usernameText = usernameObj.value;
var unameSpanObj = document.getElementById("userNameSpan");
var patt = /^\w{5,12}$/;
if (patt.test(usernameText)){
unameSpanObj.innerHTML = "<img src=\"../imags/对.png\" id=\"img\" >";
}else {
unameSpanObj.innerHTML = "<img src=\"../imags/错.png\" id=\"img\" >";
}
}
submitObj.onsubmit = function () {
var usernameText = usernameObj.value;
var patt = /^\w{5,12}$/;
if (patt.test(usernameText)){
alert("提交成功,表单合法");
return true;
}else {
alert("提交失败,表单不合法");
return false;
}
}
}
节点的常用属性和方法
节点是指标签的对象
常用属性
①ChildNodes属性,获取当前节点的所有子节点
②firstChild属性,获取当前节点的第一个子节点
③lastChild属性,获取当前节点的最后一个子节点
④parentNode属性,获取当前节点的父节点
⑤nextSibling属性,获取当前节点的下一个节点
⑥previousSibling属性,获取当前节点的上一个节点
⑦className属性,获取或设置标签的class属性值
⑧innerHTML属性,获取或设置起始标签和结束标签中的内容
⑨innerText属性,获取或设置起始标签和结束标签中的文本
常用方法
①getElementsByTagName()方法,获取当前节点的指定标签名子节点
②appendChild(oChildNode)方法,可以添加一个子结点,oChildNode是要添加的子节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM查询练习</title>
<link rel="stylesheet" href="DOM查询练习.css">
<script type="text/javascript" src="DOM查询练习.js"></script>
</head>
<body>
<div id="total">
<div class="inner">
<p>
喜欢的城市
</p>
<ul id="city">
<li id="bj">北京</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/>
<p>
手机操作系统
</p>
<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
</div>
<div class="inner">
gender:
<input type="radio" name="gender" value="male"/>
Male
<input type="radio" name="gender" value="female"/>
Female
<br>
<br>
name:
<input type="text" name="name" id="username" value="pero"/>
</div>
</div>
<div id="btnList">
<div><button id="btn01">查找#bj节点</button></div>
<div><button id="btn02">查找所有li节点</button></div>
<div><button id="btn03">查找name="gender"的所有节点</button></div>
<div><button id="btn04">查找#city下所有li节点节点</button></div>
<div><button id="btn05">返回#city下所有子节点</button></div>
<div><button id="btn06">返回#phone的第一个子节点</button></div>
<div><button id="btn07">返回#bj的父节点</button></div>
<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
<div><button id="btn09">返回#username的value属性值</button></div>
<div><button id="btn10">设置#username的value属性值</button></div>
<div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body>
</html>
@charset "UTF-8";
body{
width: 800px;
margin-left: auto;
margin-right: auto;
}
button{
width: 300px;
margin-bottom: 10px;
}
#btnList{
float: left;
}
#total{
width: 450px;
float: left;
}
ul{
list-style-type: none;
margin: 0px;
padding: 0px;
}
li{
background: #cce5ff;
float: left;
margin: 5px;
}
div{
border: 1px solid black;
}
window.onload = function () {
document.getElementById("btn01").onclick = function () {
var bjObj = document.getElementById("bj");
alert(bjObj.innerHTML);
};
document.getElementById("btn02").onclick = function () {
var lis = document.getElementsByTagName("li");
alert(lis.length);
};
document.getElementById("btn03").onclick = function () {
var genders = document.getElementsByName("gender");
alert(genders.length);
};
document.getElementById("btn04").onclick = function (){
var lis = document.getElementById("city").getElementsByTagName("li");
alert(lis.length);
};
document.getElementById("btn05").onclick = function () {
var cityChildNodes = document.getElementById("city").childNodes;
alert(cityChildNodes.length);
};
document.getElementById("btn06").onclick = function () {
var phoneFirstChild = document.getElementById("phone").firstChild;
alert(phoneFirstChild.innerHTML);
};
document.getElementById("btn07").onclick = function () {
var bjParentNode = document.getElementById("bj").parentNode;
alert(bjParentNode.innerHTML);
};
document.getElementById("btn08").onclick = function () {
var androidPreviousSibling = document.getElementById("android").previousSibling;
alert(androidPreviousSibling.innerHTML)
};
document.getElementById("btn09").onclick = function () {
var userNameValue = document.getElementById("username").value;
alert(userNameValue);
};
document.getElementById("btn10").onclick = function () {
document.getElementById("username").value = "nano";
};
document.getElementById("btn11").onclick = function () {
var bjInnerText = document.getElementById("bj").innerText;
alert(bjInnerText);
/**
* innerText取出标签的文本内容,标签内容剔除
* innerHTMl取出标签的所有内容,包括标签内容
*/
}
}
document对象补充说明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>createElement</title>
<script type="text/javascript" src="createElement.js"></script>
</head>
<body>
<div>new world</div>
</body>
</html>
window.onload = function () { //页面加载后才能在body中添加div标签
var divObj = document.createElement("div");
//divObj.innerHTML = "nano"; //在内存中没有显示出来
var textNodeObj = document.createTextNode("pero");
divObj.appendChild(textNodeObj);
document.body.appendChild(divObj); //在body中添加div标签(子节点)
}