1.4 dom和BOM
DOM
DOM是文档对象模型，DOM是HTML的标准编程接口
DOM基础
- 增：创建DOM节点
- 删：删除DOM节点
- 改：修改DOM节点
- 查：获取DOM节点
2.获取元素
2.1如何获取页面元素
DOM在我们实际开发中主要用来操作元素
获取元素可以使用一下几种方法：
- 根据ID获取
- 根据标签名获取
- 通过HTML5新增的方法获取
- 特殊元素获取
2.2根据ID获取
使用getElementById()方法可以获取带有ID元素对象
Document的方法getElementById()返回一个匹配特定ID的元素，由于元素的ID在大部分情况下要求是独一无二的，这方法成了一个高效查找特定元素的方法。
2.3根据标签名获取
使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合。
<ul>
<li>知否知否</li>
<li>知否知否</li>
<li>知否知否</li>
<li>知否知否</li>
<li>知否知否</li>
</ul>
<script>
var lis = document.getElementsByTagName('li');
console.log(lis);
</script>
1.返回的是获取过来元素对象的集合，以伪数组的形式存储的
2.我们想要依次打印里面的元素对象可以使用遍历的方法
for(var i=0;i<lis.length;i++){
console.log(lis[i]);
}
3.如果页面中只有一个li 返回的还是伪数组的形式
4.如果页面中没有这个元素返回的是空的伪数组的形式
5.还可以获取某个元素（父元素）内部所有指定的子元素
element.getElementsByTagName(‘标签名’);父元素必须是指定的单个元素（必须指明是哪一个元素对象），获取的时候不包括父元素自己。
var ol = document.getElementsById('ol');
console.log(ol.getElementsByTagName('li'));
2.4 通过HTML5新增的方法获取
1.document.getElementsByClassName(‘类名’);//根据类名返回元素对象集合
<div class="box">盒子</div>
<div class="box">盒子</div>
<div id="nav">
<ul>
<li>首页</li>
<li>首页</li>
</ul>
</div>
<script>
var boxs = document.getElementsByClassName('box');
console.log(boxs);
</script>
2.querySelector 返回指定选择器的第一个元素对象，切记，里面的选择器需要加符号 如.box #nav
类加. ，id加#
document.querySelector(‘选择器’);
var firstBox = document.querySelector('.box');
console.log(firstBox);
var nav = document.querySelector('#nav');
console.log(nav);
var li = document.querySelector('li');
console.log(li);
3.document.querySelectorAll(‘选择器’); 根据指定选择器返回所有元素对象集合
var allBox = document.querySelectorAll('.box');
console.log(allBox);
获取特殊元素（body , html）
1.获取body元素
var bodyEle = document.body;
console.log(bodyEle);//返回元素对象
console.log(bodyEle);//返回元素对象，有属性和方法
2.获取html元素
var htmlEle = document.documentElement;
DOM事件
事件概述
JavaScript是我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。
简单理解：触发···响应机制。
1.事件有三部分组成，事件源 事件类型 事件处理程序 我们称为事件三元素
（1） 事件源 事件被触发的对象 谁 按钮
<script>
var btn = document.getElementById('btn');
（2）事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
（3）事件处理程序 通过一个函数赋值的方式 完成
btn.onclick = function(){
alert('点秋香');
}
</script>
事件基础
执行事件的步骤
1.获取事件
var div = document.querySelector('div');
2.绑定事件
3.添加事件处理机制（采取函数赋值形式）
div.onclick = function(){
console.log('我被选中了');
}
分析事件三要素
4.操作元素
4.1改变元素内容
1.获取元素
var btn = document.querySelector('button');
var div = document.querySelector('div');
2.注册事件
btn.onclick= function(){
div.innerText = '2019-6-6';
}
案例：调用函数，返回当前时间
innerText和innerHTML的区别
1.innerText不识别html标签 非标准 去除空格和换行
var div = document.querySelector('div');
div.innerText ='<strong>今天是：</strong>2019';
var p = document.querySelector('p');
console.log(p.innerText);
2.innerHTML识别html标签 W3C标准 保留空格和换行
这两个属性是可读写的 可以获取元素里面的内容
div.innerHTML = '<strong>今天是：</strong>2019';
修改元素属性 src
1.获取元素
<button id="ldh">刘德华</button>
<button id="zxy">张学友</button><br>
<img src="images/ldh.jpg" alt=" ">
<script>
var ldh = document.getElementById('ldh');
var zxy = document.getElementById('zxy');
var img = document.querySelector('img');
</script>
2.注册事件 处理程序
zxy.onclick = function(){
img.src = 'images/zxy.jpg';
img.title = '张学友';
}
ldh.oncick = function(){
img.src = 'images/ldh.jpg';
img.title = '刘德华';
}
案例：分别显示不同图片，显示不同问候语
分析：
1.根据系统不同的时间来判断，所以需要用到日期内置对象
2.利用多分支语句来设置不同的图片
3.需要一个图片，并且根据时间修改图片，就需要用到操作对象src属性
4.需要一个div元素，显示不同问候语，修改元素内容即可
<script>
var img = document.querySelector('img');
var div = document.querySelector('div');
var date = new Date();
var h = date.getHour();
if(h<12)
{
img.arc = 'images/s.gif';
div.innerHTML = '亲，早上好';
}else if( h<18){
img.src = 'images/x.gif';
div.innerHTML = '亲，下午好';
}
else{
img.src = 'images/w.gif';
div.innerHTML='亲，晚上好';
}
</script>
4.3表单元素的属性操作
利用DOM可以操作如下表单元素的属性
type、value、checked、selected、disabled
<script>
var btn = document.querySelector('button');
var input = document.querySelector('input');
btn.onclick = function(){
input.value = '被点击了';
this.disabled = true;
// this 指向的是时间函数的调用者 btn
}
</script>
案例分析
1.核心思路：点击眼睛按钮，把密码框类型改成文本框就可以看见里面的密码
2.一个按钮两个状态，点击一次，切换成文本，继续点击一次切换成密码框
3.算法：利用一个flag变量，来判断flag的值，如果是1就切换成文本框，flag设置为0，如果是0就切换成密码框，flag设置为1
<style>
.box{
width:400px;
border-bottom:1px solid #ccc;
margin:100px auto;
}
.box input{
width:370px;
height:30px;
border:0;
outline:none;
}
.box img {
position:absolute;
top:10px;
right:30px;
width:24px;
}
</style>
<div class="box">
<label for=" ">
<img src = "images/close.png" alt=" ">
</label>
<input type = "password" name=" " id=" ">
</div>
<script>
var eye = document.getElementById('eye');
var pwd = document.getElementById('pwd');
var flag = 0;
eye.onclick = function(){
if(flag==0){
pwd.type = 'text';
eye.src = 'images/open.png';
flag = 1;
} else {
pwd.type = 'password';
eye.src = 'images/close.png';
flag = 0;
}
</script>
4.4修改样式属性
我们可以通过JS修改元素的大小、颜色、位置等样式
1.element.style 行内样式操作
2.element.className 类名样式操作
var div = document.querySelector('div');
div.onclick = function(){
this.style.backgroundColor = 'purple';
}
注意：
1.JS里面的样式采取驼峰命名法 逼入 fontSize backgroundColor
2.JS修改style样式操作，产生的是行内样式，CSS权重比较高
案例：循环精灵图
1.首先精灵图的排列是由规律的
2.核心思路：利用for循环 修改精灵图的背景位置background-position
3.剩下的就是考验你的数学功底了
4.让循环里的i索引号*44就是每个图片的y坐标
<body>
<div class="box">
<ul>
<li></li>
<li></li>
<li></li>
</ul
</div>
<script>
var lis = document.querySelectorAll('ki');
for(var i=0;i<lis.length;i++){
var index = i*44;
lis[i].style.backgroundPosition = '0 - '+index + 'px';
}
</script>
</body>
大幅度提高开发效率
5.节点操作
5.1为什么学节点操作
获取元素常用的两种方法：
1.利用DOM提供的方法获取元素
- document.getElementById()
- document.getElementsByTagName()
- document.querySelector等
- 逻辑性不强、繁琐
2.利用节点层次关系获取元素 - 利用父子兄节点关系获取元素
- 逻辑性强，但是兼容性稍差
这两种方式都可以获取元素节点，我们后面会都用到，但是节点操作更简单
5.2节点概述
网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM中，节点使用node来表示。
HTML DOM树中的所有节点均可以通过JavaScript进行访问，所有HTML元素（节点）均可以被修改，也可以创建或者删除。
5.3节点层级
利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系
1.父级节点 node.parentNode
<div class="demo">
<div class="box">
<span class="erweima"></span>
</div>
</div>
<script>
//1.父节点,parentNode
var erweima = document.querySelector('.erweima');
//var box = document.querySelector('.box');
//得到的是离元素最近的父级节点（亲爸爸）如果找不到会返回null
console.log(erweima.parentNode);
</script>
2.子节点操作
（1）parentNode.childNodes（标准）
返回包含指定节点的字节点的集合，改集合为即时更新的集合
var ul = document.querySelector('ul');
var lis = ul.querySelectorAll('li');
//1.子节点
console.log(ul.childNodes);
注意：返回值里包含了所有的子节点，包括元素节点，文本节点等。
如果只想要获得里面的元素节点，则需要专门处理，所以我我们一般不提倡使用childNodes
（2）parentNode.children获取所有的子元素节点，也是我们实际开发常用的
console.log(ul.children);
（3）firstChild 第一个子节点，不管是文本节点还是元素节点
（4）lastChild最后一个子节点
<ol>
<li>我是li</li>
</ol>
<script>
console.log(ol.firstChild);
console.log(ol.lastChild);
</script>
（5）firstElementChild 返回第一个子元素节点 ie9才能支持
或者console.log[ol.children[ol.children.length-1]);
案例分析：新浪下拉菜单
导航栏里面的li都要有鼠标经过效果，所以需要循环注册鼠标事件
核心原理：当鼠标经过li里面的第二个孩子ul显示，当鼠标离开，则ul隐藏
<script>
var nav = document.querySelector('.nav');
var lis = nav.children; //得到4个小li
for(var i=1;i<lis.length;i++){
lis[i].onmouseover = function(){
this.children[i].style.display = 'block';
}
lis[i].onmouseout = function(){
this.children[1].style.display = 'none';
}
}
</script>
3.兄弟节点
（1）node.nextSibling返回当前元素的下一个兄弟节点，找不到则返回null。同样，也是包含所有的节点 回车算文本节点
（2）node.previousSibling返回当前元素上一个兄弟节点，找不到则返回null。同样，也是包含所有的节点
（3）node.nextElementSibling返回当前元素下一个兄弟元素节点，找不到则返回null
（4）node.previousElementSibling返回上一个兄弟元素节点//有兼容性问题，IE9以上才支持
如何解决：
自己封装一个兼容性的函数
function getNextElementSibling(element){
var el = element;
while(el = el.nextSibling){
if(el.nodeType===1){
return el;
}
}
return null;
}
5.4创建节点
BOM
1.BOM的构成
1.1什么是BOM
BOM即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。
BOM缺乏标准，JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C,BOM最初是Netscape浏览器标准的一部分。
1.2 BOM的构成
window对象是浏览器的顶级对象，它具有双重角色
1.它是JS访问浏览器窗口的一个接口。
2.它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法。
在调用的时候可以省略掉window，前面学习的对话框都属于window对象方法，如alert(),prompt()等。
扫一扫
621
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
