WEB前端 -- DOM

DOM描述

    文档对象模型(document object model,DOM) 是一种用于HTML和XML文档的编程接口，它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式，我们最关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

一、查找元素

1.1 直接查找

document.getElementById         根据ID获取一个标签
document.getElementByName       根据name属性获取标签集合
document.getElementByClassName  根据class属性获取标签集合
document.getElementByTagName    根据标签名获取标签集合

1.2 间接查找

    parentNode              查找父节点
    childNodes              查找所有子节点
    firstChild              查找第一个子节点
    lastChild               查找最后一个子节点
    nextSibling             查找下一个兄弟节点
    previousSibling         查找上一个兄弟节点
    
    parentElement           查找父节点标签元素
    children                查找所有子标签
    firstElementChild       查找第一个子标签元素
    lastElementChild        查找最后一个子标签元素
    nextElementSibling      查找下一个兄弟标签元素
    previousElementSibling  查找上一个兄弟标签    

二、操作

2.1  内容

    innerText
    innerHTML
    value
        input       value获取当前标签的中的值
        select      获取选中的value值(selectedIndex)
        textarea    value获取当前标签中的值

2.2 属性

    setAttribute        创建属性
    removeAttribute     删除属性
    attributes          获取所有属性

2.3 Class 操作

    className                // 获取所有类名
    classList.remove(cls)    // 删除指定类
    classList.add(cls)       // 添加类

2.4 标签并添加

2.4.1 创建标签

   a.字符串方式
        function AddEle1() {
            //创建一个标签
            var tag = "<p><input type='text /'></p>";
            //将标签添加到i1里面
            document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag);
        }
        //注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
    b.对象方式
        function AddEle2() {
            //创建一个input标签
            var tag = document.createElement('input');
            //指定input标签的格式
            tag.setAttribute('type','text');
            //设置input标签的样式
            tag.style.fontSize = '16px';
            tag.style.color = 'red';
            //创建一个p标签，将input标签包含在p标签中
            var p = document.createElement('p')
            p.appendChild(tag)
            //将标签添加到i1中
            document.getElementById('i1').appendChild(p);
        }

2.5 样式操作

    className               获取标签有哪些class样式      
    classLiss               将获取出来的标签列表的形式显示
        classList.add       添加一个class样式
        classList.remove    删除一个class样式
    
    obj.style.color = red;  以对象的方式设置样式    

2.6 位置操作

   总文档高度
    document.documentElement.offsetHeight
      
    当前文档占屏幕高度
    document.documentElement.clientHeight
      
    自身高度
    tag.offsetHeight
      
    距离上级定位高度
    tag.offsetTop
      
    父定位标签
    tag.offsetParent
      
    滚动高度
    tag.scrollTop
     
    /*
        clientHeight -> 可见区域：height + padding
        clientTop    -> border高度
        offsetHeight -> 可见区域：height + padding + border
        offsetTop    -> 上级定位标签的高度
        scrollHeight -> 全文高：height + padding
        scrollTop    -> 滚动高度
        特别的：
            document.documentElement代指文档根节点
    */

2.7 提交表单

    document.getElementById('form').submit()

2.8 其他操作

    console.log                 输出框
    alert                       弹出框
    confirm                     确认框
      
    // URL和刷新
    location.href               获取URL
    location.href = "url"       重定向
    location.reload()           重新加载
      
    // 定时器
    setInterval                 多次定时器
    clearInterval               清除多次定时器
    setTimeout                  单次定时器
    clearTimeout                清除单次定时器

2.9 事件与词法分析

2.9.1 DOM事件：

       

58面试题：行为，样式，结构 相分离的页面？
            行为：JavaScript
            样式：CSS
            结构：HTML
            this：谁调用这个函数，这个this就指向谁。
            onmouseover:鼠标在上面
            onmouseout：鼠标移动开
        绑定事件两种方式：
            a.直接标签绑定 onclick = 'xxx()'
            b.先获取Dom对象，然后进行绑定
                document.getElementById('xxx').onclick
            c.第三种方式绑定
                 mydiv.addEventListener('click',function(){console.log('aaa')},false)
                 事件的模型：
                     false：是冒泡模型
                     true：表示捕捉模型
                     ps：如果遇到多层的时候，就会用到事件模型，如果为true的时候，就是从最顶层往下触发，如果为false的时候，就是从最底层往下触发。
                     
        this当前触发事件的标签
            a. 第一种绑定方式
                <input type = 'button' onclick='Clickon(this)'>
                function Clickon(self){
                    //self 当前点击的标签
                }
            b.第二种方法绑定
                <input id = 'i1' type = 'button'>
                document.getElementById('i1').onclick = function(){
                    //this 代指当前点击的标签
                }

2.9.2 词法分析

    function t1(age){
        console.log(age);
        var age = 27;
        console.age(age);
        function age(){}
        console.age(age);
    }
    t1(3);
=============结果===============
    age(){} //声明表达式
    27
    27
================================
    分析
        active object ===> AO
            1.形式参数
            2.局部变量
            3.函数声明表达式
            
            1、形式参数
                AO.age = undefined
                AO.age=3；
            2、局部变量
                AO.age = undefined
            3、函数声明表达式
                AO.age = function()
    
    ps：在处理这样的程序时(当时不会这样写，只是举例)，传进来的形参就会被函数的声明表达式给优先覆盖，覆盖后var age = 27；就是第二个打印了，而第三个就是这个表达式也没有被执行，因此还是27。
    

事件如图所示