Browser对象
一、Navigator：
Navigator对象包含有关浏览器的信息。
二、Window:
Window对象表示浏览器中打开的窗口。
window对象常用方法：
alert('信息')：消息框
prompt('提示信息',默认值)：标准输入框
confirm():确认框
open():打开一个新窗口
close():关闭窗口
Form表单对象：
访问表单的方式：
- document.forms[n]
- document.表单名字
Form表单属性：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>form.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<form name="form1" action="test.html" method="post">
<input type="text" name="username" value="zhang" />
<input type="button" name="ok" value="保存1" οnclick="a()"/>
</form>
<form name="form2" action="test1.html" method="get">
<input type="text" name="username" value="zhang2" />
<input type="button" name="ok2" value="保存2"/>
</form>
<input type="text" id="user" value="123">
</body>
<script language="JavaScript">
/**
//显示文本框里面的值
window.alert(window.document.getElementById("user").value);
//通过表单元素的id获取该元素对象
var user = window.document.getElementById("user");
for(var i = 0;i < 3;i ++){//循环遍历3次，通过消息框显示
window.alert(user);
}
*/
//---------------------访问表单的方式----------------------------------
// document.forms[n]
// document.表单的名称
// 使用两种方式输出表单的action值（使用表单的名称，使用表单数组forms）
//第一种(使用表单数组forms)
// window.alert(window.document.forms[0].action);
//第二种(使用表单的名称)
// window.alert(window.document.form1.action);
// alert(document.forms[1].action);
// alert(document.form2.action);
//-------------练习：使用访问表单的方式，获取表单1中的method的值--------------------------------------------------------
alert(document.forms[0].method);
alert(document.form1.method);
</script>
</html>
JavaScript定义函数的几种方式：
参考链接： http://blog.sina.com.cn/s/blog_86e34ca8010139gj.htmlfunctionMethod.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>form.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<form name="form1" action="test.html" method="post">
<input type="text" name="username" value="zhang" />
<input type="button" name="ok" id="ok" value="保存1" />
</form>
</body>
<script language="JavaScript">
//JavaScript定义函数的三种方式
//方式一：正常方法
function print(msg){
alert("msg");
}
//方式二：构造函数方式定义JavaScript函数
var add = new Function("a","b","return a+b");
//调用上面使用构造函数方式定义JavaScript函数
alert(add(7,8));
//方式三：使用函数直接量的方式定义函数
var sum = function(a,b){
return a+b;
}
//调用使用函数直接量定义的函数
alert(sum(5,6));
//应用
document.getElementById("ok").onclick = function(){
alert("ok");
}
</script>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>form.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<form name="form1" action="" method="post">
<input type="text" name="username" value="zhang" />
<input type="button" name="ok" value="打印患者信息" οnclick="personprint()" />
<input type="button" name="ok" value="查询患者信息" οnclick="selectPerson()"/>
</form>
</body>
<script language="JavaScript">
//通过javascript方式访问printPerson.html和selectPerson.html两个页面
//打印患者信息
function personprint(){
//第一种
/**
* 定义和用法:
* href 属性是一个可读可写的字符串，可设置或返回当前显示的文档的完整 URL。
* 因此，我们可以通过为该属性设置新的 URL，使浏览器读取并显示新的 URL 的内容。
* 语法：
* location.href=URL
*/
// location.href="printPerson.html";
//第二种
//获取表单对象
// var form1 = document.form1;
//设置表单中action的值
// form1.action="printPerson.html";
//提交表单
// form1.submit();
}
//查询患者信息
function selectPerson(){
document.form1.action="selectPerson.html";
document.form1.submit();
}
</script>
</html>
DOM:
- DOM ：DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范,DOM是一种与浏览器，平台，语言无关的接口，使得你可以访问页面其他的标准组件。
- D：文档 – html 文档 或 xml 文档
- O：对象 – document 对象的属性和方法
- M：模型
DOM 是针对xml(html)的基于树的API。DOM树:节点（node）的层次。DOM 把一个文档 DOM定义了Node的接口以及许多种节点类型来表示XML表示为一棵家谱树（父，子，兄弟）节点的多个方面。
DOM的结构：
DOM结构分析：
- 节点
- 由结构图中我们可以看到，整个文档就是一个文档节点。
- 而每一个HMTL标签都是一个元素节点。
- 标签中的文字则是文本节点。
- 标签的属性是属性节点。
- 一切都是节点……
- 节点树
- 节点树的概念从图中一目了然，最上面的就是“树根”了。节点之间有父子关系，祖先与子孙关系，兄妹关系。这些关系从图中也很好看出来，直接连线的就是父子关系了。而有一个父亲的就是兄妹关系……
查找元素节点：
Document对象方法：
getElementById() 返回对拥有指定 id 的第一个对象的引用。
寻找一个有着给定 id 属性值的元素，返回值是一个有着给定 id 属性值的元素节点。如果不存在这样的元素，它返回 null.
var oElement = document.getElementById ( sID )
该方法只能用于 document 对象
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>form.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<form name="form1" action="test.html" method="post">
<input type="text" name="username" value="传智播客5周年_1" id="tid" οnchange=""><input type="button" name="ok" value="保存1"/>
</form>
</body>
<script language="JavaScript">
//输出 <input type="text" name="username" value="传智播客5周年_1" id="tid" >标签value属性的值
alert(document.getElementById("tid").value)
//输出 <input type="text" name="username" value="传智播客5周年_1" id="tid" >标签type属性的值
alert(document.getElementById("tid").type)
</script>
</html>getElementsByName() 返回带有指定名称的对象集合。
寻找有着给定name属性的所有元素，这个方法将返回一个节点集合，这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定name属性的所有元素的总个数。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>form.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<form name="form1" action="test.html" method="post" >
<input type="text" name="tname" value="传智播客5周年_1" id="tid_1" ><br>
<input type="text" name="tname" value="传智播客5周年_2" id="tid_2" ><br>
<input type="text" name="tname" value="传智播客5周年_3" id="tid_3" ><br>
<input type="button" name="ok" value="保存1" />
</form>
</body>
<script language="JavaScript">
//通过元素的name属性获取所有元素的引用 name="tname"
var tnames = document.getElementsByName("tname");
//测试该数据的长度
alert(tnames.length);
//遍历元素,输出所有value属性的值
for(var i = 0;i<tnames.length;i++){
var tname = tnames[i];
alert(tname.value);
}
//为每个文本框(<input type="text">)增加chanage事件,当值改变时,输出改变的值
for(var i = 0;i<tnames.length;i++){
var tname = tnames[i];
//onchange 事件会在域的内容改变时发生。 Event对象
tname.onchange = function(){
alert(this.value);
}
}
</script>
</html>
寻找有着给定标签名的所有元素，这个方法将返回一个节点集合，这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定标签名的所有元素的总个数。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>form.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<form name="form1" action="test.html" method="post">
<input type="text" name="tname" value="传智播客5周年_1" id="tid_1">
<br>
<input type="text" name="tname" value="传智播客5周年_2" id="tid_2">
<br>
<input type="text" name="tname" value="传智播客5周年_3" id="tid_3">
<br>
<input type="button" name="ok" value="保存1"/>
</form>
<select name="edu" id="edu">
<option value="博士">博士^^^^^</option>
<option value="硕士" selected="selected">硕士^^^^^</option>
<option value="本科">本科^^^^^</option>
<option value="幼儿园">幼儿园^^^^^</option>
</select>
<select name="job" id="job">
<option value="美容">美容^^^^^</option>
<option value="IT">IT^^^^^</option>
<option value="程序员">程序员^^^^^</option>
<option value="建筑师">建筑师^^^^^</option>
</select>
</body>
<script language="JavaScript">
/**
* <input type="text" name="tname" value="传智播客5周年_1" id="tid_1" ><br>
<input type="text" name="tname" value="传智播客5周年_2" id="tid_2" ><br>
<input type="text" name="tname" value="传智播客5周年_3" id="tid_3" ><br>
<input type="button" name="ok" value="保存1"/>
*/
//
//获取所有的input元素,返回值是数组
var inputArr = document.getElementsByTagName("input");
//测试长度
alert(inputArr.length);
//遍历value的值
for (var i = 0; i < inputArr.length; i++) {
var inputValue = inputArr[i].value;
alert(inputValue);
}
///
//输出type="text"中 value属性的值 不包含按钮(button)
for (var i = 0; i < inputArr.length; i++) {
var input = inputArr[i];
if ("text" == input.type) {
alert(input.value);
}
}
///
/**
* <select name="edu" id="edu">
<option value="博士">博士^^^^^</option>
<option value="硕士" selected="selected">硕士^^^^^</option>
<option value="本科" >本科^^^^^</option>
<option value="幼儿园">幼儿园^^^^^</option>
</select>
*/
//输出所有下拉选 id="edu"中option标签中 value属性的值
var selectEdu = document.getElementById("edu");
var optionArr = selectEdu.getElementsByTagName("option");
for (var i = 0; i < optionArr.length; i++) {
var option = optionArr[i];
alert(option.value);
}
//
/**
* <select name="edu" id="edu">
<option value="博士">博士^^^^^</option>
<option value="硕士" selected="selected">硕士^^^^^</option>
<option value="本科" >本科^^^^^</option>
<option value="幼儿园">幼儿园^^^^^</option>
</select>
* <select name="job" id="job" >
<option value="美容">美容^^^^^</option>
<option value="IT">IT^^^^^</option>
<option value="程序员">程序员^^^^^</option>
<option value="建筑师">建筑师^^^^^</option>
</select>
*/
//输出所有下拉选select的option标签中value的值
var optionArrs = document.getElementsByTagName("option");
for (var i = 0; i < optionArrs.length; i++) {
alert(optionArrs[i].value);
}
//输出选中的值
var edu = document.getElementById("edu");
var job = document.getElementById("job");
alert(edu.value);
alert(job.value);
</script>
</html>
查找是否存在子节点：
- hasChildNodes()
- 该方法用来检查一个元素是否有子节点，返回值是 true 或 false.
***文本节点和属性节点不可能再包含任何子节点，所以对这两类节点使用 hasChildNodes 方法的返回值永远是 false.
如果 hasChildNodes 方法的返回值是 false，则 childNodes,firstChild,lastChild 将是空数组和空字符串。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>form.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<form name="form1" action="test.html" method="post">
<input type="text" name="tname" value="传智播客5周年_1" id="tid_1">
<br>
<input type="text" name="tname" value="传智播客5周年_2" id="tid_2">
<br>
<input type="text" name="tname" value="传智播客5周年_3" id="tid_3">
<br>
<input type="button" name="ok" value="保存1"/>
</form>
<select name="edu" id="edu">
<option value="博士">博士^^^^^</option>
<option value="硕士">硕士^^^^^</option>
<option value="本科" selected="selected">本科^^^^^</option>
<option value="幼儿园">幼儿园^^^^^</option>
</select>
<select name="job" id="job">
<option value="美容">美容^^^^^</option>
<option value="IT">IT^^^^^</option>
<option value="程序员">程序员^^^^^</option>
<option value="建筑师">建筑师^^^^^</option>
</select>
</body>
<script language="JavaScript">
/**
* <select name="edu" id="edu">
<option value="博士">博士^^^^^</option>
<option value="硕士">硕士^^^^^</option>
<option value="本科" selected="selected" >本科^^^^^</option>
<option value="幼儿园">幼儿园^^^^^</option>
</select>
*/
//查看id="edu"的节点是否含有子节点
alert(document.getElementById("edu").hasChildNodes());//true
//查看id="tid_1"的节点是否含有子节点
/**
* <input type="text" name="tname" value="传智播客5周年_1" id="tid_1" ><br>
*/
alert(document.getElementById("tid_1").hasChildNodes());//false
</script>
</html>
DOM属性：
nodeName:
文档里的每个节点都有以下属性。
nodeName:一个字符串，其内容是给定节点的名字。
var name = node.nodeName;
* 如果节点是元素节点，nodeName返回这个元素的名称
* 如果是属性节点，nodeName返回这个属性的名称
* 如果是文本节点，nodeName返回一个内容为#text 的字符串
注:nodeName 是一个只读属性
nodeType:
- nodeType：返回一个整数，这个数值代表着给定节点的类型。
- nodeType 属性返回的整数值对应着 12 种节点类型,常用的有三种：
- Node.ELEMENT_NODE ---1 -- 元素节点
- Node.ATTRIBUTE_NODE ---2 -- 属性节点
- Node.TEXT_NODE ---3 -- 文本节点
- nodeType 属性返回的整数值对应着 12 种节点类型,常用的有三种：
nodeValue:
- nodeValue：返回给定节点的当前值（字符串）
- 如果给定节点是一个属性节点，返回值是这个属性的值。
- 如果给定节点是一个文本节点，返回值是这个文本节点的内容。
- 如果给定节点是一个元素节点，返回值是 null
- nodeValue 是一个 读/写 属性，但不能对元素节点的 nodeValue 属性设置值，但可以为文本节点的 nodeValue 属性设置一个值。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>form.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<form name="form1" action="test.html" method="post" >
<input type="text" name="tname" value="传智播客5周年_1" id="tid_1" ><br>
<input type="text" name="tname" value="传智播客5周年_2" id="tid_2" ><br>
<input type="text" name="tname" value="传智播客5周年_3" id="tid_3" ><br>
<input type="button" name="ok" value="保存1"/>
</form>
<select name="edu" id="edu">
<option value="博士">博士^^^^^</option>
<option value="硕士">硕士^^^^^</option>
<option value="本科" selected="selected" >本科^^^^^</option>
<option value="幼儿园">幼儿园^^^^^</option>
</select>
<select name="job" id="job" >
<option value="美容">美容^^^^^</option>
<option value="IT">IT^^^^^</option>
<option value="程序员">程序员^^^^^</option>
<option value="建筑师">建筑师^^^^^</option>
</select>
<p id="pid" name="8888">
明天上课
</p>
</body>
<script language="JavaScript">
/**<input type="text" name="tname" value="传智播客5周年_1" id="tid_1" ><br>*/
//元素节点 id="tid_1" 输出nodeName nodeType nodeValue
var input = document.getElementById("tid_1");
alert(input.nodeName);//INPUT
alert(input.nodeType);//1
alert(input.nodeValue);//null
///
//文本节点 id="pid" 输出nodeName nodeType nodeValue
/** <p id="pid" name="8888">
明天上课
</p>*/
var pid = document.getElementById("pid");
var first = pid.firstChild;
alert(first.nodeName);// #text
alert(first.nodeType);// 3
alert(first.nodeValue);// 明天上课
/
//属性节点 id="pid" 输出nodeName nodeType nodeValue
var pid = document.getElementById("pid");
var pidAttr = pid.getAttributeNode("id");
alert(pidAttr.nodeName);//id
alert(pidAttr.nodeType);//2
alert(pidAttr.nodeValue);//pid
//为什么说nodeValue是读写属性呢？
var pid = document.getElementById("pid");
alert(pid.firstChild.nodeValue);//明天上课
</script>
</html>
练习1：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>form.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<form name="form1" action="test.html" method="post">
<input type="text" name="tname" value="传智播客5周年_1" id="tid_1">
<br>
<input type="text" name="tname" value="传智播客5周年_2" id="tid_2">
<br>
<input type="text" name="tname" value="传智播客5周年_3" id="tid_3">
<br>
<input type="button" name="ok" value="保存1"/>
</form><h1 id="h1">明天休息</h1>
</body>
<script language="JavaScript">
/*
* 文本节点 属性节点 元素节点
*/
/*
* 打印 ”明天休息” (利用两种方法)
提示:使用(firstChild lastChild childNodes)
*/
/**
* <h1 id="h1">
明天休息
</h1>
*/
//方法一 利用firstchild 输出明天休息
var h1 = document.getElementById("h1");
alert(h1.firstChild.nodeValue);
alert(h1.lastChild.nodeValue);
//方法二childNodes表示父元素下的所有的子元素(数组)
var h1 = document.getElementById("h1");
var nodeList = h1.childNodes;
for (var i = 0; i < nodeList.length; i++) {
var node = nodeList[i];
alert(node.nodeValue);
}
alert(h1.childNodes[0].nodeValue);
</script>
</html>练习2：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>form.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<form name="form1" action="test.html" method="post">
<input type="text" name="tname" value="传智播客5周年_1" id="tid_1">
<br>
<input type="text" name="tname" value="传智播客5周年_2" id="tid_2">
<br>
<input type="text" name="tname" value="传智播客5周年_3" id="tid_3">
<br>
<input type="button" name="ok" value="保存1"/>
</form>
<select name="edu" id="edu">
<option value="博士">博士^^^^^</option>
<option value="硕士">硕士^^^^^</option>
<option value="本科" selected="selected">本科^^^^^</option>
<option value="幼儿园">幼儿园^^^^^</option>
</select>
<select name="job" id="job">
<option value="美容">美容^^^^^</option>
<option value="IT">IT^^^^^</option>
<option value="程序员">程序员^^^^^</option>
<option value="建筑师">建筑师^^^^^</option>
</select>
<ul>
<li id="bj" value="beijing">
北京
<p>
海淀
</p>
奥运
</li>
<li id="sh" value="shanghai">
上海
</li>
</ul>
</body>
<script language="JavaScript">
//打印出 id=“bj” 该节点的所有子节点的(nodeName, nodeType, nodeValue)
var bj = document.getElementById("bj");
var childNodes = bj.childNodes;
for (var i = 0; i < childNodes.length; i++) {
var childNode = childNodes[i];
alert("nodeName:"+childNode.nodeName+",nodeType:"+childNode.nodeType+",nodeValue:"+childNode.nodeValue);
}
//第一个子节点
var firstNode = bj.firstChild;
alert("nodeName:" + firstNode.nodeName + ",nodeType:" + firstNode.nodeType + ",nodeValue:" + firstNode.nodeValue);
// //第二个子节点
var secondNode = bj.childNodes[1];
alert("nodeName:" + secondNode.nodeName + ",nodeType:" + secondNode.nodeType + ",nodeValue:" + secondNode.nodeValue);
// //最后一个子节点
var lastNode = bj.lastChild;
alert("nodeName:" + lastNode.nodeName + ",nodeType:" + lastNode.nodeType + ",nodeValue:" + lastNode.nodeValue);
//同时打印文本值 北京 海淀 奥运
for (var i = 0; i < childNodes.length; i++) {
var childNode = childNodes[i];
alert("nodeValue:" + childNode.nodeValue);
}
</script>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>form.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<form name="form1" action="test.html" method="post">
<input type="text" name="tname" value="传智播客5周年_1" id="tid_1">
<br>
<input type="text" name="tname" value="传智播客5周年_2" id="tid_2">
<br>
<input type="text" name="tname" value="传智播客5周年_3" id="tid_3">
<br>
<input type="button" name="ok" value="保存1"/>
</form>
<select name="edu" id="edu">
<option value="博士">博士^^^^^</option>
<option value="硕士">硕士^^^^^</option>
<option value="本科" selected="selected">本科^^^^^</option>
<option value="幼儿园">幼儿园^^^^^</option>
</select>
</body>
<script language="JavaScript">
//获取select元素的引用
//输出所有select元素下的所有option元素中对应的文本内容
//例如:<option value="中专">中专^^</option> 输出--->中专^^
var edu = document.getElementById("edu");
var eduOptions = edu.getElementsByTagName("option");
for (var i = 0; i < eduOptions.length; i++) {
var eduOption = eduOptions[i];
//方法一：
alert(eduOption.firstChild.nodeValue);
//方法二：
alert(eduOption.text);
//方法三：
alert(eduOption.innerHTML);
}
</script>
</html>
扫一扫
536
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
