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

时间：2022-07-20 17:54:00

getElementById() 根据id获取dom元素

没有找到则返会Null

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div id="box"></div>

    <script>

        var box=document.getElementById("box");

        console.log(box);//<div id="box"></div>

        var boxs=document.getElementById("boxs");

        console.log(boxs);//null

    </script>

</body>

</html>

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <ul id="list">

        <li>li</li>

        <li>li</li>

        <li>li</li>

        <li>li</li>

        <li>li</li>

    </ul>

    <ol>

        <li>li</li>

        <li>li</li>

    </ol>

    <script>

        var ul=document.getElementById("list");

        var lis1=ul.getElementsByTagName("li");

        console.log(lis1.length);//5

        var lis2=document.getElementsByTagName("li");

        console.log(lis2.length);//7

    </script>

</body>

</html>

设置元素的css样式

ele.style.属性=属性值

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <ul id="list">

        <li>li</li>

        <li>li</li>

        <li>li</li>

        <li>li</li>

        <li>li</li>

    </ul>

    <ol id="list2">

        <li>li</li>

        <li>li</li>

    </ol>

    <script>

        var ul=document.getElementById("list");

        ul.style.color="red";

        var ol=document.getElementById("list2");

        ol.style.fontWeight="bold";

    </script>

</body>

</html>

设置数组元素的样式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <ul id="list">

        <li>li</li>

        <li>li</li>

        <li>li</li>

        <li>li</li>

        <li>li</li>

    </ul>

    <ol id="list2">

        <li>li</li>

        <li>li</li>

    </ol>

    <script>

        var ul=document.getElementById("list");

        ul.style.color="red";

        var ol=document.getElementById("list2");

        var lis=ol.getElementsByTagName("li");

        lis[0].style.backgroundColor="pink";

        lis[1].style.backgroundColor="#abcdef";

    </script>

</body>

</html>

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

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <ol id="list2">

        <li>咪咪</li>

        <li>灰灰</li>

    </ol>

    <script>

        var ol=document.getElementById("list2");

        var lis=ol.getElementsByTagName("li");

        for(var i=0,len=lis.length;i<len;i++){

            lis[i].innerHTML+='~~~';

            console.log(lis[i].innerHTML);

        }

    </script>

</body>

</html>

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

className 设置和获取元素的类

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .orange{color:orange;}

    </style>

</head>

<body>

    <ol id="list2">

        <li>咪咪</li>

        <li>灰灰</li>

    </ol>

    <script>

        var ol=document.getElementById("list2");

        var lis=ol.getElementsByTagName("li");

        lis[0].className="orange";

        console.log(lis[0].className);

    </script>

</body>

</html>

getAttribute() 获取属性

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

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .orange{color:orange;}

    </style>

</head>

<body>

    <p id="p" class="pp" data-type="title"></p>

    <input id="text" type="text" name="text" value="hh" validate="true">

    <script>

        var p=document.getElementById("p");

        console.log(p.id);//p

        console.log(p.className);//pp

        console.log(p.getAttribute("data-type"));//title

        var text=document.getElementById("text");

        console.log(text.type);//text

        console.log(text.name);//text

        console.log(text.value);//hh

        console.log(text.getAttribute("validate"));//true

    </script>

</body>

</html>

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .orange{color:orange;}

    </style>

</head>

<body>

    <p id="p" class="pp" data-type="title"></p>

    <script>

        var p=document.getElementById("p");

        p.setAttribute("data-color","orange");

        console.log(p.getAttribute("data-color"));//orange

        p.removeAttribute("data-color");

        console.log(p.getAttribute("data-color"));//null

    </script>

</body>

</html>

相关文章