DOM

骑猪看日落 2023-06-03 15:52 8阅读 0赞

## DOM ##

1.  找到标签  
    a.获取单个元素：var obj = document.getElementById(‘i1’);  
    b.获取标签元素，结果是数组： document.getElementsByTagName(‘div’);  
    c.获取类元素，结果是数组： document.getElementsByClassName(‘c1’);  
    d.根据name属性： document.getElementsByName(‘CC’);
2.  操作标签  
    a.innerHTML  
    b.innerText  
    c.value; \[input:value获取当前标签中的值;select :获取选中的value值 （selectedIndex）; textarea :value1获取当前标签中的值 \]  
    d.checked;\[checkbox\]  
    e.className  
    f.classList: remove(‘class’);add(‘class’);  
    g.DOM.style.样式 = “”；  
    h.属性操作：\*获取：var value = elem.getAttribute(“属性名”)；;  
                           设置自定义属性：elem.setAttribute(“属性名”，value);  
                           .移除属性：elem.removeAttribute(“属性名”)；  
    i.创建标签，并添加到HTML中  
    1).字符串形式  
                           var tag = “`<p><input type='text'/></p>`”  
                           document.getElementById(‘i1’).insertAdjacentHTML(‘beforeEnd’,tag); //以字符串方式插入  
                           第一个参数只可以是beforBegin,afterBegin,beforeEnd,afterEnd  
    2).对象的方式  
                           var tag = document.createElement(‘input’);  
                           tag.setAttribute(‘type’,‘text’);  
                           document.getElementById(‘i1’).appendChild(tag); //以html形式插入  
    j.提交表单(任何标签都可以提交表单)  
                           document.getElementById(‘i1’).submit();  
    k.其他：  
                           alert(123);  
                           comfrim(‘真的要删除吗’);  
                           console.log();  
                           location.href ; 获取当前url  
                           location.href = “” ;重定向，跳转  
                           location.href = location.href ;页面刷新1  
                           setInterval(function()\{\},1000); 定时器一直执行  
                            clearInterval(定时器对象名); 清除定时器\_  
                           setTimeout(function()\{\},5000);定时器只执行一次  
                           clearTimeout(定时器名)；清除定时器  
    **3. 事件**  
    **绑定事件有三种方式:**  
                           a.直接标签绑定；this在  
                            <input id = “i1” type="button"οnclick=“Cli(this)”>  
                           function Cli(ths)  
                           \{  
                            \}  
                            b.先获取Dom对象，然后进行绑定  
                             
                            document.getElementById(‘i1’).onmousemove = function()\{  
                            this.style.backgroundColor = “red”;  
                            \}  
                            c.mydiv = addEventListener(‘click’,function()\{\},flase); //flase冒泡事件；true捕捉事件  
    **a. onclick;**  
    **b.onfocus**  
    **c.onblur**  
    **d.onmouseout  
    e.onmousemove  
    谁调用函数，this指向谁；也就是触发事件的标签**
    
        active object ：
        1.形式参数
        2.局部变量
        3.函数表达式