Dom:document。相当于把所有的html文件,转换成了文档对象。
之前说过:html-裸体的人;css-穿上衣服;js-让人动起来。
让人动起来,就得先找到他,再修改它内容或属性。
- 找到标签
- 操作标签
一、查找元素
1、直接查找
document.getElementById('i1') 根据ID获取一个元素 document.getElementsByTagName('div') 根据标签名获取标签集合 document.getElementsByClassName('div') 获取class多个元素(列表) document.getElementsByName 获取name多个元素(列表)
查找操作练习
<body> <div id="1">我是FGF</div> <a>FFFFFFFFF</a> <a>27272727272</a> <a>gggggggggggg</a> </body>
> document.getElementById('1') <div id="1">我是FGF</div> > document.getElementById('1').innerText "我是FGF" > document.getElementById('1').innerText = '新内容' "新内容" > document.getElementsByTagName('a') [a, a, a]0: aaccessKey: ""assignedSlot: nullattributes: NamedNodeMapbaseURI: "http://localhost:……" > document.getElementsByTagName('a')[1] <a>27272727272</a> > document.getElementsByTagName('a')[1].innerText = 666 666 > tags = document.getElementsByTagName('a') [a, a, a] > for(var i=0;i<tags.length;i++){tags[i].innerText=777;} 777
2、间接查找
parentNode // 父节点 childNodes // 所有子节点 firstChild // 第一个子节点 lastChild // 最后一个子节点 nextSibling // 下一个兄弟节点 previousSibling // 上一个兄弟节点 parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling // 下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素
二、操作标签
1、内容操作
标签.innerText 获取标签中的文本内容 标签.innerText = "" 对标签内部文本进行重新复制 outerText innerHTML HTML内容 innerHTML value 值
2、样式操作(更改css相关的选择器)
className tag.className='c1' 直接整体做操作 tag.classList.add('c2') 添加指定样式 tag.classList.remove('c2') 删除指定样式 PS:onclick点击操作 <div onclick='func();'>点我</div> <script> function func(){ } </script>
三、示例
1、示例之模态对话框(弹出框)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .c1{ position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: black; opacity: 0.6; z-index: 9; } .c2{ 500px; height: 400px; background-color: white; position: fixed; left: 50%; top: 50%; margin-left: -250px; margin-top: -200px; z-index: 10; } </style> </head> <body> <div> <input type="button" value="添加" onclick="ShowModel();" /> </div> <!--遮罩层开始--> <div id="i1" class="c1 hide" ></div> <!--遮罩层结束--> <!--弹出框(模态框)开始--> <div id="i2" class="c2 hide"> <p><input type="text" /></p> <p><input type="text" /></p> <p> <input type="button" value="取消" onclick="HideModel();" /> <input type="button" value="确定" onclick="HideModel();" /> </p> </div> <!--弹出框(模态框)结束--> <script> function ShowModel(){ document.getElementById('i1').classList.remove('hide'); document.getElementById('i2').classList.remove('hide'); } function HideModel(){ document.getElementById('i1').classList.add('hide'); document.getElementById('i2').classList.add('hide'); } </script> </body> </html>
2、示例之全选和反选以及取消
checkbox 获取值 checkbox对象.checked 设置值 checkbox对象.checked = true
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .c1{ position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: black; opacity: 0.6; z-index: 9; } .c2{ 500px; height: 400px; background-color: white; position: fixed; left: 50%; top: 50%; margin-left: -250px; margin-top: -200px; z-index: 10; } </style> </head> <body style="margin: 0;"> <div> <input type="button" value="添加" onclick="ShowModel();" /> <input type="button" value="全选" onclick="ChooseAll();" /> <input type="button" value="取消" onclick="CancleAll();" /> <input type="button" value="反选" onclick="ReverseAll();" /> <table> <thead> <tr> <th>选择</th> <th>主机名</th> <th>端口</th> </tr> </thead> <tbody id="tb"> <tr> <td> <input type="checkbox" /> </td> <td>1.1.1.1</td> <td>190</td> </tr> <tr> <td><input type="checkbox"f id="test" /></td> <td>1.1.1.2</td> <td>192</td> </tr> <tr> <td><input type="checkbox" /></td> <td>1.1.1.3</td> <td>193</td> </tr> </tbody> </table> </div> <!-- 遮罩层开始 --> <div id="i1" class="c1 hide"></div> <!-- 遮罩层结束 --> <!-- 弹出框开始 --> <div id="i2" class="c2 hide"> <p><input type="text" /></p> <p><input type="text" /></p> <p> <input type="button" value="取消" onclick="HideModel();"/> <input type="button" value="确定"/> </p> </div> <!-- 弹出框结束 --> <script> function ShowModel(){ document.getElementById('i1').classList.remove('hide'); document.getElementById('i2').classList.remove('hide'); } function HideModel(){ document.getElementById('i1').classList.add('hide'); document.getElementById('i2').classList.add('hide'); } function ChooseAll(){ var tbody = document.getElementById('tb'); // 获取所有的tr var tr_list = tbody.children; for(var i=0;i<tr_list.length;i++){ // 循环所有的tr,current_tr var current_tr = tr_list[i]; var checkbox = current_tr.children[0].children[0]; checkbox.checked = true; } } function CancleAll(){ var tbody = document.getElementById('tb'); // 获取所有的tr var tr_list = tbody.children; for(var i=0;i<tr_list.length;i++){ // 循环所有的tr,current_tr var current_tr = tr_list[i]; var checkbox = current_tr.children[0].children[0]; checkbox.checked = false; } } function ReverseAll(){ var tbody = document.getElementById('tb'); // 获取所有的tr var tr_list = tbody.children; for(var i=0;i<tr_list.length;i++){ // 循环所有的tr,current_tr var current_tr = tr_list[i]; var checkbox = current_tr.children[0].children[0]; if(checkbox.checked){checkbox.checked = false;}else{checkbox.checked = true;}}} </script> </body> </html>
3、示例之后台管理左侧菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .item .header{ height: 35px; background-color: #2459a2; color: white; line-height: 35px; } </style> </head> <body> <div style="height: 48px"></div> <div style=" 300px"> <div class="item"> <div id='i1' class="header" onclick="ChangeMenu('i1');">菜单1</div> <div class="content"> <div>内容1</div> <div>内容1</div> <div>内容1</div> </div> </div> <div class="item"> <div id='i2' class="header" onclick="ChangeMenu('i2');">菜单2</div> <div class="content hide"> <div>内容2</div> <div>内容2</div> <div>内容2</div> </div> </div> <div class="item"> <div id='i3' class="header" onclick="ChangeMenu('i3');">菜单3</div> <div class="content hide"> <div>内容3</div> <div>内容3</div> <div>内容3</div> </div> </div> <div class="item"> <div id='i4' class="header" onclick="ChangeMenu('i4');">菜单4</div> <div class="content hide"> <div>内容4</div> <div>内容4</div> <div>内容4</div> </div> </div> </div> <script> function ChangeMenu(nid){ var current_header = document.getElementById(nid); var item_list = current_header.parentElement.parentElement.children; for(var i=0;i<item_list.length;i++){ var current_item = item_list[i]; current_item.children[1].classList.add('hide'); } current_header.nextElementSibling.classList.remove('hide'); } </script> </body> </html>