BOM，DOM

时间 2019-11-09

标签 bom dom 栏目 HTML 繁體版

原文原文链接

一 BOM

JavaScript分为 ECMAScript，DOM，BOMcss

BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。
DOM （Document Object Model）是指文档对象模型，经过它，能够访问HTML文档的全部元素。

1. window对象

　　Window对象是客户端JavaScript最高层对象之一，因为window对象是其它大部分对象的共同祖先，在调用window对象的方法和属性时，能够省略window对象的引用。例如：window.document.write()能够简写成：document.write()。html

　　全部 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。全局变量是 window 对象的属性。全局函数是 window 对象的方法。node

一些经常使用的Window方法：浏览器

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

2. location对象

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

经常使用属性和方法：函数

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

3. 弹出框

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

3.1 警告框

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

alert("你看到了吗？");

3.2 确认框

当确认框出现后，用户须要点击肯定或者取消按钮才能继续进行操做。若是用户点击确认，那么返回值为 true。若是用户点击取消，那么返回值为 false。spa

confirm("你肯定吗？")

3.3 提示框

当提示框出现后，用户须要输入某个值，而后点击确认或取消按钮才能继续操纵。若是用户点击确认，那么返回值为输入的值。若是用户点击取消，那么返回值为 null。code

prompt("请在下方输入","你的答案")

4. 计时相关

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

4.1 setTimeout()

　　js语句一段时间后执行

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

4.2 clearTimeout()

　　消除settimeout（）

clearTimeout(setTimeout_variable)

举例：

// 在指定时间以后执行一次相应函数
var timer = setTimeout(function(){alert(123);}, 3000)
// 取消setTimeout设置
clearTimeout(timer);

4.3 setInterval()

　　按照指定的周期（以毫秒计）来调用函数或计算表达式

　　setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。

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

4.4 clearInterval()

　　取消 setInterval()

clearInterval(setinterval返回的ID值)

举例：

// 每隔一段时间就执行一次相应函数
var timer = setInterval(function(){console.log(123);}, 3000)
// 取消setInterval设置
clearInterval(timer);

应用实例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>timer</title>
</head>
<body>
<div>欢迎matt莅临指导</div>
<script>
    function f() {
        var text1 = document.getElementsByTagName('div')[0];
        var text2 = text1.innerText.slice(1,) + text1.innerText.slice(0, 1);
        text1.innerText=text2
    }
    timer = setInterval(f, 1000)
</script>
</body>
</html>

二 DOM

1. DOM树

当网页被加载时，浏览器会建立页面的文档对象模型（Document Object Model）。HTML DOM 模型被构造为对象的树。

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

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

2. 元素查找

　　元素即标签

2.1 直接查找

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

2.2 间接查找

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

3. 元素操做

　　DOM中的元素操做都是基于父元素，增删改查都是操做儿子标签

3.1 建立元素

　　document.createElement（），JQuery中没有此项

var divEle = document.createElement("div");

3.2 添加元素

儿子添加，至关于JQuery中的：$(A).append(B) ，$(A).appendTo(B)，$(A).prepend(B)，$(A).prependTo(B)

　　fathernode.appendChild(newnode)：追加一个子节点（做为最后的子节点）

　　fathernode.insertBefore(newnode,某个节点)：把增长的节点放到某个节点的前边

var imgEle=document.createElement("img");
imgEle.setAttribute("src", "http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg");
var d1Ele = document.getElementById("d1");
d1Ele.appendChild(imgEle);

3.3 删除元素

　　fathernode.removeChild(要删除的节点)：经过父元素调用该方法删除。

3.4 替换元素

　　fathernode.replaceChild(newnode, 某个节点)

4. 文本操做

4.1 获取文本

var divEle = document.getElementById("d1")
divEle.innerText
divEle.innerHTML

4.2 设置文本

var divEle = document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="<p>2</p>"

5. 属性操做

属性分为标签自带和自定义两类，自定义经过setAttribute等方法，自带直接经过属性名操做

var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")

// 自带的属性经过属性名来获取和设置
imgEle.src
imgEle.src="..."  设置

var iEle = document.getElementById("i1");
console.log(iEle.value);

　　具备value值的标签：input，select，textarea

JQuery中的属性操做

    $('d1').attr('name');   获取
    $('d1').attr('name','matt')   设置

6. class操做

6.1 class总体

element.className  获取全部样式类名(字符串)
element.classList  获取样式类名（列表）

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

JQuery中的class操做

addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，若是有就移除，若是没有就添加。

$("p").css("color", "red"); //将全部p标签的字体设置为红色

6.2 指定class操做

经过style属性操做

obj.style.backgroundColor="red"

1.对于没有中横线的CSS属性通常直接使用style.属性名便可。如：

obj.style.margin
obj.style.width
obj.style.left
obj.style.position

2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写便可。如：

obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily

三事件

经常使用事件

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

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

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

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

1. 绑定方式

1.1 标签内绑定

<div id="d1" onclick="changeColor(this);">点我</div>
<script>
  function changeColor(ths) {
    ths.style.backgroundColor="green";
  }
</script>

this是实参，表示触发事件的当前元素。

1.2 script内绑定

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

实例：省市选择框

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>mi</title>
    <!--    <link rel="stylesheet" href="002.css">-->
</head>
<body>
<div></div>
<select name="s1" id="s1">
    <option value="">请选择省份</option>
</select>
<select name="s2" id="s2">
    <option>请选择市</option>
</select>
</body>
<script>
    data = {
        '山东省': ['潍坊市', '烟台市', '青岛市'],
        '河北省': ['石家庄市', '秦皇岛市'],
        '山西省': ['太原市']
    };
    var s1 = document.getElementById('s1');
    var s2 = document.getElementById('s2');
    for (var i in data) {
        var optEle = document.createElement('option');
        optEle.innerText = i;
        s1.appendChild(optEle)
    }
    s1.onchange = function () {
        s2.innerHTML = '<option >请选择市</option>';
        // var selectCity = data[this.value];
        var selectCity = data[this.options[this.selectedIndex].innerText];
        for (var i = 0; i < selectCity.length; i++) {
            var optEle = document.createElement('option');
            optEle.innerText = selectCity[i];
            s2.appendChild(optEle)
        }
    }
</script>
</html>