JavaScript之 BOM 与 DOM

时间 2019-11-07

原文原文链接

1. JavaScript 组成

2. DOM、DOCUMENT、BOM、WINDOW 区别

DOM 是为了操做文档出现的 API ， document 是其的一个对象；
BOM 是为了操做浏览器出现的 API，window是其的一个对象。
BOM 是浏览器对象模型，DOM是文档对象模型，前者是对浏览器自己进行操做，然后者是对浏览器内的内容进行操做。javascript

归DOM管的：

E区（由web开发人员写出来的一个文件夹，里面有index.html，css，js 部署到服务器上，咱们经过浏览器的地址栏输入URL而后回车将这个document 加载到本地，浏览，右键查看源代码等）。

归BOM管的：

A区（浏览器的标签页、地址栏、搜索栏、书签栏、窗口放大还原关闭按钮，菜单栏等）
B区（浏览器右键菜单）
C区（document加载时的状态栏，显示http状态码等）
D区（滚动条）css

2.1 BOM

BOM 是 Browser Object Model，浏览器对象模型。
BOM是为了控制浏览器的行为出现的接口。好比跳转到另外一个页面、前进、后退等等，程序可能还须要获取屏幕的大小之类的参数。html

location.href='https://www.cnblogs.com/';

这个 location 就是 BOM 里的一个对象。java

2.2 WINDOW

window 也是 BOM 的一个对象，经过这个对象能够获取浏览器的窗口位置、肯定窗口大小、弹出对话框等等。
一些 window 经常使用的方法：node

window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
window.open() - 打开新窗口
window.close() - 关闭当前窗口

2.2.1 WINDOW 的子对象web

navigator 对象
浏览器对象，经过这个对象能够断定用户所使用的浏览器，包含了浏览器相关信息：浏览器

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

screen 对象
屏幕对象，不经常使用服务器

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

history 对象cookie

window.location 对象用于得到当前页面的地址 (URL)，并把浏览器重定向到新的页面。app

经常使用属性和方法：

location.href  获取URL
location.href="URL" // 跳转到指定页面
location.reload() 从新加载页面

弹出框

能够在 JavaScript 中建立三种消息框：警告框、确认框、提示框。

警告框

警告框常常用于确保用户能够获得某些信息。

当警告框出现后，用户须要点击肯定按钮才能继续进行操做。

语法：

alert('吃了吗？')

确认框

确认框用于使用户能够验证或者接受某些信息。

当确认框出现后，用户须要点击肯定或者取消按钮才能继续进行操做。

若是用户点击确认，那么返回值为 true。若是用户点击取消，那么返回值为 false。

语法：

confirm('are you ok?');

提示框

提示框常常用于提示用户在进入页面前输入某个值。

当提示框出现后，用户须要输入某个值，而后点击确认或取消按钮才能继续操纵。

若是用户点击确认，那么返回值为输入的值。若是用户点击取消，那么返回值为 null。

这里想起来一个计算 BMI 的例子：

var height = parseFloat(prompt('请输入身高（m）:'));
var weight = parseFloat(prompt('请输入体重（kg）:'));

var bmi = weight / height**2;

if (bmi < 18.5) {
    alert('太轻');
} else if (bmi < 25) {
    alert('正常');
} else if (bmi < 28) {
    alert('太重');
} else if (bmi < 32) {
    alert('肥胖');
} else {
    alert('严重肥胖');
}

计时相关

经过使用 JavaScript，咱们能够在必定时间间隔以后来执行代码，而不是在函数被调用后当即执行。咱们称之为计时事件。

setTimeout()

语法：

var t=setTimeout("JS语句",毫秒)

示例：

clearTimeout()

语法：

clearTimeout(setTimeout_variable)

示例：

setInterval()

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用做 clearInterval() 方法的参数。

语法：

setInterval("JS语句",时间间隔)

clearInterval()

clearInterval() 方法可取消由 setInterval() 设置的 timeout。

clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

语法：

clearInterval(setinterval返回的ID值)

例子：

其余全部对象方法：

window.close(); //关闭窗口
window.alert("message"); //弹出一个具备OK按钮的系统消息框，显示指定的文本
window.confirm("Are you sure?"); //弹出一个具备OK和Cancel按钮的询问对话框，返回一个布尔值
window.prompt("What's your name?", "Default"); //提示用户输入信息，接受两个参数，即要显示给用户的文本和文本框中的默认值，将文本框中的值做为函数值返回
window.status //可使状态栏的文本暂时改变
window.defaultStatus //默认的状态栏信息，可在用户离开当前页面前一直改变文本
window.setTimeout("alert('xxx')", 1000); //设置在指定的毫秒数后执行指定的代码，接受2个参数，要执行的代码和等待的毫秒数
window.clearTimeout("ID"); //取消还未执行的暂停，将暂停ID传递给它
window.setInterval(function, 1000); //无限次地每隔指定的时间段重复一次指定的代码，参数同setTimeout()同样
window.clearInterval("ID"); //取消时间间隔，将间隔ID传递给它
window.history.go(-1); //访问浏览器窗口的历史，负数为后退，正数为前进
window.history.back(); //同上
window.history.forward(); //同上
window.history.length //能够查看历史中的页面数  
clearInterval() 取消由 setInterval() 设置的 timeout。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
createPopup() 建立一个 pop-up 窗口。
moveBy() 可相对窗口的当前坐标把它移动指定的像素。
moveTo() 把窗口的左上角移动到一个指定的坐标。
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
print() 打印当前窗口的内容。
resizeBy() 按照指定的像素调整窗口的大小。
resizeTo() 把窗口的大小调整到指定的宽度和高度。
scrollBy() 按照指定的像素值来滚动内容。
scrollTo() 把内容滚动到指定的坐标。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout(方法,秒数)    在指定的毫秒数后调用函数或计算表达式。
timeOutEvent = setTimeout("longPress('" + obj + "')",1500);定时器传参数

2.3 DOM

DOM（Document Object Model）是一套对文档的内容进行抽象和概念化的方法。

HTML DOM树

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

文档节点(document对象)：表明整个文档
元素节点(element 对象)：表明一个元素（标签）
文本节点(text对象)：表明元素（标签）中的文本
属性节点(attribute对象)：表明一个属性，元素（标签）才有属性
注释是注释节点(comment对象)

JavaScript 能够经过DOM建立动态的 HTML：

JavaScript 可以改变页面中的全部 HTML 元素
JavaScript 可以改变页面中的全部 HTML 属性
JavaScript 可以改变页面中的全部 CSS 样式
JavaScript 可以对页面中的全部事件作出反应

2.3.1 对象属性

document.body    //提供对 <body> 元素的直接访问。对于定义了框架集的文档，该属性引用最外层的 <frameset>。
document.cookie    //返回与当前文档有关的全部 cookie。
document.title    //返回文档标题等价于HTML的title标签
document.domain    //返回当前文档的域名。
document.URL    //设置URL属性从而在同一窗口打开另外一网页
document.referrer    //返回载入当前文档的文档的 URL。
document.lastModified    //返回文档被最后修改的日期和时间。

2.3.2 查找标签

（1）直接查找

document.getElementById           根据ID获取一个标签
document.getElementsByClassName   根据class属性获取
document.getElementsByTagName     根据标签名获取标签合集

（2）间接查找

parentElement            父节点标签元素
children                 全部子标签
firstElementChild        第一个子标签元素
lastElementChild         最后一个子标签元素
nextElementSibling       下一个兄弟标签元素
previousElementSibling   上一个兄弟标签元素

parentElement 经过子标签获取父标签

语法：

子标签.parentElement

示例：

children 经过父标签获取全部子标签

语法：

父标签.children

firstElementChild 经过父标签获取第一个子标签

语法：

父标签.firstElementChild

lastElementChild 经过父标签获取最后一个子标签

语法：

父标签.lastElementChild

nextElementSibling 经过该元素获取下一个兄弟元素

previousElementSibling 经过该元素获取上一个兄弟元素

语法：

标签.nextElementSibling       // 经过该元素获取下一个兄弟元素
标签.previousElementSibling   // 经过该元素获取上一个兄弟元素

2.4 节点操做

（1）建立节点

语法：

createElement(标签名)

示例：

var p4Ele = document.createElement('p');

（2）添加节点

追加一个子节点（做为最后的子节点）

语法：

父标签.appendChild(新标签)

示例：

把增长的节点放到某个节点前面

语法：

父标签.insertBefore(新标签, 某个节点)

（3）删除节点

得到要删除的元素，经过父元素调用该方法删除。

语法：

父标签.removeChild(要删除的节点)

（4）替换节点

语法：

父标签.replaceChild(newnode, 某个节点);

（5）获取值操做

语法：

elementNode.value

适用于如下标签：

.input
.select
.textarea

// 获取 input 值
var i1Ele = document.getElementById('i1');
i1Ele.value;
输出："hukey"

// 获取 select 值
var s1Ele = document.getElementById('s1');
s1Ele.value;
输出："1"

// 获取 textarea 值
var t1Ele = document.getElementById('t1');
t1Ele.value
输出："123123123123"

2.5 事件

（1）经常使用事件

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素得到焦点。               // 练习：输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,表明已经输入完了,咱们能够对它进行验证.
onchange       域的内容被改变。             应用场景：一般用于表单元素,当元素内容被改变时触发.（select联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。

onselect      在文本框中的文本被选中时发生。
onsubmit      确认按钮被点击，使用的对象是form。

（2）绑定方式

绑定方式-1

<div id="d1" style="background-color: green" onclick="changeColor(this)">点我变色</div>

<script>
    function changeColor(tsh) {
        tsh.style.backgroundColor='red';
    }
</script>

绑定方式-2

<div id="d2">点我</div>
<script>
    var d2Ele = document.getElementById('d2');
    d2Ele.onclick = function () {
        this.innerText='呵呵';
    }
</script>

2个示例：

<label>
    <input id="d1" type="text" value="请输入关键字" onfocus="myfo()" onblur="myblur()">
</label>

<script>
    function myfo() {
        var divEle = document.getElementById('d1');
        if (divEle.value === "请输入关键字") {
            divEle.value="";
        }
    }
    function myblur() {
        var divEle = document.getElementById('d1');
        if (divEle.value === "") {
            divEle.value = '请输入关键字';
        }
    }
</script>

搜索框示例

<select id="s1">
    <option>请选择省份:</option>
</select>

<select id="city">
    <option>请选择城市:</option>
</select>

<script>
    data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};
    var p = document.getElementById('s1');
    var c = document.getElementById('city');
    for (var i in data) {
        var optionEle = document.createElement('option');
        optionEle.innerHTML=i;
        p.appendChild(optionEle);
    }
    p.onchange = function () {
        var pro = (this.options[this.selectedIndex]).innerHTML;
        var citys = data[pro];
        c.innerHTML = '';
        for (var i=0; i< citys.length; i++) {
            var option_city = document.createElement("option");
            option_city.innerHTML = citys[i];
            c.appendChild(option_city);
        }
    }

</script>

select联动

参考连接：

http://www.javashuo.com/article/p-ohdxjyft-k.html
http://www.javashuo.com/article/p-tbkgyuyt-h.html