前端基础 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框架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'#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


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <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'程序';
           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>

你可能感兴趣的:(前端基础)