JS DOM案例1

最新推荐文章于 2024-06-27 23:15:00 发布
最新推荐文章于 2024-06-27 23:15:00 发布
阅读量321 收藏 1
点赞数
分类专栏： JS进阶 文章标签： html5 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45776662/article/details/120254252
版权

JSDOM

JS DOM

这系列文章里记录的多半是案例，基础语法很少

获取元素

1. document.getElementById(id)
2. Document.getElementsByTagName()
3. Document.getElementsByClassName()
4. document.querySelector()
			//查找第一个匹配 class属性的html元素
			//这个例子中，会返回当前文档中第一个类名为 "myclass" 的元素：
			var el = document.querySelector(".myclass");
			var el = document.querySelector("#myclass");//通过id
			var el = document.querySelector("li");//标签
			
			//一个更复杂的选择器
			//选择器也可以非常强大，如以下示例所示.
			//这里, 一个class属性为"user-panel main"的div元素<div>(<div class="user-panel main">)内包含一个name属性为"login"的input元素<input> (<input name="login"/>) ，如何选择，如下所示:
			
			var el = document.querySelector("div.user-panel.main input[name='login']");
5.document.querySelectorAll()

事件与操作元素

常见事件触发函数

1. 改变元素内容
	区别
	element.innerText: 	不识别HTML标签, 去除空格和换行
		var div = document.querySelector('div')
		div.innerText = '测试'
	element.innerHTML：识别html，推荐，标准，保留空格和换行
		var div = document.querySelector('div')
		div.innerHTML = '<strong>测试</strong>' //可以识别
	可读写属性，获取属性内容
	console.log(div.innerText)
	console.log(div.innerHMTL)

2. 表单元素属性设置
	利用DOM可以操作如下表单元素属性：
	<button>按钮</button>
	<input type="text" value="请输入内容">
	<script>
	var btn = document.querySelector('button')
	var input = document.querySelector('input')
	btn.onclick = function (){
		input.value='点击切换了内容'
	  this.disabled=true // btn.disabled = true,this指向的是事件函数的调用者
	}



</script>

表单案例，显示隐藏密码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .box{
        position: relative;
        width: 400px;
        border-bottom: 1px solid #ccc;
        margin: 100px auto;
    }
    .box input {
        width: 370px;
        height: 30px;
        border: 0;
        outline: none;
    }
    .box img {
        position: absolute;
        top: 2px;
        right: 2px;
        width: 24px;
    }
  </style>
</head>

<body>
  <div class="box">
    <label>
      <img src="../images/eye.png" id="eye">
    </label>
    <input type="password" id="password">
  </div>
  <script>
    // 1.获取元素
    let eye = document.getElementById('eye')
    let pwd = document.getElementById('password')

    // 2.注册事件,处理程序
    let flag = 0
    eye.onclick = function () {
    	if (flag === 0) {
		    pwd.type = 'text'
		    eye.src = '../images/eye2.png'
        flag = 1
	    } else {
    		pwd.type = 'password'
		    eye.src = '../images/eye.png'
        flag = 0
      }
    }

  </script>
</body>
</html>

3. 操作元素样式

// 基本用法
div.onclick = function () {      	  
	this.style.backgroundColor = 'purple'
  this.style.width = '250px'
}
/***失去焦点、获得焦点 案例***/
	let txt = document.querySelector('input')
	txt.onfocus = function () {
		if (this.value === '手机') {
			this.value = ''
		}
		this.style.color='#333'
	}

	txt.onblur = function () {
		if (this.value === '') {
			this.value = '手机'
		}
		this.style.color='#999'
	}

案例：排它思想

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
var btns = document.getElementsByTagName('button')
for (let i = 0; i < btns.length; i++) {
  btns[i].onclick = function () {
	  for (let j = 0; j < btns.length; j++) {
      btns[j].style.backgroundColor = ''
	  }
	  this.style.backgroundColor = 'pink'
  }
}

案例：表格隔行变色

 <table>
    <thead>
      <tr>
        <th>代码</th>
        <th>名称</th>
        <th>最新公布净值</th>
        <th>累计净值</th>
        <th>前单位净值</th>
        <th>净值增长率</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>003256</td>
        <td>农银金穗3个月定期开发债券</td>
        <td>1.075</td>
        <td>1.079</td>
        <td>1.074</td>
        <td>+0.047%</td>
      </tr>
      <tr>
        <td>003256</td>
        <td>农银金穗3个月定期开发债券</td>
        <td>1.075</td>
        <td>1.079</td>
        <td>1.074</td>
        <td>+0.047%</td>
      </tr>
      <tr>
        <td>003256</td>
        <td>农银金穗3个月定期开发债券</td>
        <td>1.075</td>
        <td>1.079</td>
        <td>1.074</td>
        <td>+0.047%</td>
      </tr>
    </tbody>
  </table>
<script>
  //鼠标事件:onmouseover/onmouseout
  // 1.获取元素
  var trs = document.querySelector('tbody').querySelectorAll('tr')
  for (let i = 0; i < trs.length; i++) {
    trs[i].onmouseover = function() {
      this.className = 'bg'
    }
    trs[i].onmouseout = function () {
    	this.className = ''
    }
  }
</script>

案例：表单全选、取消全选

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

      .wrap {
          width: 300px;
          margin: 100px auto 0;
      }

      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 class="wrap">
  <table>
    <thead>
    <tr>
      <th>
        <input type="checkbox" id="j_cbAll"/>
      </th>
      <th>商品</th>
      <th>价钱</th>
    </tr>
    </thead>
    <tbody id="j_tb">
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>iphone8</td>
      <td>8000</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>ipad</td>
      <td>4000</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>mac</td>
      <td>9000</td>
    </tr>
    </tbody>
  </table>
</div>
<script>
	//  1. 全选,下面按钮跟着全选按钮即可
	// 获取元素
	let j_cbAll = document.getElementById('j_cbAll')
	let j_tbs = document.getElementById('j_tb').getElementsByTagName('input')
	// 全选按钮
	j_cbAll.onclick = function () {
		for (let i = 0; i < j_tbs.length; i++) {
			j_tbs[i].checked = this.checked
		}
	}
	for (let i = 0; i < j_tbs.length; i++) {
		j_tbs[i].onclick = function () {
			let flag = true
			for (let j = 0; j < j_tbs.length; j++) {
				if (!j_tbs[j].checked) {
					flag = false
					break
				}
			}
			j_cbAll.checked = flag
		}
	}
</script>
</body>
</html>

案例:tab切换

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

    li {
      list-style-type: none;
    }
    .tab {
        width: 978px;
        margin: 100px auto;
    }

    .tab_list {
        height: 39px;
        border: 1px solid #ccc;
        background-color: #f1f1f1;
    }
    .tab_list li {
        float: left;
        height: 39px;
        line-height: 39px;
        padding: 0 20px;
        text-align: center;
        cursor: pointer;
    }
    .tab_list .current {
        background-color: #c81623;
        color: #fff;
    }
    .item {
        display: none;
    }

  </style>

</head>
<body>
  <div class="tab">
    <div class="tab_list">
      <ul>
        <li class="current">商品介绍</li>
        <li>规格与包装</li>
        <li>售后保障</li>
        <li>商品评价(50000)</li>
        <li>手机社区</li>
      </ul>
    </div>
    <div class="tab_con">
      <div class="item" style="display: block">
        商品介绍模块内容
      </div>
      <div class="item">
        规格与包装模块内容
      </div>
      <div class="item">
        售后保障模块内容
      </div>
      <div class="item">
        商品评价模块内容
      </div>
      <div class="item">
        手机社区模块内容
      </div>
    </div>
  </div>
  <script type="text/javascript">
    // 1. 2个模块
    // 2. 上面选项卡排它思想
    //1.获取元素
    var lis = document.querySelector('.tab_list').querySelectorAll('li')
    var items = document.querySelectorAll('.item')
    for (let i = 0; i < lis.length; i++) {
    	// 2. 下面模块
      // 2.1给lis所有的li添加自定义属性,属性值从0开始编号
      lis[i].setAttribute('index',i)

      lis[i].onclick = function () {
      	var index = this.getAttribute('index')
	      for (let j = 0; j < items.length; j++) {
		      items[j].style.display = 'none'
	      }
	      items[index].style.display = 'block'
	      for (let j = 0; j < lis.length; j++) {
          lis[j].className = ''
	      }
	      lis[i].className = 'current'
      }
    }
  </script>
</body>
</html>
wjyGrit
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生JS学习 DOM （案例）
m0_64191440的博客
09-05 724
JavaScript 中将网页文档中的标签进行解释后，得到标签对应的节点对象，包含节点属性：nodeType，不同的节点属性值不同。1：这是一个标签对象2：这是一个属性对象3：这是一个文本对象.JavaScript 语法中通过节点数（ DOM树 ）
Javascript_Dom操作案例
01-10
Javascript_Dom操作案例 总结了一些javascript对DOM操作的案例，希望对大家有所帮助
javascript之DOM操作
ajwqb06628的专栏
12-25 2307
javascript之DOM操作 一、document.getElementById() 根据Id获取元素节点 <div id="div1"> <p id="p1"> 我是第一个...
JS（JavaScript）DOM操作的趣味案例
最新发布
分享式获得也是一种学习的态度
06-27 1259
每个人都有惰性，但不断学习是好好生活的根本，共勉！秋风清，秋月明，落叶聚还散，寒鸦栖复惊。相思相见知何日？此时此夜难为情！——《三五七言》
js_dom 之案例
weixin_33749242的博客
05-27 187
1、模拟微信聊天 2、瀑布流案例（小红书）---理解瀑布流原理： 绝对定位 + 最小高度 + 第一行and其他行 + left、 top 　　a、页面结构 　　　　 　　b、页面样式 　　　　 　　　　c、事件（js） 　　　　 　　　　 　　　　 　　　　 　　　　 　　　　第6步：滚动加载图片 　　　　 　　　　 ...
DOM 操作元素来改变元素里面的属性（黑马课程总结【侵删】）
qq_42024229的博客
10-08 1176
4. 操作元素 JavaScript 的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容 、属性等。注意以下都是属性 4.1 改变元素内容 element.innerText 从起始位置到终止位置的内容, 但它去除 html 标签， 同时空格和换行也会去掉 element.innerHTML 起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行 4.2 常用元素的属性操作 1. innerText、inn...
JavaScript dom操作 趣味案例
06-25
本资源为JavaScript的dom操作的趣味案例，可直接打开查看本资源为JavaScript的dom操作的趣味案例，可直接打开查看本资源为JavaScript的dom操作的趣味案例，可直接打开查看本资源为JavaScript的dom操作的趣味案例，可...
JavaScript-DOM实战案例
09-18
在这个"JavaScript-DOM实战案例"中，包含了两个主要的资源部分：`css`和`img`。 1. **CSS（Cascading Style Sheets）**： CSS是用于定义网页样式和布局的语言。在JavaScript中，我们可以通过DOM API来操作CSS样式...
JavaScript案例-js购物车
02-16
总的来说，"JavaScript案例-js购物车"是一个涵盖JavaScript基础、数组操作、对象处理、AJAX请求以及DOM操作的综合实例。通过实践这个案例，开发者可以更深入地理解和掌握JavaScript在实际项目中的应用。
JavaScript案例-js轮播图
02-16
在这个"JavaScript案例-js轮播图"中，我们将深入探讨如何使用纯JavaScript实现一个功能完善的轮播图效果。 首先，轮播图是网页设计中常见的元素，它允许展示一组图片或内容，并在用户交互或定时自动切换之间进行...
JS DOM编程
Y__J___的博客
10-25 342
获取文本框 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>DOM编程-获取文本框的value</title> </head> <body> <script type="text/javascript"&gt...
【JS】DOM案例1
weixin_45532220的博客
08-11 168
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!--<button type="button" onclick="judge(str)">click</button>--> </head> <body> <!--文档页面从上到下加载，所以要先有标签 script写在标签之下--> <!--get获得element元
【JavaScript】js基础-DOM（案例1）
你今天真好看呀
08-17 416
文章目录1. innerHTML属性2. 案例1：动态显示时间3. 案例2：全选练习4. 案例3：下拉列表左右选择 1. innerHTML属性 1.这个属性不是DOM的组成部分，但是是大多数浏览器都支持的属性 2.作用： 1.获取文本内容 2.向标签里面设置内容（可以是html代码） <!DOCTYPE html> <html lang="en"> <head...
js dom 例子
CobWeb
09-29 211
&lt;html&gt; &lt;head&gt; &lt;title&gt;js dom 动态生成option选项&lt;/title&gt; &lt;script type="text/javascript"&gt; function clearSelect() { var mySelect = document.getElementById('ah'); ...
js的dom案例:
gulanga5的博客
07-06 235
js的dom案例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div { border:#0099FF 2px solid;height:20px;width:350px;margin:20px 10px;padding:5px 7px;line-height:20px;f
JS学习之DOM及案例
huangql517的博客
05-28 2003
1&gt;DOM简介    当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model，简称DOM）。    即当浏览器载入HTML文档时, 它就会成为DOM对象，而在JS中，所有的事物都是节点，    元素、文本等都是节点。可以通过节点进行DOM对象的增删改查。    既然HTML在被浏览器加载时会对应的生成DOM对象，而JS又可以通过节点来操作DOM，所以，JS...
初级JS-DOM小案例
欢迎
03-24 386
初级JS---实现表格的添加和删除
JavaScript|DOM初步(含各种小案例)
执念斩长河
05-22 1180
DOM全称是：Document Object Model(文档对象模型)是浏览器提供给JavaScript使用的操作HTML和CSS的接口。js通过DOM操作HTML和CSS。DOM不是一个新的语言，本质上他就是给js提供一些新的对象和方法而已。js、DOM、HTML和CSS的关系是(如一座敲梁一般)：
随便写一个JS DOM案例
03-25
当然可以，以下是一个非常简单的 JavaScript DOM 案例： <!DOCTYPE html> <title>JavaScript DOM Example <h1>JavaScript DOM Example <p id="demo">This is some text. //获取 id 为 demo 的 p ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值