JavaScriptDOM基础 -- 笔记 - 图2review0521-2

  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>DOM基础部分</title>
  7.     <style type="text/css">
  8.         .current{
  9.             font-weight: bold;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <div class="box" id="box">元素1</div>
  15.     <ul id="list1">
  16.         <li>第一个li</li>
  17.         <li>第二个li</li>
  18.         <li>第三个li</li>
  19.     </ul>
  20.     <ul id="list2">
  21.         <li>第一个li</li>
  22.         <li>第二个li</li>
  23.         <li>第三个li</li>
  24.     </ul>
  26.     <hr>
  27.     <p id="text" class="text" align="center" data-type="title">文本</p>
  28.     <input type="text" id="user" name="user" value="user" validate="true">
  30.     <hr>
  31.     <form action="#">
  32.         <label>用户名</label>
  33.         <input type="text" id="userName" name="userName" value="123">
  34.         <input type="button" id="btn" name="" value="btn" onclick="show1()"><br>
  36.         <input type="radio" name="xb" value="男" checked="checked">男
  37.         <input type="radio" name="xb" value="女">女
  38.         <input type="button" id="btn2" name="" value="btn2" onclick="show2()"><br>
  40.         <select name="yyyy" id="yyyy"></select>年
  41.         <select name="mm" id="mm"></select>月
  42.         <select name="dd" id="dd"></select>日
  43.     </form>
  44. </body>
  45. <script type="text/javascript">
  46.     //获取id为box的这个元素
  47.     var box = document.getElementById('box');
  48.     box.style.color = 'red';
  49.     box.style.fontWeight = 'bold';
  50.     console.log(box);
  51.     //获取页面中li
  52.     var lis = document.getElementsByTagName('li');
  53.     console.log(lis);
  54.     //获取id为list1下的所有li
  55.     var lis2 = document.getElementById('list1').getElementsByTagName('li');
  56.     for (var i=0;i<lis2.length;i++){
  57.         lis2[i].style.color = '#00f';
  58.         if (i==0){
  59.             lis2[i].style.backgroundColor = '#aaa';
  60.         } else if (i==1){
  61.             lis2[i].style.backgroundColor = '#bbb';
  62.         } else if (i==2){
  63.             lis2[i].style.backgroundColor = '#ccc';
  64.         }
  65.     }
  66.     console.log(lis2);
  68.     var lis3 = document.getElementById('list1').getElementsByTagName('li');
  69.     for (var i=0,len=lis3.length;i<len;i++){
  70.         console.log(lis3[i].innerHTML);
  71.         lis3[i].innerHTML = lis3[i].innerHTML + '111';
  72.         lis3[i].className = 'current';
  73.     }
  74.     console.log(document.getElementById('box').className);
  76.     var p = document.getElementById('text');
  77.     var user = document.getElementById('user');
  78.     console.log(p.id);//text
  79.     console.log(p.align);//text
  80.     console.log(p.className);//text
  81.     console.log(p.dataType);//text
  83.     console.log(p.getAttribute('data-type'));
  84.     console.log(p.getAttribute('class'));
  85.     console.log(p.getAttribute('id'));
  86.     console.log(p.getAttribute('align'));
  88.     console.log(user.value);
  89.     console.log(user.validate);
  91.     //给p设置data-color的属性
  92.     p.setAttribute('data-color','red');
  93.     //给input设置一个isRead的属性
  94.     user.setAttribute('isRead','false');
  95.     //删除p上的属性
  96.     p.removeAttribute('align');
  98.     //DOM控件部分
  99.     function show1(){
  100.         // alert('123455');
  101.         document.getElementById('userName').value='www.dodoke.com';
  102.     }
  104.     function show2(){
  105.         var xb = document.getElementsByName('xb');
  106.         // console.log(xb);  数组
  107.         var xbText;
  108.         if (xb[0].checked){
  109.             //判断是否被选中
  110.             xbText = xb[0].value;
  111.         } else {
  112.             xbText = xb[1].value;
  113.         }
  114.         alert(xbText);
  115.     }
  117.     //获取id=yyyy的表单控件
  118.     var yyyy = document.getElementById('yyyy');
  119.     var mm = document.getElementById('mm');
  120.     var dd = document.getElementById('dd');
  122.     //options表示表单需要添加的options
  123.     //Option表示具体添加的实际的option对象
  124.     //第一个i 表示具体添加的值
  125.     //第二个i 表示显示的名字
  126.     var date = new Date();
  127.     var year = parseInt(date.getFullYear());
  128.     initSelect(yyyy,1990,year);
  129.     initSelect(mm,1,12);
  130.     initSelect(dd,1,31);
  131.     //封装
  132.     function initSelect(obj,start,end){
  133.         for (var i=start;i<=end;i++){
  134.             obj.options.add(new Option(i,i));
  135.         }
  136.     }
  137. </script>
  138. </html>