JavaScriptDOM文档对象

  DOM document object model(文档对象模型)

  ------------------------------------------------

  |-DOM基础对象:

    1.document

    2.document.documentELement

    3.document.head

    4.document.title

    5.document.body

  |-获取元素对象方法:

    1.document.gatElementById()

    2.document.gatElementsByTagName()

    3.document.gatElementsByClassName()

    4.document.gatElementsByName()

  |-获取元素对象标准属性:

    1)obj.id;

    2)obj.className;

    3)obj.style;

    4)obj.title;

  |-获取元素对象非标准属性:(undefined)

    1)obj.username;

    2)obj.sex;

    3)obj.age;

  |-统一的方法来获取标准或非标准属性:

    1.获取:

      obj.getAttribute('age');

    2.设置:

      obj.setAttribute('age','20');

  |-元素对象js属性:

    1)obj.tagName;      //获取标签名称

    2)obj.innerHTML;    //设置或获取标签内部的值

    3)obj.outerHTML;    //获取标签外部的值

    4)obj.textContent;  //获取标签内部的文本内容

  |-遍历集合对象设置事件:

    1)obj[i]

    2)this


  |-DOM元素对象的6个实例:

  1)移入移出特效

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>元素移入移出特效</title>
</head>
<body>
  <h1>1</h1>
  <h1>2</h1>
  <h1>3</h1>
  <h1>4</h1>
  <h1>5</h1>
  <h1>6</h1>
  <h1>7</h1>
  <h1>8</h1>
  <h1>9</h1>
  <h1>10</h1> 
</body>
<script>
  //获取h1元素对象
  h1obj=document.getElementsByTagName('h1');
  for (var i = 0; i < h1obj.length; i++) {
    //当鼠标移入h1标签,让当前h1改变颜色
    h1obj[i].onmouseenter=function(){
      this.style.background="#faa";
    };
    //当鼠标移出h1标签,让当前h1改变颜色
    h1obj[i].onmouseleave=function(){
      this.style.background='';
    }
  };
</script>
</html>

  2)循环点击变色

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>循环点击特效</title>
</head>
<body>
  <h1>1</h1>
  <h1>2</h1>
  <h1>3</h1>
  <h1>4</h1>
  <h1>5</h1>
  <h1>6</h1>
  <h1>7</h1>
  <h1>8</h1>
  <h1>9</h1>
  <h1>10</h1> 
</body>
<script>
  //获取h1元素对象
  h1obj=document.getElementsByTagName('h1');
  //遍历每个h1标签
  for (var i = 0; i < h1obj.length; i++) {
    //自定义一个属性便于操作循环点击
    h1obj[i].setAttribute('s','0');
    h1obj[i].onclick=function(){
      //获取自定义属性值
      s=parseInt(this.getAttribute('s'));
      if (s%2==0) {
        this.style.background='#999';
      }else{
        this.style.background='';
      };
      //重新设值赋值给自定义属性
      this.setAttribute('s',s+1);
    }
  };
</script>
</html>

3)点击换行号

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>点击换行号</title>
</head>
<body>
  <h1>aaaaaaa</h1>
  <h1>bbbbbbb</h1>
  <h1>ccccccc</h1>
  <h1>ddddddd</h1>
</body>
<script>
  //获取h1元素对象
  h1obj=document.getElementsByTagName('h1');
  //遍历每个h1标签
  for (var i = 0; i < h1obj.length; i++) {
    h1obj[i].setAttribute('s',i+1);
    h1obj[i].onclick=function(){
      //获取自定义属性值
      s=this.getAttribute('s');
      this.innerHTML=s;
    }
  };
</script>
</html>

4)点击标签切换内容

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>点击标题切换内容</title>
</head>
<style>
  *{
    font-family: "微软雅黑";
  }
  h1{
    background: #aaf;
  }
</style>
<body>
  <h1>HTML5技术</h1>
  <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
  <h1>java技术</h1>
  <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
  <h1>php技术</h1>
  <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
  <h1>ajax技术</h1>
  <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
  <h1>Mysql技术</h1>
  <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
</body>
<script>
  h1s=document.getElementsByTagName('h1');
  ps=document.getElementsByTagName('p');
  for (var i = 0; i < h1s.length; i++) {
    h1s[i].setAttribute('i',0);
    h1s[i].setAttribute('s',i);
    ps[i].setAttribute('id','p'+i);
    h1s[i].onclick=function(){
      s=this.getAttribute("s");
      pobj=document.getElementById('p'+s);
      i=parseInt(this.getAttribute('i'));
      if (i%2==0) {
        pobj.style.display='none';
      }else{
        pobj.style.display='block';
      };
      this.setAttribute('i',i+1);
    }
  };
</script>
</html>


5)多选、反选和全不选

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>全选、反选和全不选</title>
</head>
<body>
  <input type="button"value='全选' id='but1' >
  <input type="button" value='反选'id='but2'>
  <input type="button" value='全不选' id='but3'>
  <form action="" id='form1'>
    <p><label for=""><input type="checkbox"> linux</label></p>
    <p><label for=""><input type="checkbox"> php</label></p>
    <p><label for=""><input type="checkbox"> java</label></p>
    <p><label for=""><input type="checkbox"> javascript</label></p>
    <p><label for=""><input type="checkbox"> css</label></p>
    <p><label for=""><input type="checkbox"> html5</label></p>
    <p><label for=""><input type="checkbox"> jquery</label></p>
  </form>
</body>
<script>
  bt1=document.getElementById('but1');
  bt2=document.getElementById('but2');
  bt3=document.getElementById('but3');
  chks=document.getElementsByClassName('chk');
  //全选
  bt1.onclick=function(){
    for (var i = 0; i < chks.length; i++) {
      chks[i].checked=true;
    };
  }
  //反选
  bt2.onclick=function(){
    for (var i = 0; i < chks.length; i++) {
      chks[i].checked=!chks[i].checked;
    };
  }
  //全不选
  bt3.onclick=function(){
    for (var i = 0; i < chks.length; i++) {
      chks[i].checked=false;
    };
  }
</script>
</html>


6)选水果

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>选水果</title>
</head>
<style>
  *{font-family: 微软雅黑;}
  select{height: 150px; width:100px;}
</style>
<body>
  <p>选择你爱吃的水果</p>
  <form action="">
    <select name="" id="s1" size="2">
      <option value="">苹果</option>
      <option value="">香蕉</option>
      <option value="">梨</option>
      <option value="">西瓜</option>
      <option value="">桔子</option>
      <option value="">北瓜</option>
    </select>
    <input type="button" id='but' value='>>'>
    <select name="" id="s2" size="2"></select>
  </form>
</body>
<script>
  s1obj=document.getElementById('s1');
  s2obj=document.getElementById('s2');
  btn=document.getElementById('but');
  btn.onclick=function(){
    idx=s1obj.selectedIndex;
    opts=s1obj.options;
    opt=opts[idx]; 
    s2obj.add(opt);
  }
</script>
</html>


注意:此文章是站长从千万篇中精心挑选的,请认真对待文章内容。站长提供不易,请动动小手分享一下!如有问题请联系站长,QQ号:1787511717(同微信),邮箱号:1787511717@qq.com,以上内容由沙漏博客的作者颜浩发布到技术学习专栏!
本文章最后修改时间为:2019-01-21 13:59!

内容版权声明:文章由沙漏博客_分享提供!

转载注明出处:https://www.58yanhao.com/a/227.html

分享到:
打赏

觉得本站还不错就打赏一下吧!

支付宝扫一扫打赏

微信扫一扫打赏