DOM操作
访问表单的方式：
1.document.forms[n]
2.document.表单名字
3.document.getElementById(“id”)
4.document.getElementsByName(“form1”)[0]
<html>
<head>
</head>
<body>
<form name="form1" action="aa.html" method="post">
<input type="text" name="name" value="zhangsan"/> <br />
<input type="text" name="age" value="23"/> <br />
</form>
<form name="form2" action="bb.html" method="post">
<input type="text" name="name" value="zhangsan"/><br />
<input type="text" name="age" value="23"/> <br />
</form>
<script type="text/javascript">
alert(document.form1.action);//aa.html
alert(document.forms[0].action);//aa.html
alert(document.getElementsByName("form2")[0].action)//bb.html
</script>
</body>
</html>
定义函数的三种方式
- 正常方式
<html>
<head>
</head>
<body>
<form name="form1">
<input type="button" value="打印" onclick="print()"/>
<input type="button" value="查询" onclick="select()"/>
</form>
<script type="text/javascript">
function print(){
var formElement=document.form1;
formElement.action="print.html";
formElement.method="post";
formElement.submit();
}
function select(){
var formElement=document.form1;
formElement.action="select.html";
formElement.method="post";
formElement.submit();
}
</script>
</body>
</html>
- 使用构造函数方式定义javascript函数
<html>
<head>
</head>
<body>
<script type="text/javascript">
// function add(a,b){
// return a+b;
// }
// alert(add(3,4));
//两种方式一样
var add=new Function('a','b','return a+b;');
alert(add(3,4));
</script>
</body>
</html>
- 函数直接量定义函数
<html>
<head>
</head>
<body>
<script type="text/javascript">
// function add(a,b){
// return a+b;
// }
// alert(add(3,4));
//方式2
// var add=new Function('a','b','return a+b;');
// alert(add(3,4));
//方式3
var add=function(a,b){
return a+b;
}
alert(add(3,4));
</script>
</body>
</html>
DOM
DOM(Document Object Model):文档对象模型，根据W3C DOM规范，DOM是一种与浏览器、平台、语言无关的接口。是你可以访问页面其他的标准组件。
D:文档----html文档或xml文档
O:对象----document对象的属性或方法
M:模型
DOM:是针对xml(html)的基于树的API
DOM树：节点(node)的层次
DOM把一个文档当作一家谱树(父、子、兄)
DOM定义了Node的接口及许多节点类型来表示XML节点的多个方面
查找元素节点
1.getElementById():返回值是元素节点(可以这样理解：元素节点相当于对象、元素节点中的属性相当于元素节点对象的属性)
该方法只能用于document对象
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<form>
<input type="text" value="zhangsan" id="input1"/>
</form>
<script language="javascript">
var inputElement=document.getElementById("input1");
alert(inputElement.value);
alert(inputElement.type);
</script>
</body>
</html>
2.getElementsByName():寻找给定name属性的所有元素，返回一个节点集合，这个集合可以当作数组来处理
这个集合的length属性是当前文档里有着给定name属性的所有元素总个数
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<form>
<input type="text" value="zhangsan" id="input1" onchange="change(this.id)"/>
<input type="text" value="lisi" id="input2" onchange="change(this.id)"/>
<input type="text" value="wangwu" id="input3" onchange="change(this.id)"/>
</form>
<script language="javascript">
// var inputElement=document.getElementsByName("input1");
// alert(inputElement.length);
// for(var i=0;i<inputElement.length;i++){
// alert(inputElement[i].value);
// }
function change(id){
alert(document.getElementById(id).value);
}
</script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<form>
<input type="text" value="zhangsan" id="input1"/>
<input type="text" value="lisi" id="input1"/>
<input type="text" value="wangwu" id="input1"/>
</form>
<script language="javascript">
// var inputElement=document.getElementsByName("input1");
// alert(inputElement.length);
// for(var i=0;i<inputElement.length;i++){
// alert(inputElement[i].value);
// }
// function change(id){
// alert(document.getElementById(id).value);
// }
for(var i=0;i<document.getElementsByName("input1").length;i++){
var inputElement=document.getElementsByName("input1")[i];
//onchange是inputElement元素节点的一个事件属性，因此可以通过下面方式赋值
//采用匿名函数
inputElement.onchange=function(){
alert(this.value);
}
}
</script>
</body>
</html>
3.getElementsByTagName():寻找有着给定标签名的所有元素，这个方法将返回一个节点集合这个集合可以当作数组来处理
这个集合的length属性是当前文档里有着给定标签名的所有元素总个数
var elements=document.documentsByTagName(tagName)
var elements=element.documentsByTagName(tagName)
该方法不必非得用到整个文档上，也可以用来在某个特定元素的子节点当中寻找有着给定标签名的元素。
var container=document.getElementById(“sid”);
var elements= container.documentsByTagName(“p”);
alert(elements.length);
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<form>
<input type="text" value="zhangsan"/>
<input type="text" value="lisi"/>
<input type="text" value="wangwu"/>
<input type="button" value="保存"/>
</form>
<script language="javascript">
var inputElements=document.getElementsByTagName("input");
// alert(inputElements.length);
// for(var i=0;i<inputElements.length;i++){
// //会把保存也输出
// alert(inputElements[i].value);
// }
for(var i=0;i<inputElements.length;i++){
if (inputElements[i].type!="button") {
alert(inputElements[i].value);
}
}
</script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<select name="edu" id="edu">
<option value="本科">本科</option>
<option value="硕士" selected="selected">硕士</option>
<option value="博士">博士</option>
</select>
<script language="javascript">
// var eduElement=document.getElementById("edu");
// var options=eduElement.getElementsByTagName("option");
// for(var i=0;i<options.length;i++){
// alert(options[i].value);
// }
//获取select被选中的值
var value=document.getElementById("edu").value;
alert(value);
</script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<select name="edu" id="edu">
<option value="本科">本科</option>
<option value="硕士" selected="selected">硕士</option>
<option value="博士">博士</option>
</select>
<select name="edu" id="job">
<option value="学生">学生</option>
<option value="厨师" selected="selected">厨师</option>
</select>
<script language="javascript">
//输出所有option的value
var options=document.getElementsByTagName("option");
for(var i=0;i<options.length;i++){
alert(options[i].value);
}
</script>
</body>
</html>
查看是否存在子节点
hasChildNodes():返回值有true/false
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<select name="edu" id="edu">
<option value="本科">本科</option>
<option value="硕士" selected="selected">硕士</option>
<option value="博士">博士</option>
</select>
<select name="edu" id="job">
<option value="学生">学生</option>
<option value="厨师" selected="selected">厨师</option>
</select>
<script language="javascript">
var eduElement=document.getElementById("edu");
alert(eduElement.hasChildNodes());
</script>
</body>
</html>
DOM属性
1. nodeName：只读属性
文档里的每个节点都有以下属性
元素节点：nodeName返回的是这个元素的名称
属性节点：nodeName返回的是这个属性的名称
文本节点：nodeName返回一个内容为#text的字符串
2. nodeType: 只读属性
返回一个整数，这个值代表给定节点的类型。nodeType对应12种节点类型，常用的有以下三种
Node.ELEMENT_NODE --1 元素节点
Node.ATTRIBUTE_NODE --2 属性节点
Node.TEXT_NODE --3 文本节点
3. nodeValue
返回给定节点的当前值
元素节点：返回值是null
属性节点：返回值是这个属性的值
文本节点：返回值是这个文本节点的内容
nodeValue是一个读/写属性，但是不能对元素节点的nodeValue属性设置值，但可以为文本节点的nodeValue属性设置一个值
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<select name="edu" id="edu">
<option value="本科">本科</option>
<option value="硕士" selected="selected">硕士</option>
<option value="博士">博士</option>
</select>
<select name="edu" id="job">
<option value="学生">学生</option>
<option value="厨师" selected="selected">厨师</option>
</select>
<p id="pid" name="aa">hello</p>
<script language="javascript">
//元素节点
// var eduElement=document.getElementById("edu");
// alert(eduElement.nodeName);//select
// alert(eduElement.nodeType);//1
// alert(eduElement.nodeValue);//null
//属性节点
var nameEle=document.getElementById("pid");
var attrEle=nameEle.getAttributeNode("name");
alert(attrEle.nodeName);//name
alert(attrEle.nodeType);//2
alert(attrEle.nodeValue);//aa
//文本节点
// var pElement=document.getElementById("pid");//元素节点
// var txtElement=pElement.firstChild;
// var txtElement=pElement.lastChild;
// var txtElement=pElement.childNodes[0];
// alert(txtElement.nodeName);//#text
// alert(txtElement.nodeType);//3
// alert(txtElement.nodeValue);//hello
</script>
</body>
</html>
文本节点可以是元素节点的子节点，但是属性节点不可以(china是p元素的子节点，name不是)
<p name=”aa”>
china
</p>
firstChild /childNodes[i]/lastChild:获取子节点
DOM方法
1. replaceChild()
把一个给定父元素里的一个子节点替换为另一个子节点
var reference=element.replaceChild(newChild,oldChild)
返回值是一个指向已被替换的那个子节点的引用指针
如果插入的子节点还有子节点，那么那些子节点也被插入到目标节点中
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<ul>
<li id="old">china</li>
<li>japan</li>
</ul>
<ul>
<li id="new">中国</li>
<li>日本</li>
</ul>
<script type="text/javascript">
var old=document.getElementById("old").onclick=function(){
var parent=document.getElementById("old").parentNode;
parent.replaceChild(document.getElementById("new"),
document.getElementById("old"))
}
</script>
</body>
</html>
2. getAttribute()
返回一个给定元素的一个给定属性节点的值
给定属性的名字必须以字符串的形式传递给该方法
以字符串返回，如果属性不存在，那么返回一个空字符串
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<form>
<input type="text" name="age" id="age" value="23"/>
</form>
<script type="text/javascript">
alert(document.getElementById("age").getAttribute("type"));
alert(document.getElementById("age").getAttribute("name"));
alert(document.getElementById("age").getAttribute("value"));
</script>
</body>
</html>
3. setAttribute()
将给定元素节点添加一个新的属性值或改变他现有的属性值
element.setAttribute(attributeName,attributeValue);
属性的名称和值必须以字符串的形式传递给此方法
如果属性值存在，它的值将被刷新
如果属性值不存在，setAttribute()会先创建它再为其赋值
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<form>
<input type="text" id="age" value="23"/>
</form>
<script type="text/javascript">
var ageElement=document.getElementById("age");
alert(ageElement.getAttribute("name"));
ageElement.setAttribute("name","zhangsan");
alert(ageElement.getAttribute("name"));
</script>
</body>
</html>
4. createElement()
创建新元素节点
按照给定的标签名创建一个新元素节点。方法只有一个参数(将被创建的元素名称，是一个字符串)
方法的返回值：是一个指向新建节点的引用指针。返回值是一个元素节点，所以它的nodeType属性值等于1
新元素节点不会自动添加到文档里，新节点没有noteParent属性，它只是一个存在于JavaScripts上下文的对象
var pElement=document.createElement(“p”);
5. createTextNode()
创建一个包含着给定文本的新文本节点
var liElement=document.createElement(“li”);
var txtElement=document.createTextNode(“中国”);
liElement.appendChild(txtElement);
6. appendChild()
为给定元素增加一个子节点，该方法一般和createElement()、createTextNode()配合使用
7. insertbefore()
把一个给定的节点插入到一个给定元素节点的给定子节点的前面
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<form>
姓名：<input type="text" name="name"/><br>
// <input type="text" name="age"/>
<input type="button" value="提交"/>
</form>
<script type="text/javascript">
var fo=document.getElementsByTagName("form")[0];
var inputElement=document.createElement("input");
var txtElement=document.createTextNode("年龄：");
inputElement.setAttribute("type","text");
inputElement.setAttribute("name","age");
// fo.appendChild(txtElement);
// fo.appendChild(inputElement);
fo.insertBefore(inputElement,document.getElementsByTagName("input")[1]);
fo.insertBefore(txtElement,document.getElementsByTagName("input")[1]);
</script>
</body>
</html>
8. romoveChild ()
从给定元素里删除一个子节点(如果该子节点包含子节点，则子节点也会被删除)
9. innerHTML属性(浏览器基本都支持，但是不是DOM标准的组成部分)
可以用来读、写某给定元素里的html内容
document.getElementById("form1").innerHTML="<input type='text' name='age'>";
javascript执行流程
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<a href="aa.html" id="aaa">点击</a>
//文档会按照顺序执行
<script type="text/javascript">
aaa.onclick=function(){
alert(document.getElementById("aaa").href);
}
</script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//文档按照顺序执行，此时dom结构还没有开始绘制，因此找不到dom
aaa.onclick=function(){
alert(document.getElementById("aaa").href);
}
</script>
</head>
<body>
<a href="aa.html" id="aaa">点击</a>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload=function(){
//window.onload指dom结构绘制完毕，页面所有关联文件加载完毕(图片)
aaa.onclick=function(){
alert(document.getElementById("aaa").href);
}
}
</script>
</head>
<body>
<a href="aa.html" id="aaa">点击</a>
</body>
<!--放在此处和开始一样，个人习惯
<script type="text/javascript">
window.onload=function(){
//window.onload指dom结构绘制完毕，页面所有关联文件加载完毕(图片)
aaa.onclick=function(){
alert(document.getElementById("aaa").href);
}
}
</script>
-->
</html>
