javascript中DOM獲取和設置元素的內容、樣式及效果

-Advertisement-

getElementById() 根據id獲取dom元素沒有找到則返會Null <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id ...

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>

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>

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>

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

android sdk manager 無法更新，解決連不上dl.google.com的問題

android sdk manager 無法更新，解決連不上dl.google.com的問題 ...
Binder基本使用

Android開發中，Binder是一種跨進程通信方式，而使用AIDL可以實現Binder的工作。如何使用它是瞭解它的第一步，本文章主要記錄使用Binder的一些步驟。（代碼思路參考《Android開發藝術探索》任玉剛著） 1.創建兩個activity 兩個activity（OneActivit ...
Kotlin DSL for HTML實例解析

Kotlin DSL, 指用Kotlin寫的Domain Specific Language. 本文通過解析官方的Kotlin DSL寫html的例子, 來說明Kotlin DSL是什麼. 首先是一些基礎知識, 包括什麼是DSL, 實現DSL利用了那些Kotlin的語法, 常用的情形和流行的庫. ... ...
瀏覽器對象模型“BOM”-- window對象

global對象全局對象所有的全局變數和全局方法，都可以歸在window上 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100 ...
checkbox 樣式重寫

css樣式 .me-checkbox:checked { background: #1673ff } .me-checkbox { outline: none;/*輪廓*/ width: 25px; height: 25px; background-color: #ffffff; border: s ...
js Dom為頁面中的元素綁定鍵盤或滑鼠事件

html滑鼠事件 onload 頁面載入 onclick 滑鼠單擊 onmouseover 滑鼠移入 onmouseout 滑鼠移出 onfocus 獲取焦點 onblur 失去焦點 onchange 域的內容改變在事件觸發中，this表示對當前dom對象的引用 1、html事件，在html元素上 ...
ES6之常用開發知識點：入門（一）

ES6介紹 ES6，全稱 ECMAScript 6.0 ，2015.06 發版。 let 和 const命令 let命令 let 命令，用來聲明變數。它的用法類似於var，區別在於var聲明的變數全局有效，let 聲明的變數只在它所在的代碼塊內有效。使用var聲明： var a = []; fo ...
CSS 如何實現當滑鼠放在上面時整行變色呢？

摘要:下文講述css中實現滑鼠放在指定行上面時，整行變色的方法分享，如下所示: 實現思路: 使用:hover偽類，實現當滑鼠指向時，其背景色發生相應的變化，如下例所示: 例：下文中的div，當滑鼠放上時，背景色發生相應的變化。 <!DOCTYPE html> <html> <head> <meta ...