网页结构树DOM

引入

window对象

所有浏览器都支持 window 对象。它表示浏览器窗口。
*如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。
*没有应用于 window 对象的公开标准，不过所有浏览器都支持该对象。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。全局函数是 window 对象的方法。
接下来要讲的HTML DOM 的 document 也是 window 对象的属性之一。
一些常用的Window方法：

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

window的子对象

navigator对象

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

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

#爬虫伪造

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

history对象

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

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

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

弹出框

警告框:用户确保用户可以得到某些信息
- 语法:alert('确认是否')
- 警告框出现后,用户需要点击确定按钮才能继续进行操作;
确认框:用户可以验证或者接受某些信息
- 当确认框出现后,用户需要点击或则取消按钮才能继续进行操作;
- 语法:confirm('Are you sure')
提示框:经常用于提示用户在进入页面前输入某个值
- 用户需要输入值,才能继续进行,点击确认后,那么返回值为输入的值,点击取消,返回null;
- 语法:prompt('输入你的答案')

计时相关

通过使用这个内置函数,我们可以在一定时间间隔之后来执行代码,而不是在函数被调用后立即执行,我们称之为计时事件;
- setTimeout()语法: var t = setTimeout('js语句',毫秒);
- ```
function foo(){
    alert(666);
};
var t = setTimeout('console.log(555)',2000); #字符串类型

# undefined
    555   #两秒之后执行
```
- ```
function foo(){
    alert(666);
};
var t = setTimeout(foo,2000);   #这里传入的是函数名;加上括号是返回值
```
  setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。
  
  setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如 alertMsg()"。
  
  第二个参数指示从当前起多少毫秒后执行第一个参数（1000 毫秒等于一秒）。
- clearTimeout():清除时间对象;
- setinterval()周期调用函数或计算表达式;
- ```
var t = setInterval(function (){console.log(123)},1000)
undefined
123
clearInterval(t)
```

HTML DOM树

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

文档节点(document对象):代表整个文档
元素节点(element对象):代表一个元素(标签)
文本节点(text对象):代表元素(标签)中的文本
属性节点(attribute对象):代表一个属性,元素(标签)才有属性
注释节点(comment对象):

查找标签

直接查找

通过id获取一个标签
document.getElementById('ls')

通过class获取一个标签
document.getElementByClassName('ck') 
得到的是一个类似列表的东西

document.getElementsByTagName  
 根据标签属性名获取标签合集
 得到的也是一个类似列表的东西;

#先找到标签属性,例如 span div p input 标签里面有自定义属性,通过attribute修改

间接查找

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

#******这些都是属性,不需要括号

节点操作

创建节点:createElement(标签名)
语法: var divEle = document.creatElement('div');
添加节点:somenode.appendChild(newnode);
原有节点调用函数,参数为创建的新标签;为原有标签追加一个子节点;
somenode.insertBefore(newnode,某个节点);
把增加的节点放到某个节点的前边
删除节点:removeChild(要删除的节点)
注意注意:::该方法通过父元素调用删除
替换节点:节点对象.replaceChild(新节点,某个节点)

属性节点

获取文本节点的值

var divEle = document.getElementById("d1")
divEle.innerText ='<p>gg</p>'  #会把value值一起原样添加到父节点
divEle.innerHTML ='<p>gg</p>'#会解析语句是否是标签,若是,按规则添加;
会直接替换掉原有标签

attribute操作

var deEle = document.getElementById('s1')
undefined
deEle.getAttribute('age')    #通过标签对象获取标签是否含有age属性
null
deEle.setAttribute('age','18')  #给标签对象设置自定义属性( age = '18')
undefined

deEle.removeAttribute('age')  #删除该属性

获取值操作
- 适用标签 input select textarea 找到之后修改value值,直接赋值

class的操作

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

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


#例子:::
var t = document.getElementById('s1')
t.classList.remove('h2')
undefined
t.classList.add('h2')
undefined
t.classList.remove('h2')
undefined
t.classList.add('h2')
undefined

指定css操作

t.style.borderRadius = '30%';
#属性中有中横线的把中横线去掉,然后把首字母大写
例如: border-radius  改为  borderRadius

事件

常用事件

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

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

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

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

绑定方式:

    <div id="s1" class="h1 h2"></div>
    <button onclick="changeStyle();">点我</button>
    <button id="b2">再点一下</button>
<script>
    ####方式一  (通过标签里的方法,直接调用)
    function changeStyle() {
        var s = document.getElementById('s1');
        s.classList.toggle('h2');
        s.style.borderRadius = '20%';
    }

    ####方式二(通过标签先找到事件对象,然后再调用事件)
    var sw = document.getElementById('b2');
    sw.onclick = function secondChange() {
        var s = document.getElementById('s1');
        s.style.borderRadius = '50%';
    }

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<label id = 's1' for = "province">省</label>
<select name="proVince" id="d">
    <option value="">请选择省</option>
</select>

<label id = 's2' for="county">市</label>
<select name="counTy" id="c">
</select>
<script>
    var dic = {
        '北京':['昌平区','怀柔区','海淀区'],
        '上海':['浦东区','徐汇区','普通信区'],
        '山东':['烟台区','青岛区','威海区']
    };
    var sel1ELe = document.getElementById('d');
    (function () {
        for (var i in dic){
            // 用document创建节点;
            var tem = document.createElement('option');
            // 给节点添加属性;
            tem.innerText = i;
            // 给节点安排位置
            sel1ELe.appendChild(tem);
        }
    })();

    var sel2Ele = document.getElementById('c');
    sel1ELe.onchange = function (ev) {

        // 普通写法
        // innerHTML代表改变标签调用对象的值,如果有标签会被识别;
        //     sel2Ele.innerText = '';
        // 单独for循环遍历时,若是对象,则i代表第一个key值,若是列表则代表索引;
        // for (var i in dic[sel1ELe.value]){
        //    var tem = document.createElement('option');
        //    tem.innerText = dic[sel1ELe.value][i];
        //    sel2Ele.appendChild(tem);
        // }

        // forEach写法
        // innerHTML代表改变标签调用对象的值,如果有标签会被识别;
        sel2Ele.innerText = '';
        // 列表单独的方法,这里参数i代表列表中的值
        dic[sel1ELe.value].forEach(function (i) {
            var tem = document.createElement('option');
            tem.innerText = i;
            sel2Ele.appendChild(tem);
        })
    }

</script>
</body>
</html>

select联动