DOM

Posted 2020-12-02 hinimix

Dom:
    1 找到标签
        直接找
            document.getElementById(‘id_name‘)  #根据ID获取单个元素
            document.getElementsByTagName(‘div‘)    #根据tagname获取多个元素
            document.getElementsByClassName(‘class_name‘)   #根据Classname获取多个元素
            document.getElementsByName  #根据name获取多个元素
        间接找
            tag = document.getElementById(‘id_name‘)
            parentNode          # 父节点
            childNodes          # 所有子节点
            firstChild          # 第一个子节点
            lastChild           # 最后一个子节点
            nextSibling         # 下一个兄弟节点
            previousSibling     # 上一个兄弟节点

            parentElement           # 父节点标签元素
            children                # 所有子标签
            firstElementChild       # 第一个子标签元素
            lastElementChild        # 最后一个子标签元素
            nextElementtSibling     # 下一个兄弟标签元素
            previousElementSibling  # 上一个兄弟标签元素
    2 操作标签
        文件内容
            tag.innerText:  #获取标签里的文本全部内容,会过滤掉html标签
            tag.innerHTML:  #获取标签里的全部内容
            tag.value:  #对于input系列生效

        tag.className:  #class的name
        tag.classList:  #class的name的list
            remove: #删除指定样式
            add:    #添加指定样式
        checkbox:
            checked


    3 样式操作
        <div class="c1 c2" style=‘font-size:16px;‘></div>
        obj.style.fontSize=‘16px‘;

    4 属性操作
        obj.setAttribute(‘xxx‘, ‘hinimix‘);     #设置属性
        obj.removeAttribute(‘xxx‘)              #移除属性
        obj.getAttribute(‘xxx‘)                 #单个属性
        obj.attributes                          #所有属性

    5 创建标签
        1: 2b function
            tag = "<input type=‘text‘/>"
            document.getElementById("show").insertAdjacentHTML("beforeEnd", tag);
            插入位置
                beforeBegin
                afterBegin
                beforeEnd
                afterEnd
        2: clever function
            tag = document.createElement(‘input‘)
            tag.setAttribute(‘type‘, ‘text‘)
            tag.style.fontSize = ‘16px‘
            tag.style.color = ‘red‘
            document.getElementById("show").appendChild(tag);

    6 Dom提交表单
        任何标签都能提交表单
        document.getElementById(‘a1‘).submit();

    7 other:
        console.log
        alert()
        confirm("infomation")   #choice true/false
        locaton.reload()        #refresh local page
        location.href           #jump to dest web site
            location.href = location.href ==> location.reload()
        setInterval:
            var obj = setInterval(function(){}, 4000}
        clearInterval:
            clearInterval(obj)
        setTimeout()
        clearTimeout()

    8 事件:
        onclick
        onfocus
        onblur
        onmouseover
        onmouserout