通過JavaScript獲取標籤,修改標籤內容

weixin_34402408發表於2017-09-04
JavaScript

通過標籤名稱獲取標籤

由於相同標籤可以出現一個或者多個，所以返回的是一個標籤物件的集合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript的一段程式碼</title>
</head>
<body>
    <div id='box' class="content"></div>
    <script>
        var a = document.getElementsByTagName('div');
        alert(a);
    </script>
</body>
</html>

通過ID獲取標籤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript的一段程式碼</title>
</head>
<body>
    <div id='box'></div>
    <script>
        var a = document.getElementById('box');
        alert(a);
    </script>
</body>
</html>

通過類獲取標籤

由於類可以標記多個標籤，所以返回的是集合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript的一段程式碼</title>
</head>
<body>
    <div id='box' class="content"></div>
    <script>
        var a = document.getElementsByClassName('content');
        alert(a);
    </script>
</body>
</html>

通過name獲取標籤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript的一段程式碼</title>
</head>
<body>
    <div id='box' name="content">This is a box </div>
    <p name="content">今天天氣真好！</p>
    <a name="content" href="http://www.jianshu.com/p/72c26f06d935">javascript入門</a>
    <script>
        var a = document.getElementsByName('content');
        var div = a[0];
        var p = a[1];
        var link = a[2];
        alert(div.innerHTML);
        alert(p.innerHTML);
        alert(link.innerHTML);
    </script>
</body>
</html>

操作集合物件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript的一段程式碼</title>
</head>
<body>
    <div id='box' class="content"></div>
    <p class="content">今天天氣真好！</p>
    <a class="content" href="http://www.jianshu.com/p/72c26f06d935">javascript入門</a>
    <script>
        var a = document.getElementsByClassName('content');
        alert(a.length); //彈出3
        alert(a[1]);//彈出p標籤
    </script>
</body>
</html>

修改標籤內容

  • 通過innerHTML,innerText重新設定標籤的內容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript的一段程式碼</title>
</head>
<body>
    <div id='box' name="content">This is a box </div>
    <div id='box1'>THis is another box</div>
    <p name="content">今天天氣真好！</p>
    <a name="content" href="http://www.jianshu.com/p/72c26f06d935">javascript入門</a>
    <script>
        //innderHTML修改內容，遇到標籤自動解析
        var box = document.getElementById('box');
        box.innerHTML = "<a href='http://www.baidu.com'> 點選跳轉到百度</a>";
        //innerText 修改內容，所有內容都當做字串處理
        var boxa = document.getElementById('box1');
        boxa.innerText = "<a href='http://www.baidu.com'> 點選跳轉到百度</a>";
    </script>
</body>
</html>
  • 追加標籤內容
    = 表示修改內容
    += 表示追加
boxa.innerText += "<a href='http://www.baidu.com'> 點選跳轉到百度  another</a>";

相關文章