DOM对象-对元素进行操作

于 2019-07-21 21:23:42 发布
阅读量304 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yyy_wj/article/details/96757162
版权

属性操作

非表单元素的属性

href、title、id、src、className

var link = document.getElementById('link');
console.log(link.href);
console.log(link.title);

var pic = document.getElementById('pic');
console.log(pic.src)

案例

  • 点击按钮显示隐藏div
  <style>
    div {
      width: 300px;
      height: 200px;
      background-color: yellow;
      border: 2px solid red;
    }

    .cls {
      display: none;
    }
  </style>
</head>
<body>
<input type="button" value="隐藏" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
  //点击按钮,通过类样式的方式设置div的显示和隐藏
  my$("btn").onclick = function () {
    // console.log(my$("dv").className);

    //判断的是div是否应用了类样式
    if (my$("dv").className != "cls") {
      //现在是显示的,应该隐藏
      my$("dv").className = "cls";
      this.value = "显示";
    } else {
      //隐藏的状态----立刻显示
      my$("dv").className = "";
      this.value = "隐藏";
    }
  };
</script>

</body>
  • 点击按钮切换大图
<body>
<input type="button" value="显示大图" id="btn"/>
<img src="images/1-small.jpg" alt="" id="im">
<script>
  function my$(id) {
    return document.getElementById(id);
  }


  my$("btn").onclick=function () {
      my$("im").src="images/1.jpg";
  };
</script>

</body>

表单元素属性

  • value 用于大部分表单元素的内容获取(option除外)

  • type 可以获取input标签的类型(输入框或复选框等)

  • disabled 禁用属性

  • checked 复选框选中属性

  • selected 下拉菜单选中属性

案例

  • 点击按钮修改p标签中的内容
	<input type="button" value="点击我可以修改p标签里面的内容" id="btn">
	<p id="p1">现在的我在学习js</p>

	<script type="text/javascript">
		document.getElementById("btn").onclick=function () {
			document.getElementById("p1").innerText="以后还要学jQuery";
		};
	</script>
  • 禁用文本框
<body>
<input type="button" value="禁用文本框" id="btn"/>
<input type="text" value="文本框" id="txt"/>
<script>
  //先根据id获取按钮,为按钮注册点击事件,添加事件处理函数
  document.getElementById("btn").onclick=function () {
      //根据id获取文本框,设置disabled属性
    document.getElementById("txt").disabled=true;
  };
</script>

</body>
  • 搜索文本框
  <style>
    input {
      color: gray;
    }
  </style>
</head>
<body>
<input type="text" value="请输入搜索内容" id="txt"/>
<script src="common.js"></script>
<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";
    }

  };
  • 验证文本密码框的长度
<body>
<input type="text" value="" id="txt"/>
<script src="common.js"></script>
<script>

  //获取文本框
  my$("txt").onblur=function () {
    //判断密码的长度
    if(this.value.length>=6&&this.value.length<=10){
      this.style.backgroundColor="red";
    }else{
      this.style.backgroundColor="green";
    }
  };
</script>
</body>
  • 设置下拉框中的选中项
<body>
	<input type="button" value="选择菜单" id="btn">
	<select id="se" name="">
		<option value="1">红烧鱼</option>
		<option value="2">猪脚</option>
		<option value="3" id="soop">三鲜汤</option>
		<option value="4">拌饭</option>
		<option value="5">西兰花</option>
	</select>
<script type="text/javascript">
	function my$(id) {
		return document.getElementById(id);
	}
	my$("btn").onclick=function () {
		my$("soop").selected=true;
	};
</script>
</body>
  • 全选反选
 <style>
    * {
      padding: 0;
      margin: 0;
    }

    #wrap {
      width: 300px;
      margin: 100px auto ;
    }

    table {
      border-collapse: collapse;
      border-spacing: 0;
      border: 1px solid #c0c0c0;
      width: 300px;
    }

    th,
    td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
    }

    th {
      background-color: #09c;
      font: bold 16px "微软雅黑";
      color: #fff;
    }

    td {
      font: 14px "微软雅黑";
    }

    tbody tr {
      background-color: #f0f0f0;
    }

    tbody tr:hover {
      cursor: pointer;
      background-color: #fafafa;
    }
</style>
</head>
<body>
  <div id="wrap">
	<table>
		<thead>
			<th>  <input type="checkbox" id="j_cbAll"/></th>
			<th>菜名</th>
			<th>价钱</th>
		</thead>
		<tbody id="j_tb">
		    <tr>
		      <td>
		        <input type="checkbox"/>
		      </td>
		      <td>红烧肉</td>
		      <td>田老师</td>
		    </tr>
		    <tr>
		      <td>
		        <input type="checkbox"/>
		      </td>
		      <td>西红柿鸡蛋</td>
		      <td>田老师</td>
		    </tr>
		    <tr>
		      <td>
		        <input type="checkbox"/>
		      </td>
		      <td>西兰花</td>
		      <td>田老师</td>
		    </tr>
		    <tr>
		      <td>
		        <input type="checkbox"/>
		      </td>
		      <td>清蒸鱼</td>
		      <td>田老师</td>
		    </tr>

		    </tbody>

	 </table>
	</div>
<script type="text/javascript">
	var j_cbAll=document.getElementById("j_cbAll");
	var j_tb=document.getElementById("j_tb");
	var check=j_tb.getElementsByTagName("input");
	j_cbAll.onclick=function () {
		for (var i = 0; i < check.length; i++) {
			check[i].checked=this.checked;
		}
	};


	//获取tbody中所有的复选框，分别注册点击事件
	for (var i = 0; i < check.length; i++) {
		check[i].onclick=function () {
			var flag=true;  //默认都是被选中的
			//判断是否所有的复选框都选中
		for (var j = 0; j < check.length; j++) {
			if (!check[j].checked) {
				//没选中就进来了
				flag=false;
				break;
			}
		}
		 j_cbAll.checked=flag;
		};
	}
</script>
</body>

自定义属性操作

  • getAttribute() 获取标签行内属性

  • setAttribute() 设置标签行内属性

  • removeAttribute() 移除标签行内属性

  • 与element.属性的区别: 上述三个方法用于获取任意的行内属性。

案例

  • 自定义属性的引入
  <style>
    ul{
      list-style-type: none;
      cursor: pointer;
    }
  </style>
</head>
<body>
<ul id="uu">
  <li score="10">助教的数学成绩</li>
  <li score="20">班主任的成绩</li>
  <li score="30">小苏的成绩</li>
  <li score="40">小杰老师成绩</li>
  <li score="50">乔峰成绩</li>
</ul>
<script src="common.js"></script>
<script>

  //html标签中有没有什么自带的属性可以存储成绩的----没有
  //本身html标签没有这个属性,自己(程序员)添加的,----自定义属性---为了存储一些数据

  //在html标签中添加的自定义属性,如果想要获取这个属性的值,需要使用getAttribute("自定义属性的名字")才能获取这个属性的值

  //获取所有的li标签
  var list=document.getElementsByTagName("li");
  for(var i=0;i<list.length;i++){
    list[i].onclick=function () {
        //alert(this.score);//不能
      //可以
      alert(this.getAttribute("score"));
    };
  }
</script>
  • 自定义属性和获取
  <style>
    ul{
      list-style-type: none;
      cursor: pointer;
    }
  </style>
</head>
<body>
<ul id="uu">
  <li>助教的数学成绩</li>
  <li>班主任的成绩</li>
  <li>小苏的成绩</li>
  <li>小杰老师成绩</li>
  <li>乔峰成绩</li>
</ul>
<script src="common.js"></script>
<script>

  //总结:设置自定义属性:setAttribute("属性的名字","属性的值");
  //获取自定义属性的值:getAttribute("属性的名字")

   //获取所有的li标签,然后为每个标签中动态的添加自定义属性和值
  //点击的时候获取该标签的自定义属性的值

   //根据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"));
    };
  }



</script>

</body>
  • 移除某个元素的自定义属性
  <style>
    div{
      width: 200px;
      height: 100px;
      background-color: yellow;
    }
    .cls{
      background-color: green;
    }
  </style>
</head>
<body>
<input type="button" value="移除自定义属性" id="btn"/>
<div id="dv" score="10" class="cls"></div>
<script src="common.js"></script>
<script>

  //移除自定义属性:removeAttribute("属性的名字")

  //点击按钮移除元素的自定义属性
  my$("btn").onclick=function () {
    //my$("dv").removeAttribute("score");
    //移除元素的类样式
    //值没有了,但是属性还是有的
    //my$("dv").className="";
    //也可以移除元素的自带的属性
    my$("dv").removeAttribute("class");
  };


</script>
</body>
  • tab切换案例
  <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>

样式操作

使用style方式设置的样式显示在标签行内

var box = document.getElementById('box');
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = 'red';

注意：通过样式属性设置宽高、位置的属性类型是字符串，需要加上px

案例

  • 点击按钮隔行变色
<body>
<input type="button" value="隔行变色" id="btn"/>
<ul id="uu">
  <li>红旗</li>
  <li>五菱宏光</li>
  <li>奔驰</li>
  <li>兰博基尼</li>
  <li>哈弗</li>
  <li>奥拓</li>
  <li>奥迪</li>
  <li>悍马</li>
</ul>


<script src="common.js"></script>
<script>

  //奇红偶黄
  //点击按钮
  //  my$("btn").onclick=function () {
  //      //获取所有的li标签
  //    var list=my$("uu").getElementsByTagName("li");
  //    for(var i=0;i<list.length;i++){
  //      if(i%2==0){
  //        //偶数
  //        list[i].style.backgroundColor="red";
  //      }else{
  //        //奇数
  //        list[i].style.backgroundColor="yellow";
  //      }
  //    }
  //  };


  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>

</body>
  • 列表高亮显示
  <style>
    ul {
      list-style-type: none;
      cursor: pointer;
    }
  </style>
</head>
<body>
<ul>
  <li>金士百</li>
  <li>雪花</li>
  <li>百威</li>
  <li>燕京</li>
  <li>青岛</li>
  <li>崂山</li>
  <li>珠江</li>
  <li>华丹</li>
</ul>
<script src="common.js"></script>
<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>
</body>

类名操作

  • 修改标签的className属性相当于直接修改标签的类名

var box = document.getElementById('box');
box.className = 'clearfix';

案例

  • 二维码的显示与隐藏
 <style>
    .nodeSmall {
      width: 50px;
      height: 50px;
      background: url(images/bgs.png) no-repeat -159px -51px;
      position: fixed;
      right: 10px;
      top: 40%;
    }
    .erweima {
      position: absolute;
      top: 0;
      left: -150px;
    }
    .nodeSmall a {
      display: block;
      width: 50px;
      height: 50px;
    }
    .hide {
      display: none;
    }

    .show {
      display: block;
    }
  </style>


</head>
<body>
<div class="nodeSmall" id="node_small">
  <a href="#"></a><!--锚定-->
  <div class="erweima hide" id="er">
    <img src="images/456.png" alt=""/>
  </div>
</div>
<script src="common.js"></script>
<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>


</body>

 

yyy_wj
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值