网页结构树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联动