码迷,mamicode.com
首页 > Web开发 > 详细

DOM(innerHTML和className)

时间:2019-12-14 22:45:29      阅读:126      评论:0      收藏:0      [点我收藏+]

标签:classname   ntb   获取   name   innerhtml   lan   ati   框架   颜色   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DOM(innerHTML和className)</title>
    <style>
        .h{color: red};
        .h3{color: blue};
    </style>
    <!-- 
        n.innerHTML;获取元素n开始标签-结束标签之间的所有内容
                    n.innerHTML="a";将元素n开始标签-结束标签之间的所有内容变成"a"
        n.className;获取元素n的类名
                    n.className="b";将元素n的类名改成"b"
     -->
</head>
<body>
    <h3 class="h">前端书籍</h3>
    <ul id="listWeb">
        <li><b>html基础</b></li>
        <li>CSS基础</li>
        <li>JavaScript基础</li>
        <li>Jquery框架</li>
        <li>bootStrap框架</li>
    </ul>
    <h3>JAVA书籍</h3>
    <ul id="listJava">
        <li>JAVA语言基础</li>
        <li>三大框架</li>
        <li>JAVA深入浅出</li>
    </ul>
<script>
    var a=document.getElementById("listWeb").getElementsByTagName("li");
    console.log(a[0].innerHTML);//<b>html基础</b>
    console.log(a[0].innerHTML="我重新给这个元素的内容赋值了.");//我重新给这个元素的内容赋值了;即改变了原有内容
    console.log(a[0].innerHTML+="我又在原来的内容理增加了这些");//我重新给这个元素的内容赋值了.我又在原来的内容理增加了这些
    var b=document.getElementsByClassName("h");
    console.log(b[0].className);//h;字体颜色为红色
    console.log(b[0].className="h3");//h3;重新给该元素类名赋值,即改变原有的类名//字体颜色变成了蓝色
</script>
</body>
</html>

DOM(innerHTML和className)

标签:classname   ntb   获取   name   innerhtml   lan   ati   框架   颜色   

原文地址:https://www.cnblogs.com/vinson-blog/p/12041046.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!