注意：案例部分代码大部分是选取关键性代码，需要把代码放入对应位置
一、DOM概念
1.JavaScript组成
（1）ECMAScript标准——代码的基本规范
（2）DOM——文档对象模型
（3）BOM——浏览器对象模型
2.DOM
（1）DOM是Document（文档）Object（对象） Model（模型）的缩写
（2）DOM是一套操作HTML和XML文档的API，就是操作页面元素
- HTML文件侧重于展示数据
- XML文件侧重于存储数据
（3）整个页面是一个对象,每个标签和文字内容包括空白都可以看成是一个一个的对象，这些对象组成了一个树状图模型
（4）
- DOM就是把HTML视为一个层次结构(树形结构)的文档（范围从大到小）
- 文档(Document)：就是指HTML或者XML文件，是顶级对象
- 文档元素(根元素)：文档中的第一个元素，HTML文档元素就是
<html> - 节点(Node)：HTML文档中的所有内容都可以称之为节点
- 元素(Element)：HTML文档中的标签可以称为元素,元素称为对象
- 父元素:一个标签内部还有其他的标签
- 子元素:在一个父元素中的标签
- 父元素和子元素之间是一个层级关系(包含关系)
（5）DOM的级别
- DOM0 初级阶段
- DOM1 规定了节点的类型Node——————目前用的
- DOM2:新增了一些方法,但是很多浏览器并不支持
- DOM3:大多数浏览器都没有支持
3.其它
（1）DOM可以操作页面：
- 找元素(标签)--对象
- 操作这个标签(属性,样式)
- 创建标签,删除标签
（2）事件
- 触发和响应
- 事件源(事件的触发者)
- 响应的程序----事件处理程序
二、DOM应用注意
1.设置或获取文字内容——innerText或innerHTML
如果是设置或获取的是文字内容用innerText或者innerHTML都可以.如果设置或获取的是含有标签内容用innerHTML
（1）innerText或textContent——文字内容
对象.innerText=值——低版本火狐不支持
对象.textContent=值——低版本ie不支持
（2）innerHTML——文字内容或标签内容，且没有兼容问题
代码：
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv">
<p>为什么我拒绝了呢,因为是一个梦</p>
</div>
<script>
function my$(id) {
return document.getElementById(id);
}
//点击按钮在div中显示一个p标签内容
my$("btn").onclick=function () {
my$("dv").innerText="哈哈";//(1)
my$("dv").innerHTML="哈哈";//(2)
my$("dv").innerText="<p>这是一个p</p>";//(3)
my$("dv").innerHTML="<p>这是一个p</p>";//(4)
};
</script>
</body>
（1）（2）（3）（4）要分别执行
结果：
设置文字内容：————没有区别
（1）
image.png
（2）image.png
- 设置标签内容：————innerHTML会解析语句（
<p>这是一个p</p>），innerText不会
（3）image.png
（4）image.png
2.CSS多个单词组合的属性
凡是在CSS样式属性中是由多个单词组合的属性要是在JS(DOM)操作中,单词中间的-去掉,后面单词的首字母大写.
如：background-color写为backgroundColor
3.给标签修改class——不能使用class,需要使用className
center top修改为center botm
案例见 三-5
（1）重写
对象.className="center botm";
（2）替换
对象.className=对象.className.replace("top","botm");
4.html标签中,如果一个属性和属性的值是相同的,那么在DOM操作中,该属性值为布尔类型
1.如果想选中,则设置值为true,如果不想选中,则设置该属性值为false
2.常见的比如：
- input标签：disabled禁用属性
- input标签中的单选按钮和复选框：checked默认选中属性
- 下拉框select标签中的option标签：selected默认选中属性
3.判断未被选中，比如disabled是否被禁用
- 代码：
//未被选中
if(!对象.checked){
}
//被选中
if(对象.checked){
}
4.案例见: 三— 8
5.图片的宽度和高度
1.可以直接 对象.width 和 对象.height，不需要加px
2.如果设置图片的宽和高,通常都使用 对象.style.width 和 对象.style.height，需要加px
三、理解DOM操作——了解即可
在页面中通过DOM操作页面中元素的时候,页面中的元素的样式或者显示方式发生了改变,但是并没有修改原来的页面内容,而是修改的当前这个页面的样子,换句话说:
通过网址访问的页面,访问的是服务器端的页面,通过网络,把服务器的页面下载到我们的本地,然后加载到内存中,渲染引擎在加载页面的同时会在内存中生成一个DOM树
所以,DOM操作的是本地内存中的内容,并不会更改服务器端的页面样子
图片分析：
image.png
四、DOM案例
1.封装 根据id选取元素的方法——为学jQuery打基础——重要
<body>
<input type="button" value="设置div" id="btn"/>
<div id="dv"></div>
<script>
/**
* 封装 根据id选取元素的方法
* @param id
* @returns {Element}
*/
function my$(id) {
return document.getElementById(id);
}
//获取按钮——调用封装方法
my$("btn").onclick=function () {
//设置div的样式 --宽--高,--背景颜色---设置边框
my$("dv").style.width="300px";
my$("dv").style.height="200px";
my$("dv").style.backgroundColor="yellow";
my$("dv").style.border="2px solid red";
};
</script>
</body>
2.行内js和内联js
<body>
<input type="button" value="点我" onclick="alert('哈哈,我又变帅了');" />
<input type="button" value="再点我" onclick="f1();"/>
<script>
function f1() {
alert("又被点了");
}
</script>
</body>
3.事件调用函数两种方式
（1）命名函数——不常用
<body>
<input type="button" value="再次点我" id="btn" />
<script>
//获取的就是一个元素
//通过document.getElementById("id的值"),返回的就是这个id值的(标签)元素(对象)
var btnObj=document.getElementById("btn");
btnObj.onclick=f1;//此时的f1叫事件处理函数
function f1() {
alert("你干啥捏?");
}
</script>
</body>
（2）匿名函数——常用
<body>
<input type="button" value="再次点我" id="btn" />
<script>
//获取的就是一个元素
//通过document.getElementById("id的值"),返回的就是这个id值的(标签)元素(对象)
var btnObj=document.getElementById("btn");
btnObj.onclick=function () {
alert("你干啥捏?");
}
</script>
</body>
4.点击按钮修改超链接的地址及热点文字
（1）据id获取按钮,为按钮注册一个点击的事件,在该事件中根据id获取超链接,修改超链接的href属性(地址)
（2）修改成对的标签中的文字内容，可以用对象.innerText="值";
（3）注册事件的时候,后面的匿名函数:事件处理函数
<body>
<input type="button" value="修改超链接" id="btn"/>
<a href="http://www.baidu.com" id="ak">百度</a>
<script>
document.getElementById("btn").onclick = function () {
//修改地址
var aObj = document.getElementById("ak");
aObj.href = "http://www.itcast.cn";
aObj.innerText="传智播客";
};
</script>
</body>
5.点击按钮，按钮显示哈哈，其它显示呜呜——遍历、排他的方法
排他的方法：先设置所有，在设置独特
遍历：循环遍历所有的按钮,每一个都要注册点击事件
<body>
<input type="button" value="呜呜"/>
<input type="button" value="呜呜"/>
<input type="button" value="呜呜"/>
<input type="button" value="呜呜"/>
<input type="button" value="呜呜"/>
<script>
//获取所有的按钮
var btnObjs=document.getElementsByTagName("input");
//循环遍历所有的按钮,每一个都要注册点击事件
for(var i=0;i<btnObjs.length;i++){
btnObjs[i].onclick=function () {
//第一步:让每一个按钮先都变成呜呜
for(var j=0;j<btnObjs.length;j++){
btnObjs[j].value="呜呜";
}
//第二步:设置当前被点的按钮值为哈哈——排他
this.value="哈哈";
};
}
</script>
</body>
6.二维码的显示与隐藏——部分代码
<body>
<script>
var aObj=divObj.getElementsByTagName("a")[0];
//为a标签注册鼠标进入的事件.onmouseover
aObj.onmouseover=function () {
//让id为er的div显示出来
//方法1
//document.getElementById("er").className="erweima show";
//方法2
document.getElementById("er").className=document.getElementById("er").className.replace("hide","show");
};
//为a标签注册鼠标离开的事件.onmouseout
aObj.onmouseout=function () {
//让id为er的div隐藏起来
//方法1
//document.getElementById("er").className="erweima hide";
//方法2
document.getElementById("er").className=document.getElementById("er").className.replace("show","hide");
};
</script>
</body>
7.点击按钮，显示和隐藏div——根据按钮的值来判断当前状态
<body>
<input type="button" value="隐藏" id="btn"/>
<div id="dv"></div>
<script>
document.getElementById("btn").onclick=function () {
//获取div
var dvObj=document.getElementById("dv");
if(this.value=="隐藏"){
dvObj.style.display="none";
this.value="显示";
}else if(this.value=="显示"){
dvObj.style.display="block";
this.value="隐藏";
}
};
</script>
</body>
8.选择性别——点击按钮设置女被选中
在html标签中,如果一个属性和属性的值是相同的,那么在DOM操作中,该属性值为布尔类型,如果想选中,则设置值为true,如果不想选中,则设置该属性值为false
<body>
<input type="button" value="选中性别" id="btn"/><br/>
<input type="radio" value="man" name="sex"/>男
<input type="radio" value="woman" name="sex" id="rao" />女
<input type="radio" value="baomi" name="sex"/>保密
<script>
//点击按钮设置女被选中
function my$(id) {
return document.getElementById(id);
}
//获取按钮注册点击事件=事件处理函数
my$("btn").onclick=function () {
my$("rao").checked=true;
};
</script>
</body>
9.点击按钮设置下拉框中选项选中
设置天津被选中
my$("s1").getElementsByTagName("option")[3]表示在返回的数组中找到下标为3的那个
<body>
<input type="button" value="选中某一项" id="btn"/>
<select id="s1">
<option value="1">北京</option>
<option value="1">上海</option>
<option value="1">重庆</option>
<option value="1">天津</option>
<option value="1">吉林</option>
</select>
<script>
function my$(id) {
return document.getElementById(id);
}
my$("btn").onclick=function () {
my$("s1").getElementsByTagName("option")[3].selected=true;
};
</script>
</body>
网友评论