BOM与DOM

BOM（Brower Object Model）是指浏览器对象模型，它使JavaScript有能力与浏览器进行“对话”。；

DOM(Document Object Model)是指文档对象模型，通过它，可以访问HTML文档的所有元素。

window对象

所有的浏览器都支持window对象，它表示浏览器窗口。

全局变量是window对象的属性。全局函数是window对象的方法。

一些常见的window方法：

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

window的子对象

navigator对象(了解即可)

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

navigator.appName //web浏览器全称

navigator.appVersion //Web浏览器厂商和版本的详细字符串

navigator.userAgent //客户端绝大部分信息

navigator.platform // 浏览器运行所在的操作系统

screen对象(了解即可)

屏幕对象，不常用。

一些属性：

　　screen.availWidth-可用的屏幕宽度

　　screen.availHeight-可用的屏幕高度

history对象(l了解即可)

window.history对象包含浏览器的历史。

浏览历史对象，包含了用户对当前页面的浏览历史，但我们无法查看具体的地址，可以简单的用来前进或后退一个页面。

history.forard()//前进一页
history.back()//后退一页

location对象

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

常用属性和方法：

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

弹出框

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

警告框

　　警告框经常用于确保用户可以得到某些信息。

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

语法：

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

确认框(了解即可)

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

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

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

语法：

confirm("你确定吗？");

提示框(了解即可)

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

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

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

语法：

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

计时相关

语法：

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

setTimeout()

　　setTimeout()方法会返回某个值。在上面的语句中，值被存储在名为t的变量中。假如你希望取消这个setTimeout()，你可以使用这个变量名来指定它。

　　setTimeout()的第一个参数是含有 JavaScript语句的字符串。这个语句可能诸如"alert(5 secnds)",或者对函数的调用，诸如alertMsg()。

　　第二个参数指示从当前起多少毫秒后执行第一个参数(1000毫秒等于一秒)。

clearTimeout()

语法：

clearTimeout(setTime_variable);

举例：

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

setInterval()

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

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

语法：

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

返回值

　　一个可以传递给window.clearInterval()从而取消对code的周期性执行的值。

clearInterval()

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

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

语法：

clearInterval(setinterval返回的ID 值)

举例：

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

DOM

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

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树。

HTML DOM 树

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

文档节点(document对象)：代表整个文档

元素节点(element对象)：代表一个元素(标签)

文本节点(text对象)：代表元素(标签)中的文本

属性节点(attribute对象)：代表一个属性，元素(标签)才有属性

注释是注释节点(comment对象)

JavaScript可以通过DOM创建动态的HTML：

JavaScript能够改变页面中的所有HEML元素

JavaScript能够改变页面中的所有HEML属性

JavaScript能够改变页面中的所有CSS样式

JavaScript能够改变页面中的所有事件做出反应

查找标签

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

注意：

　　涉及到DOM操作的JS代码应该放在文档的哪个位置。

间接查找

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

节点操作

创建节点

语法：

createElement(标签名)

示例：

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

添加节点

语法：

　　追加一个子节点(作为最后的子节点)

somenode.appendChild(newnode);

把增加的节点放到某个节点的前边

somenode.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);

删除节点：

语法：

　　获取要删除的元素，通过父元素调用该方法删除。

somenode.removeChild(要删除的节点)

替换节点

语法：

somenode.replaceChild(newnode,某个节点);

属性节点

获取文本节点的值：

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

设置文本节点的值：

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

attribute操作

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

// 自带的属性还可以直接.属性名来获取和设置
imgEle.src
imgEle.src="..."

获取值操作

语法：

　　elementNode.value

适用于以下标签：

.input

.select

.textarea

var iEle = document.getElementById("i1");
console.log(iEle.value);
var sEle = document.getElementById("s1");
console.log(sEle.value);
var tEle = document.getElementById("t1");
console.log(tEle.value);

class的操作

className // 获取所有样式类名(字符串)
classList.remove(cls) // 删除指定类
classList.add(cls)  //添加类
classList.contains(cls)  //存在返回true，否则返回false
classList.toggle(cls)  //存在就删除，否则添加

指定CSS操作

obj.style.backgroundColor="red"

JS操作CSS属性的规律：

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

事件

HTML 4.0的新特性之一是有能力使HTML事件触发浏览器中的动作(action)，比如当用户点击某个HTML元素时开启一段JavaScript。下面是一个属性列表，这些属性可插入HTML标签来定义事件动作。

常用事件

onclick        //当用户点击某个对象时调用的事件句柄。
ondblclick     //当用户双击某个对象时调用的事件句柄。
onfocus        //元素获得焦点。               // 练习：输入框
onblur         //元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       //域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
onkeydown      //某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     //某个键盘按键被按下并松开。
onkeyup        //某个键盘按键被松开。
onload         //一张页面或一幅图像完成加载。
onmousedown    //鼠标按钮被按下。
onmousemove    //鼠标被移动。
onmouseout     //鼠标从某元素移开。
onmouseover    //鼠标移到某元素之上。
onselect      //在文本框中的文本被选中时发生。
onsubmit      //确认按钮被点击，使用的对象是form。

绑定方法

方式一：

<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>

事件示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="i1">
<button id="b1">开始</button>
<button id="b2">结束</button>
<script>
    let i1Ele=document.getElementById('i1');
    let b1Ele=document.getElementById('b1');
    let b2Ele=document.getElementById('b2');
    let t;
    function showtime(){
        let currentTime=new Date().toLocaleString();
        i1Ele.value=currentTime
    }
    b1Ele.onclick=function () {
        if (!t){
            t=setInterval(showtime,1000)
        }
    };
    b2Ele.onclick=function () {
        clearInterval(t);
        t=null;
    }
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" value="xxx" id="d1">
<script>
    var i1Ele = document.getElementById('d1');
    //输入框获取焦点
    i1Ele.onfocus = function () {
        i1Ele.value='';
    };
    //输入框失去焦点
    i1Ele.onblur =function () {
        i1Ele.value='你好！'
    }
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select name="" id="d1">
    province:
</select>


<select name="" id="d2">
    city:
</select>


<script>
    let data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};
    // 先获取省市的select标签对象
    let proEle = document.getElementById('d1');
    let cityEle = document.getElementById('d2');
    // for循环获取省,并动态添加到第一个select框中
    for (let pro in data){
        // 创建option标签
        let opEle = document.createElement('option');
        // 设置文本
        opEle.innerText = pro;
        // 追加到第一个select框中
        proEle.appendChild(opEle)
    }
    proEle.onchange = function () {
        // 获取第一个select框的省信息
        let currentPro = proEle.value;
        // 获取省对应的市信息(数组)
        let aboutCityList = data[currentPro];
        // 先清空第二个select框中的标签
            cityEle.innerHTML = '';
        // for循环市信息
        for (let i=0;i<aboutCityList.length;i++){
            // 获取单独的市
            let currentCity = aboutCityList[i];
            // 动态创建option标签
            let optEle = document.createElement('option');
            // 设置文本值
            optEle.innerText = currentCity;
            // 添加到第二个select框中
            cityEle.appendChild(optEle)
        }
    }
</script>
</body>
</html>