前端基础 JS DOM基础(1)

最新推荐文章于 2022-07-31 05:00:00 发布

lancefate

最新推荐文章于 2022-07-31 05:00:00 发布

阅读量313

点赞数

分类专栏：前端基础文章标签：前端基础 JS

本文链接：https://blog.csdn.net/FEUIFERISFDF/article/details/79200016

版权

前端基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

获取元素

<div class="box" id="box">
        元素1
    </div>
    <ul id="list1">
        <li>前端开发</li>
        <li>服务器端开发</li>
        <li>UI设计</li>
    </ul>
    <ol>
        <li>javaScript原生</li>
        <li>javaScript框架</li>
    </ol>
    <script>
       // 获取id为box的这个元素
       var box=document.getElementById("box");
       console.log(box);
       // 获取页面中所有的li
       var lis=document.getElementsByTagName("li");
       console.log(lis.length);
       // 获取id为list1下的所有的li
       var lis2=document.getElementById("list1")
       .getElementsByTagName("li");
       console.log(lis2.length);
    </script>

设置样式

<script>
       // 设置id为box的这个元素的文字颜色,属性是减号连接的复合形式时
       // 必需要转换为驼峰形式
       var box=document.getElementById("box");
       box.style.color='#f00';
       box.style.fontWeight="bold";
       var lis=document.getElementById("list")
       .getElementsByTagName("li");
       // 遍历每一个li
       for(var i=0,len=lis.length;i<len;i++){
          lis[i].style.color='#00f';
          if(i==0){
             lis[i].style.backgroundColor="#ccc";
          }else if(i==1){
             lis[i].style.backgroundColor="#666";
          }else if(i==2){
             lis[i].style.backgroundColor="#999";
          }else{
             lis[i].style.backgroundColor="#333";
          }
       }
    </script>

innerHTML和className

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      .on{border-bottom:1px solid #0f0;}
      .current{background:#ccc;color:#f00;}
    </style>
</head>
<body>
    <div class="box" id="box">
        元素1
    </div>
    <ul id="list">
        <li><i>前端开发</i></li>
        <li class="on"><b>服务器端开发</b></li>
        <li>UI设计</li>
    </ul>
    <script>
       var lis=document.getElementById("list").getElementsByTagName("li");
       for(var i=0,len=lis.length;i<len;i++){
           console.log(lis[i].innerHTML);
           lis[i].innerHTML+='程序';
           lis[1].className="current";
       }
       console.log(document.getElementById("box").className);
    </script>
</body>
</html>

获取,设置,删除属性

 <p id="text" class="text" align="center" data-type="title">文本</p>
    <input type="text" name="user" value="user" id="user" validate="true">
    <script>
        var p=document.getElementById("text");
        var user=document.getElementById("user");  
        console.log(p.id);
        // console.log(p.data-type);  不能获取，因为data-type不是p的默认属性，需要用getAttribute获取
        console.log(p.getAttribute("data-type"));  
        console.log(user.getAttribute("validate"));
        // 给p设置一个data-color的属性
        p.setAttribute("data-color","red");
        // 给input设置一个isRead的属性
        user.setAttribute("isRead","false");
        // 删除p上的align属性
        p.removeAttribute("align");
    </script>

lancefate

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端基础 JS DOM基础(1)

获取元素div class="box" id="box"> 元素1 div> ul id="list1"> li>前端开发li> li>服务器端开发li> li>UI设计li> ul> ol> li>javaScript原生li> li>javaScript框架l
复制链接

扫一扫

专栏目录