JavaWeb系列四: DOM下
HTML DOM节点基本介绍节点属性和方法一览节点常用方法节点常用属性应用实例通过id获取节点获取所有option节点通过name获取节点查找id=language下所有li节点获取指定dom对象的所有子节点获取第一个子节点获取父节点获取前后兄弟节点设置文本域内容总代码作业布置 乌龟吃鸡游戏基本介绍在HTML DOM（文档对象模型）中，每个部分都是节点.1.文档 本身是文档节点；2.所有 HTML
·
HTML DOM节点
基本介绍
在HTML DOM（文档对象模型）中，每个部分都是节点.
1.文档 本身是文档节点；
2.所有 HTML元素 是元素节点；
3.所有 HTML属性 是属性节点；
4.HTML元素内的 文本 是文本节点；
5.注释是 注释节点;
节点属性和方法一览
HTML DOM Element 对象文档地址: https://www.w3school.com.cn/jsref/dom_obj_all.asp
HTML DOM Document 对象文档地址: https://www.w3school.com.cn/jsref/dom_obj_document.asp
节点常用方法
1.通过具体的元素节点调用 getElementsByTagName() 方法, 获取当前节点的指定标签名.
2.appendChild(childNode) 方法, 可以添加一个子节点, childNode是要添加的孩子节点.
节点常用属性
1.childNodes属性: 获取当前节点的所有子节点.
2.firstChild属性:获取当前节点的第一个子节点
3.lastChild属性: 获取当前节点的最后一个子节点.
4.parentNode属性: 获取当前节点的父节点.
5.nextSibling属性: 获取当前节点的下一个(后一个)节点.
6.previousSibling属性: 获取当前节点的上一个(前一个)节点.
7.className: 获取或设置标签的class属性值
8.innerHTML属性: 获取或设置起始标签和结束标签中的内容
9.innerText属性: 获取或设置起始标签和结束标签中的文本
应用实例
1.需求: 如图, 点击右侧的按钮, 可以得到对应的节点.
2.应用实例 创建dom/html-dom.html
通过id获取节点
1.创建dom/html-dom.html, 完成功能.
获取所有option节点
html-dom02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>演示HTML DOM 相关方法</title>
<link rel="stylesheet" type="text/css" href="style/css.css"/>
<script type="text/javascript">
//动态注册
window.onload = function () {
//查找所有option节点
var btn02 = document.getElementById("btn02");
btn02.onclick = function () {
//id --> getElementById()
//name --> getElementsByName()
//元素标签 --> getElementsByTagName()
var options = document.getElementsByTagName("option");
//HTMLCollection
for (var i = 0; i < options.length; i++) {
alert("options[" + (i + 1) + "] = " + options[i].innerText);
}
};
};
</script>
</head>
<body>
<div>
<div>
<p>你当前的女友是谁：</p>
<select id="sel01">
<option>--女友--</option>
<option>霞燕</option>
<option id="ct" value="春桃姑娘">春桃</option>
<option>秋枫</option>
<option>冬梅</option>
</select>
</div>
</div>
<div id="btnList">
<div>
<button id="btn02">查找所有option节点</button>
</div>
</div>
</body>
</html>
通过name获取节点
html-dom03.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>演示HTML DOM 相关方法</title>
<link rel="stylesheet" type="text/css" href="style/css.css"/>
<script type="text/javascript">
//动态注册
window.onload = function () {
//查找name=sport节点
var btn03 = document.getElementById("btn03");
btn03.onclick = function () {
var sports = document.getElementsByName("sport");
// alert(sports);//NodeList
for (var i = 0; i < sports.length; i++) {
if (sports[i].checked) {
alert("运动是 = " + sports[i].value);
}
}
};
}
</script>
</head>
<body>
<div>
<div>
<p>你喜欢的运动项目：</p>
<input type="checkbox" name="sport" value="soccer" checked="checked"/>足球
<input type="checkbox" name="sport" value="basketball" checked="checked"/>蓝球
<input type="checkbox" name="sport" value="pingPang" checked="checked"/>乒乓球
</div>
</div>
<div id="btnList">
<div>
<button id="btn03">查找name=sport节点</button>
</div>
</div>
</body>
</html>
查找id=language下所有li节点
html-dom04.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>演示HTML DOM 相关方法</title>
<link rel="stylesheet" type="text/css" href="style/css.css"/>
<script type="text/javascript">
//动态注册
window.onload = function () {
//查找id=language下所有li节点
var btn04 = document.getElementById("btn04");
btn04.onclick = function () {
var lis = document.getElementById("language").getElementsByTagName("li");
// alert("lis=" + lis);//HTMLCollection
for (var i = 0; i < lis.length; i++) {
alert("lis[" + (i + 1) + "] = " + lis[i].innerText);
}
};
};
</script>
</head>
<body>
<div>
<div>
<p>
你的编程语言：
</p>
<ul id="language">
<li id="java">Java</li>
<li>Python</li>
<li>Go语言</li>
</ul>
</div>
</div>
<div id="btnList">
<div>
<button id="btn04">查找id=language下所有li节点</button>
</div>
</div>
</body>
</html>
获取指定dom对象的所有子节点
html-dom05.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>演示HTML DOM 相关方法</title>
<link rel="stylesheet" type="text/css" href="style/css.css"/>
<script type="text/javascript">
//动态注册
window.onload = function () {
//返回id=sel01的所有子节点
var btn05 = document.getElementById("btn05");
btn05.onclick = function () {
//var options = document.getElementById("sel01").getElementsByTagName("option");
//alert(options.length);//5 不算换行符
//1.如果使用document.getElementById("sel01").childNodes; 获取的是[object Text],[object HTMLOptionElement]
//2.如果不希望得到 text对象, 需要将所有的内容放在一行
var childNodes = document.getElementById("sel01").childNodes;
//alert(childNodes);//NodeList
//alert(childNodes.length);//11, 加上文本, 在这里换行符属于文本[object Text]
for (var i = 0; i < childNodes.length; i++) {
//alert(childNodes[i]);//HTMLOptionElement
if (childNodes[i].innerText != undefined && childNodes[i].selected) {
alert("女友有 = " + childNodes[i].innerText);
}
}
alert("===============还有一个方法===============");
//1.sel01 是 HTMLSelectElement => 本身具有集合的特点
var sel01 = document.getElementById("sel01");
alert(sel01);//HTMLSelectElement
alert(sel01[0]);//HTMLOptionElement
for (var i = 0; i < sel01.length; i++) {
alert("sel01[" + (i + 1) + "] = " + sel01[i].innerText);
}
};
};
</script>
</head>
<body>
<div>
<div>
<p>
你当前的女友是谁：
</p>
<select id="sel01">
<option>--女友--</option>
<option>霞燕</option>
<option id="ct" value="春桃姑娘">春桃</option>
<option>秋枫</option>
<option>冬梅</option>
</select>
</div>
</div>
<div id="btnList">
<div>
<button id="btn05">返回id=sel01的所有子节点</button>
</div>
</div>
</body>
</html>
获取第一个子节点
html-dom06.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>演示HTML DOM 相关方法</title>
<link rel="stylesheet" type="text/css" href="style/css.css"/>
<script type="text/javascript">
//动态注册
window.onload = function () {
//返回id=sel01 的第一个子节点
var btn06 = document.getElementById("btn06");
btn06.onclick = function () {
var sel01 = document.getElementById("sel01");
var childNodes = sel01.childNodes;
alert(childNodes[0]);//object Text
var firstChild = sel01.firstChild;
alert(firstChild);//object Text]
alert(sel01[0]);//直接得到第一个option节点 object HTMLOptionElement
}
};
</script>
</head>
<body>
<div>
<div>
<p>
你当前的女友是谁：
</p>
<select id="sel01">
<option>--女友--</option>
<option>霞燕</option>
<option id="ct" value="春桃姑娘">春桃</option>
<option>秋枫</option>
<option>冬梅</option>
</select>
</div>
</div>
<div id="btnList">
<div>
<button id="btn06">返回id=sel01的第一个子节点</button>
</div>
</div>
</body>
</html>
获取父节点
html-dom07.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>演示HTML DOM 相关方法</title>
<link rel="stylesheet" type="text/css" href="style/css.css"/>
<script type="text/javascript">
//动态注册
window.onload = function () {
//返回id=java的父节点
var btn07 = document.getElementById("btn07");
btn07.onclick = function () {
var java = document.getElementById("java");
alert(java);//HTMLLIElement
var parentNode = java.parentNode;
alert(parentNode);//HTMLUListElement
alert(parentNode.innerText);
alert(parentNode.innerHTML);//<li id="java">Java</li>
var childNodes = parentNode.childNodes;
alert(childNodes.length);//7
for (var i = 0; i < childNodes.length; i++) {
if (childNodes[i].innerText != undefined) {//换行符[文本]也算一个节点
alert("childNodes[" + (i + 1) + "] = " + childNodes[i].innerText);
}
}
var parentElement = java.parentElement;
alert(parentElement);//HTMLUListElement
};
}
</script>
</head>
<body>
<div>
<div>
<p>
你的编程语言：
</p>
<ul id="language">
<li id="java">Java</li>
<li>Python</li>
<li>Go语言</li>
</ul>
</div>
</div>
<div id="btnList">
<div>
<button id="btn07">返回id=java的父节点</button>
</div>
</div>
</body>
</html>
获取前后兄弟节点
html-dom08.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>演示HTML DOM 相关方法</title>
<link rel="stylesheet" type="text/css" href="style/css.css"/>
<script type="text/javascript">
//动态注册
window.onload = function () {
var btn08 = document.getElementById("btn08");
btn08.onclick = function () {
var ct = document.getElementById("ct");
alert(ct.previousSibling);//Text[换行符]
alert(ct.previousSibling.previousSibling);//HtmlOptionElement
alert(ct.previousSibling.previousSibling.innerText);//霞燕
alert(ct.nextSibling);//Text[换行符]
alert(ct.nextSibling.nextSibling);//HTMLOptionElement
alert(ct.nextSibling.nextSibling.innerText);//秋枫
};
};
</script>
</head>
<body>
<div>
<div>
<p>
你当前的女友是谁：
</p>
<select id="sel01">
<option>--女友--</option>
<option>霞燕</option>
<option id="ct" value="春桃姑娘">春桃</option>
<option>秋枫</option>
<option>冬梅</option>
</select>
</div>
</div>
<div id="btnList">
<div>
<button id="btn08">返回id=ct的前后兄弟节点</button>
</div>
</div>
</body>
</html>
设置文本域内容
html-dom09.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>演示HTML DOM 相关方法</title>
<link rel="stylesheet" type="text/css" href="style/css.css"/>
<script type="text/javascript">
//动态注册
window.onload = function () {
//设置id=person的文本域
var btn10 = document.getElementById("btn10");
btn10.onclick = function () {
var person = document.getElementById("person");
person.innerText = "刀剑神域";//设置文本域
}
};
</script>
</head>
<body>
<div>
<div>
<p>
个人介绍：
</p>
<textarea name="person" id="person">个人介绍</textarea>
</div>
</div>
<div id="btnList">
<div>
<button id="btn10">设置id=person的文本域</button>
</div>
</div>
</body>
</html>
总代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML DOM相关方法</title>
<link rel="stylesheet" type="text/css" href="style/css.css"/>
</head>
<script type="text/javascript">
window.onload = function () {
//查找id=java的节点
var btn01 = document.getElementById("btn01");
btn01.onclick = function () {
var java = document.getElementById("java");
alert("java节点的文本=" + java.innerText);
}
//查找所有option节点
var btn02 = document.getElementById("btn02");
btn02.onclick = function () {
var options = document.getElementsByTagName("option");
for (var i = 0; i < options.length; i++) {
alert("options[" + i + "].innerText->" + options[i].innerText);
}
}
//查找name=sports的节点
var btn03 = document.getElementById("btn03");
btn03.onclick = function () {
var sports = document.getElementsByName("sports");
for (var i = 0; i < sports.length; i++) {
alert("sports[" + i + "].innerText->" + sports[i].value);
}
}
//查找id=language下所有li节点
var btn04 = document.getElementById("btn04");
btn04.onclick = function () {
var languages = document.getElementById("language");
var lis = languages.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
alert("lis[" + i + "].innerText->" + lis[i].innerText);
}
}
//返回id=girlFriend的所有子节点
var btn05 = document.getElementById("btn05");
btn05.onclick = function () {
var girlFriend = document.getElementById("girlFriend");
alert("=====================方法一===========================");
var childNodes = girlFriend.childNodes;
//在这里换行符属于文本[object Text]
获取的是[object Text],[object HTMLOptionElement],[object Text],[object HTMLOptionElement],[object Text],[object HTMLOptionElement],[object Text]
//如果不希望得到 换行符(即text对象), 需要将所有的内容放在一行
alert("childNodes.length=" + childNodes.length);//7, 加上文本
for(var i = 0; i < childNodes.length; i++) {
if (childNodes[i].innerText != undefined && childNodes[i].selected) {
alert("childNodes[" + i + "].innerText->" + childNodes[i].innerText);
}
}
alert("=====================方法二===========================");
var options = girlFriend.getElementsByTagName("option");
alert("options.length=" + options.length);//不算换行符
for (var i = 0; i < options.length; i++) {
if (options[i].selected) {
alert("options[" + i + "].innerText->" + options[i].innerText);
}
}
}
//返回id=girlFriend的第一个子节点
var btn06 = document.getElementById("btn06");
btn06.onclick = function () {
var girlFriends = document.getElementById("girlFriend");
alert("=========第一种方式=========")
var childNodes = girlFriends.childNodes;
alert(childNodes[1].innerText);//childNodes[0]是换行文本
alert("=========第二种方式=========")
alert(girlFriends[0].innerText);
alert("=========第三种方式=========")
alert(girlFriends.firstChild.nextSibling.innerText);//因为第一个节点是换行文本
}
//获取id=java的父节点
var btn07 = document.getElementById("btn07");
btn07.onclick = function () {
var java = document.getElementById("java");
var parentNode = java.parentNode;
alert("parentNode.innerText=>\n" + parentNode.innerText);
alert("parentNode.innerHTML=>" + parentNode.innerHTML);
}
//获取id=lq的前后兄弟节点
var lq = document.getElementById("lq");
btn08.onclick = function () {
var nextSibling = lq.nextSibling;//换行符文本
var previousSibling = lq.previousSibling;//换行符文本
var nextSibling1 = lq.nextSibling.nextSibling;
var previousSibling1 = lq.previousSibling.previousSibling;
alert("nextSibling.nextSibling.innerText=>" + nextSibling.nextSibling.value);//innerText是开始标签和结束标签之间的文本, 没有值
alert("previousSibling.previousSibling.innerText=>" + previousSibling.previousSibling.value);
}
//设置id=person的文本域
var btn09 = document.getElementById("btn09");
btn09.onclick = function () {
var person = document.getElementById("person");
person.innerText = "修改后的自我介绍";
}
}
</script>
<body>
<div id="total">
<div class="inner">
<p>你的编程语言:</p>
<ul id="language">
<li id="java">java</li>
<li>python</li>
<li>go语言</li>
</ul>
<p>你当前的女友:</p>
<select id="girlFriend">
<option value="小红">小红</option>
<option value="小明">小明</option>
<option value="小花">小花</option>
</select>
<p>你喜欢的运动项目:</p>
<input type="checkbox" name="sports" value="足球"/>足球
<input type="checkbox" id="lq" name="sports" value="篮球"/>篮球
<input type="checkbox" name="sports" value="排球"/>排球
<p>个人介绍:</p>
<textarea id="person">个人介绍</textarea>
</div>
</div>
<div id="btnList">
<div>
<button id="btn01">查找id=java节点</button>
</div>
<div>
<button id="btn02">查找所有的option节点</button>
</div>
<div>
<button id="btn03">查找name=sport节点</button>
</div>
<div>
<button id="btn04">查找id=language下所有li节点</button>
</div>
<div>
<button id="btn05">返回id=girlFriend的所有子节点</button>
</div>
<div>
<button id="btn06">获取id=girlFriend的第一个子节点</button>
</div>
<div>
<button id="btn07">获取id=java的父节点</button>
</div>
<div>
<button id="btn08">获取id=lq的前后兄弟节点</button>
</div>
<div>
<button id="btn09">设置id=person的文本域</button>
</div>
</div>
</body>
</html>
作业布置 乌龟吃鸡游戏
1.需求: 编写tortoiseGame.html, 完成乌龟吃鸡的js小游戏.
2.代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tortoise-hen碰撞游戏</title>
<script type="text/javascript">
//公鸡的坐标
var hen_xPos = 200;
var hen_yPos = 200;
//乌龟图片的宽度和高度
var tortoise_width = 94;
var tortoise_height = 67;
//公鸡图片的宽度和高度
var hen_width = 76;
var hen_height = 73;
function move(obj) {//object HTMLButtonElement
var tortoise = document.getElementById("tortoise");
var tortoise_left = tortoise.style.left;//100px 值传递
var tortoise_top = tortoise.style.top;//130px 值传递
var tortoise_xPos = parseInt(tortoise_left.substring(0, tortoise_left.indexOf("p")));
var tortoise_yPos = parseInt(tortoise_top.substring(0, tortoise_top.indexOf("p")));
//通过button的 dom对象,获取innerText
switch (obj.innerText) {
case "向上走":
tortoise_yPos -= 10;
tortoise.style.top =tortoise_yPos + "px";
break;
case "向下走":
tortoise_yPos += 10;
tortoise.style.top = tortoise_yPos + 'px';
break;
case "向左走":
tortoise_xPos -= 10;
tortoise.style.left = tortoise_xPos + "px";
break;
case "向右走":
tortoise_xPos += 10;
tortoise.style.left = tortoise_xPos + "px";
break;
}
//走完之后再判断
//4.1 得到乌龟左和公鸡左的距离,纵向距离y
// (1)如果乌龟在公鸡上面, 如果纵向距离y < 乌龟图片的高度时, 说明它们可能在纵向发生重叠, 使用 yy 来记录
// (2) 吐过乌龟在公鸡下面,如果纵向距离y < 公鸡图片的高度时, 说明它们可能在纵向发生重叠, 使用 yy 来记录
// 4.2 得到乌龟和公鸡左上角的距离, 横向距离x
// (1)如果乌龟在公鸡左面, 如果横向距离x < 乌龟图片的宽度时, 说明它们可能在横向发生重叠, 使用 xx 来记录
// (2)如果乌龟在公鸡右面, 如果横向距离x < 公鸡图片的宽度时, 说明它们可能在横向发生重叠, 使用 xx 来记录
var y = Math.abs(tortoise_yPos - hen_yPos);
var x = Math.abs(tortoise_xPos - hen_xPos);
var yy = 0;//
var xx = 0;//默认横向没有重叠
if (tortoise_yPos < hen_yPos) {//乌龟在上
if (y < tortoise_height) {
yy = 1;
}
} else {//乌龟在下
if (y < hen_height) {
yy = 1;
}
}
if (tortoise_xPos < hen_xPos) {//乌龟在左
if (x < tortoise_width) {
xx = 1;
}
} else {//乌龟在右
if (x < hen_width) {
xx = 1;
}
}
if (xx && yy) {//js中 0默认是false
alert("发生碰撞");
tortoise.style.left = 100 + "px";
tortoise.style.top = 130 + "px";
}
}
</script>
</head>
<body>
<table>
<tr>
<td></td>
<!--
1.this表示的是你点击的这个button, 而且已经是一个dom对象
3.可以通过dom对象操作属性和方法
-->
<td>
<button onclick="move(this)">向上走</button><!--静态注册传参 只能用单引号-->
</td>
<td></td>
</tr>
<tr>
<td>
<button onclick="move(this)">向左走</button>
</td>
<td></td>
<td>
<button onclick="move(this)">向右走</button>
</td>
</tr>
<tr>
<td></td>
<td>
<button onclick="move(this)">向下走</button>
</td>
<td></td>
</tr>
</table>
<img src="./img/1.bmp" id="tortoise" style="position: absolute; left: 100px; top: 130px;" border="1">
<img src="./img/2.bmp" style="position: absolute; left: 200px; top: 200px;" border="1">
</body>
</html>
欢迎加入 MCP 技术社区！与志同道合者携手前行，一同解锁 MCP 技术的无限可能！
更多推荐
20
0- 0
已为社区贡献1条内容
所有评论(0)