BOM，DOM

一 BOM

JavaScript分为 ECMAScript，DOM，BOM

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

1. window对象

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

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

一些常用的Window方法：

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

2. location对象

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

常用属性和方法：

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

3. 弹出框

可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。

3.1 警告框

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

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

3.2 确认框

当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。

confirm("你确定吗？")

3.3 提示框

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

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>

来源：https://www.cnblogs.com/mushuiyishan/p/10751373.html

标签

dom

var

bom

dom对象