JavaScript 的DOM和BOM

1、组成部分

• 核心（ECMAScript）
• BOM，浏览器对象模型，控制浏览器种页面以外的操作
• DOM，文档对象模型，控制页面操作

2、BOM 对象

　　2.1 window 对象

　　　　由于window对象是其它大部分对象的共同祖先，在调用window对象时，可以省略window对象的引用。

　　　　一些常用的Window方法：

　　　　　　window.innerHeight -- 浏览器窗口的内部高度

　　　　　　window.innerWidth -- 浏览器窗口的内部宽度

　　　　　　window.close() -- 关闭当前窗口

　　　　　　window.open() -- 打开新窗口

　　2.2 navigator 对象

　　　　通过这个对象可以判定用户所使用的浏览器，包括浏览器相关信息。

navigator.appName　　// Web浏览器全称
navigator.appVersion　　// Web浏览器厂商和版本的详细字符串
navigator.userAgent　　// 客户端绝大部分信息
navigator.platform　　　// 浏览器运行所在的操作系统

　　2.3 screen 对象

　　　　screen.availWidth -- 可用的屏幕宽度

　　　　screen.availHeight -- 可用的屏幕高度

　　2.4 history 对象

　　　　属性：history.length -- 返回当前页面历史中的URL的个数

　　　　方法：

　　　　　　history.forward() -- 加载history列表的前一个URL

　　　　　　history.back() -- 加载history列表的后一个URL

　　2.5 location对象

　　　　location.href -- 获取URL

　　　　location.href = "URL" -- 跳转到指定页面

　　　　location.reload() --重新加载页面

 　　2.6 弹出框

　　2.7 计时器

// 用法
// 3s后显示提示框（只显示一次）
var t = setTimeout("alert(123123)", 3000);
// var t = setTimeout(function(){alert(123123)}, 3000);
// 取消定时器
clearTimeout(t);

// 每隔3s显示一次提示框
var t = setInterval("alert(123123)", 3000);
// 取消定时器操作
clearInterval(t);

3、DOM 对象

　　DOM标准规定HTML文档中的每一个成分都是一个节点(node):

　　3.1 节点查找

 　　　　3.1.1 直接查找

找不到标签可能的原因：加载顺序的问题
解决办法：
1. 把js代码放到相应标签后面，或同一放到body标签最后一个子标签的后面
2. 如果想要放到head标签里，可以使用window.onload
<script>
    window.onload = function(){
                        // 需要执行的语句
                    };
</script>

　　　　3.1.2 间接查找

　　3.2 节点的增删改查

<div class="div1">
    <div class="div2">aaaaaaaaaaaaaaaa</div>
    <p>bbbbbbbbbbb</p>
    <div class='div3'>ccccccccccc</div>
</div>

// 创建一个新标签
var  imgEle = document.createElement("img");

// 添加属性
imgEle.setAttribute("src", "111.jpg");

//  找到父节点
var con = document.getElementsByClassName("div1")[0];

// 添加节点
// 在父节点内追加一个节点
con.appendChild(imgEle);
// 或者在指定某标签之前插入
con.insertBefore(imgEle, con.lastElementChild);

// 删除子标签，通过父元素调用这个方法
con.removeChild(con.firstElementChild);

// 替换某节点
conn.replace(imgEle, confirstElementChild);

　　3.3 文本节点操作

var divEle = document.getElementById("d1")
divEle.innerText    // 只能获得纯文本
divEle.HTML         // 获取包含标签的文本，可以做赋值标签操作，并能渲染出效果

// 设置文本节点的值
divEle.innerText = "abcabcabc";
divEle.innerHTML = "<p><b>abcabc</b></p>";

　　3.4 attribute 操作

var divEle = document.getElementsByClassName("d1")[0];
divEle.setAttribute("age",23)
divEle.getAttribute("age")
divEle.removeAttribute("age")

// 自带的属性可以直接通过属性名来获取和设置
// 不能获得<style>标签内的样式属性，divEle.style.fontSize得到的是Null
imgEle.src
imgEle.src="..."

　　3.5 获取value 

　　　　语法：element.value

　　　　适用标签：input, select, textarea

　　3.6 class操作

element.className  获取所有样式类名(字符串)

element.classList.remove(cls)  删除指定类
element.classList.add(cls)  添加类
element.classList.contains(cls)  存在返回true，否则返回false
element.classList.toggle(cls)  存在就删除，否则添加

　　3.7 指定CSS 操作

// 语法：
element.style.backgoundcolor="red";

// 对于没有中横线的直接使用style.属性名：
ele.style.margin;
ele.style.width;

// 对于含有中横线的CSS属性，横线后面第一个字母大写：
ele.style.marginTop;
ele.style.borderLeftWidth;

// 如果是在style标签内定义的属性，通过style.属性名获取不到，
// 但直接在标签内定义的style属性，可以获取的到

4、事件

事件	描述
onclick	当用户点击某个对象时调用的事件句柄
ondblclick	当用户双击某个对象时调用的事件句柄
onfocus	元素获得焦点，应用：输入框
onblur	元素失去焦点，应用：当焦点离开输入框时,代表已经输入完,我们可以对它进行验证.
onchange	域的内容被改变时发生，可以适用于：input，select，textarea，应用：select联动
onkeydown	某个键盘按键被按下
onkeypress	某个键盘按键被按下并松开
onkeyup	某个键盘按键被松开
onload	在页面或图像加载完成后立即发生
onmousedown	鼠标按钮被按下
onmousemove	鼠标被移动
onmouseout	鼠标从某元素移开, 只要离开标签的任何一个子标签都会触发
onmouseleave	鼠标从某元素移开,只有离开绑定的标签才会触发
onmouseover	鼠标移到某元素之上
onselect	在文本框中的文本被选中时发生，适用于：input，textarea
onsubmit	事件在表单提交时触发
oninput	实时的监测input的数据改变，只要input内容改变就触发事件

　　4.1 绑定事件方式

// 方式一：
// <div id="d1" onclick="changeColor(this);">点我</div>
<script>
  function changeColor(ths) {
    ths.style.backgroundColor="green";
  }
</script>
// this是实参，表示触发事件的当前元素。
// 函数定义过程中的ths为形参

// 方式二：
// <div id="d2">点我</div>
<script>
  var divEle2 = document.getElementById("d2");
  divEle2.onclick=function () {
    this.innerText="呵呵";
  }
</script>

　　4.2 阻止默认事件触发

　　　　1. 在事件函数内部最后加上：return false;

　　　　2. 在事件的函数内部最后加上：e.preventDefault();

　　　　　　ele.onsubmit = function(e){...; e.preventDefault(); }　

 　　4.3 事件传播（事件冒泡）

　　　　当父标签和子标签都有事件时，点击子标签也会触发父标签的事件

　　　　解决办法：在子标签内加上：e.stopPropagation()，则触发事件时，只触发子标签事件