Getting and setting the content, style and effect of elements by DOM in javascript

getElementById() gets dom element according to id

Return Null if not found

<!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>

Looking up dom elements in different scopes

<!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>

Set css style of element

ele.style. Attribute = attribute value

If it is in hyphen form, it needs to be converted to hump form

<!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>

Style array elements

<!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>

 

innerHTML gets and sets the contents of elements, including html tags and text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <ol id="list2">
        <li>Mimi</li>
        <li>Ash</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>

 

className sets and gets the class of the element

The set class will replace the original class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .orange{color:orange;}
    </style>
</head>
<body>
    <ol id="list2">
        <li>Mimi</li>
        <li>Ash</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() get attribute

Custom attribute suggestions start with data -

ele. Property name get the property directly (the tag has its own property, except class is 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() removeaattribute() sets and deletes attributes for dom elements

<!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>

Tags: Javascript Attribute

Posted on Wed, 05 Feb 2020 10:09:19 -0500 by simonrs