//设置任意的标签中间的任意文本内容
  function setInnerText(element,text) {
    //判断浏览器是否支持这个属性
    if(typeof element.textContent =="undefined"){//不支持
      element.innerText=text;
    }else{//支持这个属性
      element.textContent=text;
    }
  }

  //获取任意标签中间的文本内容
  function getInnerText(element) {
    if(typeof element.textContent=="undefined"){
     return element.innerText;
    }else{
      return element.textContent;
    }
  }

  //测试

  my$("btn").onclick=function () {
    //console.log(getInnerText(my$("dv")));
    setInnerText(my$("dv"),"哈哈,我又变帅了");
  };

5.设置、获取、移除自定义属性的值:

setAttribute("属性的名字","属性的值");
getAttribute("属性的名字");
removeAttribute("属性的名字");//移除元素的类样式
//值没有了,但是属性还是有的 //my$("dv").className="";
//也可以移除元素的自带的属性// my$("dv").removeAttribute("class");

代码：

1.阻止超链接跳转

</script>
<a href="http://www.baidu.com" id="ak">百度</a>
<script>
  document.getElementById("ak").onclick=function () {
    alert("嘎嘎");
    return false;
  };
</script>

2.相册

<script>
  //点击a标签,把a标签中的href的属性值给id为image的src属性
  //把a的title属性的值给id为des的p标签赋值
  //从ul中标签获取获取所有的a标签
  var aObjs=my$("imagegallery").getElementsByTagName("a");
  //循环遍历所有的a标签
  for(var i=0;i<aObjs.length;i++){
    //为每个a标签注册点击事件
    aObjs[i].onclick=function () {
      //为id为image的标签的src赋值
      my$("image").src=this.href;
      //为p标签赋值
      my$("des").innerText=this.title;
      //阻止超链接默认的跳转
      return false;
    };
  }
</script>

3.隔行换色

<script>
  my$("btn").onclick = function () {
    //获取所有的li标签
    var list = my$("uu").getElementsByTagName("li");
    for (var i = 0; i < list.length; i++) {
      list[i].style.backgroundColor = i % 2 == 0 ? "red" : "yellow";
    }
  };

</script>

4.列表高亮显示

<script>
  //鼠标进入和鼠标离开两个事件
  //获取所有的li标签
  var list = document.getElementsByTagName("li");
  for (var i = 0; i < list.length; i++) {
    //为li注册鼠标进入事件
    list[i].onmouseover = function () {
      this.style.backgroundColor = "yellow";
    };
    //为li注册鼠标离开事件
    list[i].onmouseout = function () {
      //恢复到这个标签默认的颜色
      this.style.backgroundColor = "";
    };

  }

</script>

5.显示和隐藏二维码

<script>
  //获取鼠标要进入的a标签

  //先获取最外面的div
  var aObj=my$("node_small").getElementsByTagName("a")[0];
  //为a注册鼠标进入
  aObj.onmouseover=function () {
    my$("er").className="erweima show";
  };
  //为a注册鼠标离开
  aObj.onmouseout=function () {
    my$("er").className="erweima hide";
  };
</script>

6.div高亮显示

<script>
  //获取所有的
  //div
  var dvObjs=document.getElementsByTagName("div");
  for(var i=0;i<dvObjs.length;i++){
    //为每个div添加鼠标进入的事件
    dvObjs[i].onmouseover=function () {
      this.style.border="2px solid red";
    };
    //为每个div添加鼠标离开的事件
    dvObjs[i].onmouseout=function () {
      this.style.border="";
    };
  }
</script>

7.模拟搜索框

<script>

  //获取文本框

  //注册获取焦点的事件
  my$("txt").onfocus = function () {
    //判断文本框的内容是不是默认的内容
    if (this.value == "请输入搜索内容") {
      this.value = "";//清空文本框
      this.style.color = "black";
    }
  };

  //注册失去焦点的事件
  my$("txt").onblur = function () {
//    if (this.value == "") {
//      this.value = "请输入搜索内容";
//      this.style.color = "gray";
//    }

    if (this.value.length == 0) {
      this.value = "请输入搜索内容";
      this.style.color = "gray";
    }

  };


</script>

8.获取文本框的值

<script>

  my$("btn").onclick=function () {
      console.log(document.getElementsByTagName("p")[0].innerText);
  };

</script>

9.自定义属性的设置和获取

 //根据id获取ul标签,并且或者该标签中所有的li
  var list=my$("uu").getElementsByTagName("li");
  //循环遍历
  for(var i=0;i<list.length;i++){
    //先为每个li添加自定义属性
    //list[i].score=(i+1)*10;//此方式,自定义属性在DOM对象上,不在标签中
    list[i].setAttribute("score",(i+1)*10);
    //点击每个li标签,显示对应的自定义属性值
    list[i].onclick=function(){
      alert(this.getAttribute("score"));
    };
  }

10.tap键切换

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style-type: none;
    }

    .box {
      width: 400px;
      height: 300px;
      border: 1px solid #ccc;
      margin: 100px auto;
      overflow: hidden;
    }

    .hd {
      height: 45px;
    }

    .hd span {
      display: inline-block;
      width: 90px;
      background-color: pink;
      line-height: 45px;
      text-align: center;
      cursor: pointer;
    }

    .hd span.current {
      background-color: purple;
    }

    .bd li {
      height: 255px;
      background-color: purple;
      display: none;
    }

    .bd li.current {
      display: block;
    }
  </style>

</head>
<body>
<div class="box" id="box">
  <div class="hd">
    <span class="current">体育</span>
    <span>娱乐</span>
    <span>新闻</span>
    <span>综合</span>
  </div>
  <div class="bd">
    <ul>
      <li class="current">我是体育模块</li>
      <li>我是娱乐模块</li>
      <li>我是新闻模块</li>
      <li>我是综合模块</li>
    </ul>
  </div>
</div>
<script src="common.js"></script>
<script>

  //获取最外面的div
  var box=my$("box");
  //获取的是里面的第一个div
  var hd=box.getElementsByTagName("div")[0];
  //获取的是里面的第二个div
  var bd=box.getElementsByTagName("div")[1];
  //获取所有的li标签
  var list=bd.getElementsByTagName("li");//=================================
  //获取所有的span标签
  var spans=hd.getElementsByTagName("span");
  //循环遍历的方式,添加点击事件
  for(var i=0;i<spans.length;i++){
    //在点击之前就把索引保存在span标签中
    spans[i].setAttribute("index",i);//================================
    spans[i].onclick=function () {
      //第一件事,所有的span的类样式全部移除
      for(var j=0;j<spans.length;j++){
        spans[j].removeAttribute("class");
      }

      //第二件事,当前被点击的span应用类样式
      this.className="current";
      //span被点击的时候获取存储的索引值
      //alert(this.getAttribute("index"));
      var num=this.getAttribute("index");//==============================

      //获取所有的li标签,每个li标签先全部隐藏
      for(var k=0;k<list.length;k++){
        list[k].removeAttribute("class");
      }
      //当前被点击的span对应的li标签显示
      list[num].className="current";
    };
  }

</script>


</body>
</html>

JS中DOM操作（二）

Tips：

1.获取元素方式：

2.innerText和textContent的区别：

3.innerText和innerHTML的区别

4.浏览器兼容代码

5.设置、获取、移除自定义属性的值:

代码：

1.阻止超链接跳转

2.相册

3.隔行换色

4.列表高亮显示

5.显示和隐藏二维码

6.div高亮显示

7.模拟搜索框

8.获取文本框的值

9.自定义属性的设置和获取

10.tap键切换

猜你喜欢