DOM，BOM，获取DOM，事件绑定，样式，防止冒泡，阻止默认行为通用函数
1、什么是dom？什么是bom？
1.1、DOM
1.1.1、dom由来
首先：Netscape 发明了 JavaScript
标准化：JavaScript 1.1 作为一个草案提交给欧洲计算机制造商协会（ECMA），该标准定义了名为 ECMAScript 的全新脚本语言。所以可以理解ECMAScript就是官方认定JavaScript的标准，好比市面上卖臭豆腐（js）的，而臭豆腐必须“要闻着臭，吃起来香”（ECMAScript）这个标准
运行环境：上面的标准只是标准，但是具体做什么是由环境决定，但是记住必须符合标准，举个例子。臭豆腐可以炒，可以油炸，水煮。。。这些都是不同的做法，但是必须要“要闻着臭，吃起来香”，这样才是正宗。所以让我们来看看js的不同环境下的表现
前端表现得浏览器中： ESMAScript + w3c = 操作元素，最后在浏览器上体现。。。！！！注意这里得w3c是指BOM+DOM。
后端表现得node中： ESMAScript + commonJS = 后端数据库操作，文件操作。。。。
1.1.2、dom作用
W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。DOM不属于JS是W3C的内容，其作用就是为了随心所欲操作网页上的节点。
1.1.3、dom本质
dom的数据结构是树结构，dom的本质就是浏览器把拿到的html或xml的代码结构化成一个的模型。只不过这个模型能被浏览器进行识别，这样我们能够看到花花绿绿的图形界面。同时这个模型还能够被js操作。
1.2、BOM
1.2.1、bom由来
BOM（浏览器对象模型），可以对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。由于没有相关的 BOM 标准，每种浏览器都有自己的 BOM 实现。
1.2.2、我对bom与dom的理解
bom就是浏览器的边框，比如搜索啊，当前网址啊，dom就是浏览器显示内容里面的。
2、DOM节点与元素
2.1、DOM节点与元素的区别
以下是w3c的内容
在HTML DOM（文档对象模型）中，每个部分都是节点：
文档本身是文档节点
所有 HTML 元素是元素节点
所有 HTML 属性是属性节点
HTML 元素内的文本是文本节点 （包括回车符也是属于文本节点）
注释是注释节点
Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。
NodeList 对象表示节点列表，比如 HTML 元素的子节点集合。
元素也可以拥有属性。属性是属性节点。
2.2、BOM常用属性和获取DOM节点以及操作元素
2.2.1、BOM常用属性
window.location.href//操作浏览器的当前网页地址
window.location.search//获取url中？之后的内容
window.location.hash//得到url中#之后的内容
2.2.2、获取DOM
document.getElement系列
document.getElementById()
document.getElementsByClassId()
document.getElementsByTagName()
//getElementsByTagName()可以根据标签名来获取一组元素节点对象
//这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
//即使查询到的元素只有一个，也会封装到数组中返回
document.querySelector系列
document.querySelector()//()中是用css选择器的选择方式
document.querySelectorAll()
/*
* 如果需要读取元素节点属性，
* 直接使用 元素.属性名
* 例子：元素.id 元素.name 元素.value
* 注意：class属性不能采用这种方式，
* 读取class属性时需要使用 元素.className
*/
2.2.3、操作dom元素
.childNodes//子结点
//childNodes属性会获取包括文本节点在呢的所有节点
//根据DOM标签标签间空白也会当成文本节点
.children//子元素
.previousSibling//上一个兄弟结点
.nextSibling//下一个兄弟节点
.previousElementSibling//获取前一个兄弟元素
.nextElementSibling//获取后一个兄弟元素
.parentNode//父
.firstElementChild//获取当前元素的第一个子元素
.lastElementChild//获取当前元素的最后一个子元素
.firstChild//第一个孩子节点
.lastChild//最后一个孩子节点
2.2.4、操作dom元素DOM的增删改
这里是观看尚学堂视频，实在是记不清讲师名字了。抱歉
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">
window.onload = function() {
//创建一个"广州"节点,添加到#city下
myClick("btn01",function(){
//创建广州节点 <li>广州</li>
//创建li元素节点
/*
* document.createElement()
* 可以用于创建一个元素节点对象，
* 它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，
* 并将创建好的对象作为返回值返回
*/
var li = document.createElement("li");
//创建广州文本节点
/*
* document.createTextNode()
* 可以用来创建一个文本节点对象
* 需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
*/
var gzText = document.createTextNode("广州");
//将gzText设置li的子节点
/*
* appendChild()
* - 向一个父节点中添加一个新的子节点
* - 用法：父节点.appendChild(子节点);
*/
li.appendChild(gzText);
//获取id为city的节点
var city = document.getElementById("city");
//将广州添加到city下
city.appendChild(li);
});
//将"广州"节点插入到#bj前面
myClick("btn02",function(){
//创建一个广州
var li = document.createElement("li");
var gzText = document.createTextNode("广州");
li.appendChild(gzText);
//获取id为bj的节点
var bj = document.getElementById("bj");
//获取city
var city = document.getElementById("city");
/*
* insertBefore()
* - 可以在指定的子节点前插入新的子节点
* - 语法：
* 父节点.insertBefore(新节点,旧节点);
*/
city.insertBefore(li , bj);
});
//使用"广州"节点替换#bj节点
myClick("btn03",function(){
//创建一个广州
var li = document.createElement("li");
var gzText = document.createTextNode("广州");
li.appendChild(gzText);
//获取id为bj的节点
var bj = document.getElementById("bj");
//获取city
var city = document.getElementById("city");
/*
* replaceChild()
* - 可以使用指定的子节点替换已有的子节点
* - 语法：父节点.replaceChild(新节点,旧节点);
*/
city.replaceChild(li , bj);
});
//删除#bj节点
myClick("btn04",function(){
//获取id为bj的节点
var bj = document.getElementById("bj");
//获取city
var city = document.getElementById("city");
/*
* removeChild()
* - 可以删除一个子节点
* - 语法：父节点.removeChild(子节点);
*
* 子节点.parentNode.removeChild(子节点);
*/
//city.removeChild(bj);
bj.parentNode.removeChild(bj);
});
//读取#city内的HTML代码
myClick("btn05",function(){
//获取city
var city = document.getElementById("city");
alert(city.innerHTML);
});
//设置#bj内的HTML代码
myClick("btn06" , function(){
//获取bj
var bj = document.getElementById("bj");
bj.innerHTML = "昌平";
});
myClick("btn07",function(){
//向city中添加广州
var city = document.getElementById("city");
/*
* 使用innerHTML也可以完成DOM的增删改的相关操作
* 一般我们会两种方式结合使用
*/
//city.innerHTML += "<li>广州</li>";
//创建一个li
var li = document.createElement("li");
//向li中设置文本
li.innerHTML = "广州";
//将li添加到city中
city.appendChild(li);
});
};
function myClick(idStr, fun) {
var btn = document.getElementById(idStr);
btn.onclick = fun;
}
</script>
</head>
<body>
<div id="total">
<div class="inner">
<p>
你喜欢哪个城市?
</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
</div>
</div>
<div id="btnList">
<div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div>
<div><button id="btn02">将"广州"节点插入到#bj前面</button></div>
<div><button id="btn03">使用"广州"节点替换#bj节点</button></div>
<div><button id="btn04">删除#bj节点</button></div>
<div><button id="btn05">读取#city内的HTML代码</button></div>
<div><button id="btn06">设置#bj内的HTML代码</button></div>
<div><button id="btn07">创建一个"广州"节点,添加到#city下</button></div>
</div>
</body>
</html>
3、常用事件
4、通用的事件绑定与取消，阻止默认行为，防止冒泡，改变样式
4.1、事件绑定
1、绑定到元素上
<div onclick="fn()"></div>
2、获取dom后绑定
<div id="button" ></div>
<script>
let button = document.getElementById("button")
button.onclick = function(){
...
}
</script>
3、使用addEVentListener通用的事件绑定函数（包括解绑）
<div id="button" ></div>
<script>
let button = document.getElementById("button")
addEvent(button,click,fn(){...})
removeEvent(button,click,fn(){...})
//绑定
function addEvent(obj, type, fn){
if(obj.addEventListener){
obj.addEventListener(type, fn, false);
} else if(obj.attachEvent){
obj.attachEvent('on' + type, fn);
} else {
obj['on' + type] = fn;
}
}
//解绑
function removeEvent(obj, type, fn){
if(obj.removeEventListener){
obj.removeEventListener(type, fn, false);
} else if(obj.detachEvent){
obj.detachEvent('on' + type, fn);
} else {
obj['on' + type] = null;
}
}
</script>
4.2、阻止默认行为
获取dom后绑定来绑定的,在事件处理函数中return false来取消
通过addEventListener这种形式来绑定的，在事件处理函数中 ev.preventDefault()取消
function stopDefault(e){
//防止浏览器默认行为(W3C)
if(e && e.preventDefault){
e.preventDefault();
}
//IE中组织浏览器行为
else{
window.event.returnValue=false;
}
return false;
}
4.3、防止冒泡
function stopPropagation(e) {
e = e || window.event;
if(e.stopPropagation) { //W3C 阻止冒泡方法
e.stopPropagation();
} else {
e.cancelBubble = true; //IE 阻止冒泡方法
}
}
4.4、改变样式
function getStyle(obj,name){
if (obj.currentStyle) {
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];
}
}