javascript中DOM获取和设置元素的内容、样式及效果

getElementById() 根据id获取dom元素

没有找到则返会Null

<!DOCTYPE html>
<html lang="en"head>
    Meta charset="UTF-8"title>Document</bodydiv id="Box"></divscript>
        var Box=document.getElementById("Box);
        console.log(Box);//<div id="Box"></div>

         BoxsBoxs);
        console.log(Boxs);null
    html>

在不同的范围内查找dom元素

ul ="list">
        li>liulol ullist);
         lis1ul.getElementsByTagName(li);
        console.log(lis1.length);5

         lis2document.getElementsByTagName();
        console.log(lis2.length);7
    >

设置元素的css样式

ele.style.属性=属性值

如果是连字符形式的，需要转换为驼峰形式

ol ="list2");
        ul.style.colorred;

         ollist2);
        ol.style.fontWeightbold;

    >

设置数组元素的样式

 lisol.getElementsByTagName();
        lis[0].style.backgroundColorpink;
        lis[1#abcdef>

innerHTML 获取和设置元素的内容，包括html标签和文本

>咪咪>灰灰for( i,lenlis.length;i<len;i++){
            lis[i].innerHTML+='~~~;
            console.log(lis[i].innerHTML);
        }

    >

className 设置和获取元素的类

设置的类会把原来的类替换掉

style>
        .orange{color:orange;}
    ].className;
        console.log(lis[].className);

    >

getAttribute() 获取属性

自定义属性建议都以 data- 开头

ele.属性名直接获取属性（标签自带属性，除了class为className)

p ="p" class="pp" data-type="title"pinput ="text" type name value="hh" validate="true" pp);
        console.log(p.id);p
        console.log(p.className);pp
        console.log(p.getAttribute(data-type));title

         texttext);
        console.log(text.type);text
        console.log(text.name);        console.log(text.value);hh
        console.log(text.getAttribute(validatetrue

    >

setAttribute() removeAttribute() 给dom元素设置和删除属性

);
        p.setAttribute(data-color);
        console.log(p.getAttribute(orange
        
        p.removeAttribute(null


    >

javascript中DOM获取和设置元素的内容、样式及效果

猜你在找的JavaScript相关文章