BOM : BOM是浏览器对象模型，是BrowserObject Model的缩写。它提供了一整套的从浏览器相关的前端页面相关的api.
DOM : 就是文档对象模型，是DocumentObject Model的缩写。是对HTML文档页面进行编程控制的一系列接口API. 它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。
BOM + DOM完整结构图:
1.document对象:
案例:01-document的属性
<!DOCTYPE html>
<!-- document.URL document.title document.log -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document 的属性</title>
</head>
<body>
<script>
// document.URL 可以获取当前文档的地址
console.log(window.document.URL);
// document.title 获取或者是设置 head标签中的title标签的文本内容
console.log(document.title);
//更换标题属性
document.title = '哈哈哈';
console.log(document.title);
// 查看文档的字符集编码
console.log(document.charset);
</script>
</body>
</html>案例:02-浏览器时钟
<!DOCTYPE html>
<!-- setInterval setTimeOut clearInterval() -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浏览器时钟</title>
</head>
<body>
<script>
//window.setInterval();
//可以传两个参数:
//1.要执行的代码段(可以是一个函数,也可以是一段代码字符串)
//2.要间隔执行代码段的毫秒数
var t = setInterval(function(){ //每隔一秒打印一次
console.log(1);
console.log(new Date());
},1000);
// 不推荐使用,代码字符串的方式
// setInterval("console.log(new Date());",2000);
//setTimeOut(func, delay); //延迟delay毫秒之后,执行代码段(函数) 但只执行一次
setTimeout(function(){
console.log('hi ChengCheng !!');
// 停止上面的时钟
console.log(t);
clearInterval(t); // 停止间断循环执行的 setInterval时钟
}, 5000);
</script>
</body>
</html>案例:03-标题跑马灯案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>标题跑马灯案例</title>
</head>
<body>
<script>
// console.log(document.title);
//每隔0.5秒,让title最后一个文字放到title最前面去.
//1s == 1000ms;
setInterval(function(){
//让title最后一个文字放到title最前面去
//使用字符数组的办法
//数组有: pop方法可以从数组的最后位置弹出一个元素
// unshift方法可以从数组的头部添加元素
//把字符串转换为字符串数组
var charArray = document.title.split("");
//让字符数组的最后的一个元素出数组
var lastChar = charArray.pop();
//把最后的一个元素插入到数组的开头
charArray.unshift(lastChar);
//把字符数组转成字符串
var newTitle = charArray.join("");
//把新的标题改到浏览器上去
document.title = newTitle;
}, 500);
</script>
</body>
</html>案例:04-slice实现跑马灯效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>123456</title>
</head>
<body>
<script>
//实现跑马灯效果
var intervalID = setInterval(function(){
//拿到当前的页面的title
var oldTitle = document.title;
// 拿到当前也米娜title的最后一个字符
// slice方法,可以接收两个参数
// 第一个参数: 截取字符串起始位置.第二个参数是结束位置
// slice方法不影响原始的字符串,截取到结束位置的前一个元素.
var lastChar = oldTitle.slice(oldTitle.length - 1);
var beforeStr = oldTitle.slice(0,oldTitle.length - 1);
document.title = lastChar + beforeStr;
}, 500);
// 5秒钟之后,执行清除时钟的代码
setTimeout(function(){
clearInterval(intervalID);
}, 5000);
</script>
</body>
</html>2.访问DOM树上的节点:
案例: 05-getElementById案例
<!DOCTYPE html>
<!-- getElementById('') -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>getElementById案例</title>
</head>
<body>
<p id="p1">段落1</p>
<p id="p2">段落2</p>
<p id="p3">段落3</p>
<div class="" id="d1">div</div>
<!-- 获得段落2的标签对象 -->
<script>
// 根据标签的id的值在文档中搜索标签
var elementP = document.getElementById('p2');
console.log(elementP);
// 继承关系
//elementP内部原型 - HTMLParagraphElement(段落标签的原型) -
// - HTMLElement(所有HTML标签的基类接口) - Element - Node - EventTarget - Object -null
//接口: 有自己规定的方法,属性.但必须有子类给他实现. Element/Node
//类型: 可以直接创建实例.比如:Number类型.
var d1 = document.getElementById('d1');
//d1 -> HTMLDivElement
var d2 = document.getElementById('huoqubudao');
// d2 -> null 一般情况如果函数额米有具体的值.一般都会返回null
</script>
</body>
</html>案例: 06-Element接口详解
<!DOCTYPE html>
<!-- Element.attributes Element.className Element.innerHTML Element.tagName
getAttribute(attName) removeAttribute(attrName) setAttribute(name,value) hasAttribute()
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>接口详解</title>
</head>
<body>
<div id="d1" class="ts" chengcheng="sss">
<span>你好啊</span>
<p>我是张宜成</p>
</div>
<script>
//获取到id = d1的div标签
var d1 = document.getElementById('d1');
//d1: HTMLDivElement HTMLElement Element
// d1.attribute 遍历拿到它的所有属性
console.log(d1.attributes);
// 获得某个具体属性的值 d1.attributes[0]
d1.attributes.item(0);
// 设置某个属性的值
d1.setAttribute("chengcheng","234");
// 获取某个属性的值
console.log(d1.getAttribute("class"));
//d1.className -> 直接拿到类名
//d1.innerHTMl
// 删除属性
d1.removeAttribute('chengcheng');
// Element对象: 元素,是所有标签元素的基础对象,封装了所有标签元素的公共方法和属性
// 常用属性:
// Element.attributes 获得所有属性key-value集合
// Element.className 获得类名
// Element.innerHTML 获取元素内部包裹的html标签字符串
// Element.tagName (只读) 获取元素内部包裹的html标签字符串
// 常用方法:
// Element.getAttribute(attName) 返回属性的字符串值
// Element.removeAttribute(attrName) 从指定的元素中删除一个属性
// Element.setAttribute(name,value) 设置属性
// Element.hasAttribute() 检测属性是否存在
// Element.getElementsByClassName()
// Element.getElementsByTagName()
</script>
</body>
</html>案例: 07-获取getElementByTagName
<!DOCTYPE html>
<!-- getElementsByTagName innerHTML -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>getElementByTagName</title>
</head>
<body>
<p>1-1</p>
<p>2-2</p>
<p>3-3</p>
<p>4-4</p>
<h1>哈哈</h1>
<div class="tem">混淆</div>
<script>
// 把页面中所有的p标签选择出来
// 获取当前文档中的所有的p标签
var array = document.getElementsByTagName('p');
//此方法返回:HTMLCollection集合对象,是一个伪数组
// array -> HTMLCollection -> Object.prottype
console.dir(array);
// 要求:把当前页面中所有的p标签的内部文字打印
for(var i = 0; i < array.length; i ++){
console.log(array[i].innerHTML);
}
</script>
</body>
</html>案例: 08-HTMLCollection接口详解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>08-HTMLCollection接口详解</title>
</head>
<body>
<p name="p1">k1k</p>
<p name="p2">k2k</p>
<p>k3k</p>
<div class="pss1">hi,1</div>
<div class="pss2">hi,2</div>
<div class="pss3">hi,3</div>
<script>
//把当前页面中所有的标签都获取来.
var all = document.getElementsByTagName('*');
// all -> HTMLCollection
for (var i = 0; i < all.length; i++) {
console.log(all[i]);
}
// 将HTMlCollection转成真正的数组
// Array.prototype.slice.call(c);
// HTMLCollection: 是动态集合.当标签发送变化的时候,HTMLCollection会自动同步更新.
// HTMLCollection:item()通过索引获取标签对象Element, 同[]
// HTMLCollection:nameItem()通过标签的属性名获取标签元素.
</script>
</body>
</html>案例: 09-querySelect方法详解
<!DOCTYPE html>
<!-- querySelector -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>querySelect</title>
</head>
<body>
<div class="c1">第一个div</div>
<p class="tm">哈哈哈</p>
<h3 id="tmd">这是h3标签</h3>
<script>
//querySelector可以接受一个css的选择器字符串作为参数,来搜索页面中的标签元素.
var element1 = document.querySelector(".c1");
console.dir(element1);
var p1 = document.querySelector('.c1');
var h = document.querySelector("#tmd");
var p2 = document.querySelector('p');
</script>
</body>
</html>案例: 10-querySelectAll方法详解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>querySelectAll方法详解</title>
</head>
<body>
<p>ss1</p>
<p class="tm">ss2</p>
<p class="tm">ss3</p>
<script>
// 把页面中所有的p标签包含tm样式类的标签选取出来.
var arr = document.querySelectorAll('p.tm');
// arr伪数组不会自动更新
// arr是一个NodeList接口的实例 NodeList的原型是Object.prototype
console.log(arr);
//forEach接收一个函数进行对数组中的元素进行处理.
// 函数的第一个参数是数组的元素,第二个参数是元素对应的索引
arr.forEach(function(elem, index){
console.log(index + ':' +elem.innerHTML);
});
//转化成真正的数组,数组原型的slice方法借用调用
// Array.prototype.slice.call(c);
</script>
</body>
</html>3.Element元素对象(接口)详解
4.HTMLCollection元素对象（接口）详解
5.了解Node对象(接口)
6.NodeList对象节点集合
7.DOM继承关系图
源代码下载地址: https://github.com/godlikecheng/JavaScript_complete
下一篇: JS - 事件的概念 - 02