JavaEE学习日志持续更新----> 必看！JavaEE学习路线（文章总汇）
JavaEE学习日志（四十三）
DOM对象
DOM对象介绍
JS中对象 Document Object Module
作用：整个HTML页面，变成对象document，可以使用对象中的方法或者属性。（对象是自动创建的，浏览器打开后，对象建立完成）
document对象方法
-
获取
1.getElementById("id属性值")通过id属性值获取标签，结果是标签的对象
2.getElementsTagName("标签名")通过标签的名字来获取，返回的不是一个对象，返回的是数组
3.getElementsByClassName("class属性值")通过标签的class属性获取，返回的不是一个对象，返回的是数组
4.getElementsByName("name属性值")通过标签的name属性获取，返回的不是一个对象，返回的是数组 -
创建标签
createElement("标签名")创建指定名字的标签 -
对象属性
innerHTML设置的是标签体的内容，如标签体，内容标签有效innerText设置的是标签体的内容，如标签体，内容标签无效（纯文本）
- 操作标签属性方法
getAttribute("属性名")返回指定的属性的值setAttribute("属性名","属性值")设置属性和属性值
- 节点相关
appendChild(子节点)追加子标签hasChildNodes()是否有子节点removeChild(节点对象)删除子节点replaceChild(新节点,旧节点)替换子标签，剪切效果insertBefore(新节点,老节点)在节点前,添加节点
DOM对象练习
练习一：getElementById
<!DOCTYPE html>
<html>
<head>
<title>form.html</title>
<meta charset="UTF-8"/>
</head>
<body>
<form name="form1" action="test.html" method="post" >
<input type="text" name="username" value="传智播客10周年_1" id="tid" onchange="" >
<input type="button" name="ok" value="保存1"/>
</form>
</body>
<script type="text/javascript">
//输出 <input type="text" name="username" value="传智播客10周年_1" id="tid" >标签value属性的值
var tid = document.getElementById("tid");
alert(tid.value);
//输出 <input type="text" name="username" value="传智播客10周年_1" id="tid" >标签type属性的值
alert(tid.type);
</script>
</html>
练习二：getElementByTagName
注意：下拉框中的某option被选中时，该option的selected属性值为true；未被选中时，selected属性值为false。（默认选中时，selected=“selected”）
<!DOCTYPE html>
<html>
<head>
<title>form.html</title>
<meta 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>
<input type="button" value="打印option选中的值" onclick="showSelect()" />
</body>
<script type="text/javascript">
//获取所有的input元素,返回值是数组
var inputs = document.getElementsByTagName("input");
// alert(inputs.length);
//遍历value的值
for(var i=0; i<inputs.length;i++){
//遍历数组,inputs[i] 表示数组中的元素,就是input标签对象
//alert(inputs[i].value);
}
//输出type="text"中 value属性的值 不包含按钮(button)
for(var i=0; i<inputs.length;i++){
//遍历数组,inputs[i] 表示数组中的元素,就是input标签对象
//判断,input标签对象的属性type是不是text
if(inputs[i].type=="text"){
// alert(inputs[i].value);
}
}
//输出所有下拉选 id="edu"中option标签中 value属性的值
//获取需要的标签对象, document表示整个文档对象
//通过option的父标签找
var edu = document.getElementById("edu");
//edu找他的所有子标签option
var options = edu.getElementsByTagName("option");
for (var i=0;i<options.length;i++) {
//alert(options[i].value);
}
//输出所有下拉选select的option标签中value的值
var allOptions = document.getElementsByTagName("option");
for (var i=0;i<allOptions.length;i++) {
//alert(allOptions[i].value);
}
//输出选中的值
function showSelect(){
//表单: 下拉菜单 属性 selected="selected"
var options = document.getElementsByTagName("option");
for(var i=0; i < options.length;i++){
//selected="selected",在DOM对象,属性值,被选中了是true
if(options[i].selected){
alert(options[i].value);
}
}
}
</script>
</html>
练习三：getElementByName
注意：
- 可以使用标签对象的onchange等属性，给标签添加事件
示例：tname[i].οnchange=function(){} - 上述示例的function中，如果需要使用标签对象，则必须使用
this关键字来代替，因为在页面加载结束之后，for循环中的i就死亡了，在事件触发时，function中，如果有tname[i]，则会报错，事件不会触发。
<!DOCTYPE html>
<html>
<head>
<title>form.html</title>
<meta charset="UTF-8">
</head>
<body>
<form name="form1" action="test.html" method="post" >
<input type="text" name="tname" value="传智播客10周年_1" id="tid_1" ><br>
<input type="text" name="tname" value="传智播客10周年_2" id="tid_2" ><br>
<input type="text" name="tname" value="传智播客10周年_3" id="tid_3" ><br>
<input type="button" name="ok" value="保存1"/>
</form>
</body>
<script type="text/javascript">
//通过元素的name属性获取所有元素的引用 name="tname"
var tname = document.getElementsByName("tname");
//测试该数据的长度
//alert(tname.length);
//遍历元素,输出所有value属性的值
for (var i=0;i<tname.length;i++) {
// alert(tname[i].value);
}
//为每个文本框(<input type="text">)增加chanage事件,当值改变时,输出改变的值
for (var i=0;i<tname.length;i++) {
//遍历中,为文本框绑定事件
//当事件发生的时候,监听器,自动调用匿名函数
tname[i].onchange=function(){
/*
* 循环结束,HTML页面加载完成
* 修改文本框的值,事件onchange触发,调用匿名函数
* for结束了,变量i已经死了
*
* tname[i]是找到一个input标签对象,找到一个东西,可以替换对象
* Java, this表示当前对象
*/
alert(this.value);
}
}
</script>
</html>
练习四：getAttribute
注意：标签对象.value属性值,适用于表单标签；其他标签: 使用DOM对象的方法 getAttribute("value")
<!DOCTYPE html>
<html>
<head>
<title>form.html</title>
<meta 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>
您喜欢的城市:<br>
<ul>
<li id="bj" value="beijing">北京</li>
<li id="sh" value="shanghai">上海</li>
<li id="cq" value="chongqing">重庆</li>
</ul>
您喜欢的游戏:<br>
<ul>
<li id="fk" value="fankong">反恐</li>
<li id="ms" value="moshou">魔兽</li>
<li id="xj" value="xingji">星际争霸</li>
</ul>
</body>
<script type="text/javascript">
//<li id="xj" value="xingji">星际争霸</li>节点的value属性的值
var xj = document.getElementById("xj");
//标签对象.value属性值,适用于表单标签
//其他标签: 使用DOM对象的方法 getAttribute
alert(xj.getAttribute("value"));
</script>
</html>
练习五：setAttribute
注意：DOM对象的方法setAttribute(属性名，属性值),没有的属性，则添加；如果属性存在,就是修改。
<!DOCTYPE html>
<html>
<head>
<title>form.html</title>
<meta charset="UTF-8">
</head>
<body>
您喜欢的城市:<br>
<ul>
<li id="bj" value="beijing">北京</li>
<li id="sh" value="shanghai">上海</li>
<li id="cq" value="chongqing">重庆</li>
</ul>
您喜欢的游戏:<br>
<ul>
<li id="fk" value="fangkong">反恐</li>
<li id="ms" value="moshou">魔兽</li>
<li id="xj" value="xingji" >星际争霸</li>
</ul>
</body>
<script type="text/javascript">
//给这个节点增加 name属性 <li id="xj" value="xingji" name="xingjizhengba">星际争霸</li>
var xj = document.getElementById("xj");
//DOM对象的方法setAttribute(属性名，属性值),没有的属性添加,如果属性存在,就是修改
xj.setAttribute("name","xingjizhengba");
//测试
alert(xj.getAttribute("name"));
</script>
</html>
练习六：innerHTML
注意：
- 当js写在太前面，而导致js程序执行时，某个标签没有被读取到，此时就需要把js的执行顺序改为整个页面读取完毕之后。添加windows对象的事件onload，并把js代码放在其中即可。
- 向标签中添加内容 ：
DOM对象的属性innerHTML,设置标签体内容,标签有效。
DOM对象的属性innerText,设置标签体内容,属性无论写什么,认为是纯文本。
<!DOCTYPE html>
<html>
<head>
<title>form.html</title>
<meta charset="UTF-8">
</head>
<script type="text/javascript">
/*
* 程序在页面加载完成后执行
* 事件 onload,事件源是整个页面
* BOM对象, window
*/
//被事件监听器,自动调用匿名函数
window.onload = function(){
//在div层中插入 <h1>海马</h1>
var city = document.getElementById("city");
//向标签中添加内容 , DOM对象的属性 innerHTML,设置标签体内容,标签有效
//city.innerHTML="<h1>海马</h1>";
//在div层中插入“海马” 文本
//DOM对象属性 innerText,设置标签体内容,属性无论写什么,认为是纯文本
city.innerText="<h1>海马</h1>";
//读取div的标签体内容
// alert(city.innerHTML);
//读取div的标签体文本内容
alert(city.innerText);
}
</script>
<body>
<div id="city">fff</div>
</body>
</html>
练习七：hasChildNodes
注意：火狐、谷歌等浏览器，如果标签中的空行，也算作空节点；IE浏览器则不算。
<!DOCTYPE html>
<html>
<head>
<title>form.html</title>
<meta charset="UTF-8">
</head>
<body>
<form name="form1" action="test.html" method="post" >
<input type="text" name="tname" value="传智播客10周年_1" id="tid_1" ><br>
<input type="text" name="tname" value="传智播客10周年_2" id="tid_2" ><br>
<input type="text" name="tname" value="传智播客10周年_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 type="text/javascript">
//查看id="edu"的节点是否含有子节点
var edu = document.getElementById("edu");
//DOM对象方法 hasChildNodes(),如果有返回true
alert(edu.hasChildNodes());
//查看id="tid_1"的节点是否含有子节点
var tid_1 = document.getElementById("tid_1");
alert(tid_1.hasChildNodes());
</script>
</html>
练习八：removeChild
注意：自己删除自己，有些浏览器不支持，所以使用父节点删除子节点
<!DOCTYPE html>
<html>
<head>
<title>form.html</title>
<meta charset="UTF-8">
</head>
<body>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="sh" name="shanghai">上海</li>
<li id="cq" name="chongqing">重庆</li>
</ul>
</body>
<script type="text/javascript">
//删除<ul id="city"> 下<li id="bj" name="beijing">北京</li>这个节点</ul>
//获取bj的父标签
var city = document.getElementById("city");
//获取北京节点
var bj = document.getElementById("bj");
//DOM对象的方法 removeChild()删除子节点
city.removeChild(bj);
//获取北京的父节点
alert(bj.parentNode);
</script>
</html>
练习九：replaceChild
注意：
- 自己不能替换自己，所以需要使用父节点来进行替换。
- 替换带有剪切的效果
<!DOCTYPE html>
<html>
<head>
<title>form.html</title>
<meta charset="UTF-8">
</head>
<body>
您喜欢的城市:<br>
<ul id="city">
<li id="bj" value="beijing" onclick="fnChange()">北京</li>
<li id="sh" value="shanghai">上海</li>
<li id="cq" value="chongqing"> 重庆</li>
</ul>
您喜欢的游戏:<br>
<ul>
<li id="fk" value="fankong">反恐精英</li>
<li id="ms" value="moshou">魔兽</li>
<li id="cq" value="chuanqi">传奇</li>
</ul>
</body>
<script type="text/javascript">
//点击北京节点， 将被反恐节点替换
function fnChange(){
//获取bj的父标签
var city = document.getElementById("city");
//获取北京节点
var bj = document.getElementById("bj");
//获取反恐节点
var fk = document.getElementById("fk");
//DOM对象方法 replaceChild(新节点,旧节点)
city.replaceChild(fk,bj);
}
</script>
</html>
练习十：createElement
在节点后边添加标签的步骤：
- 获取父标签
- 创建新标签
- 给新标签设置属性
- 父标签追加子节点
<!DOCTYPE html>
<html>
<head>
<title>form.html</title>
<meta charset="UTF-8">
</head>
<body>
您喜欢的城市:<br>
<ul id="city">
<li id="bj" value="beijing">北京</li>
<li id="sh" value="shanghai">上海</li>
<li id="cq" value="chongqing">重庆</li>
</ul>
您喜欢的游戏:<br>
<ul>
<li id="fk" value="fangkong">反恐</li>
<li id="ms" value="moshou">魔兽</li>
<li id="xj" value="xingji">星际争霸</li>
</ul>
</body>
<script type="text/javascript">
//增加城市节点 <li id="tj" v="tianjin">天津</li>放置到city下
//获取bj的父标签
var city = document.getElementById("city");
//创建标签对象,返回此创建好的标签对象
var tjLi = document.createElement("li");
//设置标签的属性
tjLi.setAttribute("id","tj");
tjLi.setAttribute("v","tianjin");
tjLi.innerHTML="天津";
//DOM对象方法 appendChild追加子节点
city.appendChild(tjLi);
</script>
</html>
练习十一：insertBefore
在节点前边加
<!DOCTYPE html>
<html>
<head>
<title>form.html</title>
<meta charset="UTF-8">
</head>
<body>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="sh" name="shanghai">上海</li>
<li id="cq" name="chongqing">重庆</li>
</ul>
</body>
<script type="text/javascript">
// 在重庆前面插入新的节点 <li id="tj" name="tianjin">天津</li>
var tjLi = document.createElement("li");
//设置标签的属性
tjLi.setAttribute("id","tj");
tjLi.setAttribute("name","tianjin");
tjLi.innerHTML="天津";
//获取bj的父标签
var city = document.getElementById("city");
//获取cq标签
var cq = document.getElementById("cq");
//DOM对象的方法 insertBefore()在节点前,添加节点
city.insertBefore(tjLi,cq);
</script>
</html>
367
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
