认识DOM
文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。
先来看看下面代码:
1).将HTML代码分解为DOM节点层次图:
2).HTML文档可以说由节点构成的集合，DOM节点有:
3).节点属性:
在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性 ：
- nodeName : 节点的名称
- nodeValue ：节点的值
- nodeType ：节点的类型
（一）.nodeName 属性: 节点的名称，是只读的。
- 元素节点的 nodeName 与标签名相同
- 属性节点的 nodeName 是属性的名称
- 文本节点的 nodeName 永远是 #text
- 文档节点的 nodeName 永远是 #document
（二）.nodeValue 属性：节点的值
- 元素节点的 nodeValue 是 undefined 或 null
- 文本节点的 nodeValue 是文本自身
- 属性节点的 nodeValue 是属性的值
（三）.nodeType 属性: 节点的类型，是只读的。以下常用的几种结点类型:
| 元素类型 | 节点类型 |
|---|---|
| 元素 | 1 |
| 属性 | 2 |
| 文本 | 3 |
| 注释 | 8 |
| 文档 | 9 |
4).遍历节点树:
以上图\ul为例，它的父级节点body,它的子节点3个li,它的兄弟结点h2、P。
5).DOM操作:
【注意】:前两个是document方法。
一、区别getElementById,getElementsByName,getElementsByTagName
【注意】：方法区分大小写
【案例】
勾选框案例.gif
【参考答案】
任务1处补充完整，实现当点击"全选"按钮时，将选中所有的复选项。
提示:document.getElementsByTagName("input")获取的是所有input标签，包括复选项和按钮，所以要判断是否是复选项，如是选中。
任务2处补充完整，实现当点击"全不选"按钮时，将取消所有选中的复选项。
任务3处补充完整，在文本框中输入输入1-6数值，当点击"确定"按钮时，根据输入的数值，通过id选中相应的复选项。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JS DOM应用</title>
</head>
<body>
<form>
请选择你爱好:<br>
<input type="checkbox" name="hobby" id="hobby1"> 音乐
<input type="checkbox" name="hobby" id="hobby2"> 登山
<input type="checkbox" name="hobby" id="hobby3"> 游泳
<input type="checkbox" name="hobby" id="hobby4"> 阅读
<input type="checkbox" name="hobby" id="hobby5"> 打球
<input type="checkbox" name="hobby" id="hobby6"> 跑步 <br>
<input type="button" value = "全选" onclick = "checkall();">
<input type="button" value = "全不选" onclick = "clearall();">
<p>请输入您要选择爱好的序号，序号为1-6:</p>
<input id="wb" name="wb" type="text" >
<input name="ok" type="button" value="确定" onclick = "checkone();">
</form>
<script type="text/javascript">
function checkall(){
var hobby = document.getElementsByTagName("input");
for(var i=0;i<hobby.length;i++)
{
hobby[i].checked=true;
}
// 任务1
}
function clearall(){
var hobby = document.getElementsByName("hobby");
for(var i=0;i<hobby.length;i++)
{
hobby[i].checked=false;
}
// 任务2
}
function checkone(){
var j=document.getElementById("wb").value;
if(parseInt(j)>6||parseInt(j)<1)
{
alert("请输入1-6之间的数字");
}
// 任务3
var hobby=document.getElementsByName("hobby");
hobby[parseInt(j)-1].checked=true;
}
</script>
</body>
</html>
二、getAttribute()方法、setAttribute()方法
【注意】：
1:setAttribute()方法，把指定的属性设置为指定的值。如果不存在具有指定名称的属性，该方法将创建一个新属性。
2:类似于getAttribute()方法，setAttribute()方法只能通过元素节点对象调用的函数。
【案例】以下为li列表title的值,当title为空时，新设置值为"WEB前端技术"：
任务一：使用getAttribute()方法获取元素属性值，保存在变量text。
任务二：使用setAttribute()方法设置title属性值。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>getAttribute和setAttribute</title>
</head>
<body>
<p id="intro">我的课程</p>
<ul>
<li title="JS">JavaScript</li>
<li title="JQ">JQuery</li>
<li title="">HTML/CSS</li>
<li title="JAVA">JAVA</li>
<li title="">PHP</li>
</ul>
<h1>以下为li列表title的值,当title为空时，新设置值为"WEB前端技术":</h1>
<script type="text/javascript">
var Lists=document.getElementsByTagName("li");
for (var i=0; i<Lists.length;i++)
{
var text = Lists[i].getAttribute("title");//任务一
document.write(text +"<br>");
if(text=="")
{
Lists[i].setAttribute("title","WEB前端技术");//任务二
document.write(Lists[i].getAttribute("title")+"<br>");
}
}
</script>
</body>
</html>
end.
本笔记整理自慕课网
网友评论