<div>1111</div> <div>2222</div> <input type="text" value="张岩林"> <script> document.getElementsByClassName("zhang").innertext = 123; // 获取类名为zhang的标签并把内容改为123 document.getElementsByClassName("yan").innerHTML = 456; //获取类名为yan的标签并把内容改为456 document.getElementsByClassName("lin").value = "张岩林很帅"; //获取类名为lin的标签并把内容改为张岩林很帅 </script>
3、属性
attributes // 获取所有标签属性 setAttribute(key,value) // 设置标签属性 getAttribute(key) // 获取指定标签属性
通过自定义属性可以做一个全选，反选，取消选择的案例，代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <input type="button" value="全选"> <input type="button" value="取消"> <input type="button" value="反选"> </div> <div id = "i1"> <ul> <li><input type="checkbox" value="1">篮球</li> <li><input type="checkbox" value="2">足球</li> <li><input type="checkbox" value="3">排球</li> </ul> </div> <script> function Checkall() { var b = document.getElementsByClassName("c1"); for (var i = 0 ;i < b.length;i++){ var check = b[i]; check.checked = true } } function Cancleall() { var b = document.getElementsByClassName("c1"); for (var i = 0 ;i < b.length;i++){ var check = b[i]; check.checked = false } } function recvall() { var b = document.getElementsByClassName("c1"); for (var i = 0 ;i < b.length;i++){ var check = b[i]; if (check.checked){ check.checked = false }else { check.checked = true } } } </script> </body> </html> 全选、反选、取消案例
注：onclick是属于点击事件，后面会提到
4、class操作
className // 获取所有类名 classList.remove(cls) // 删除指定类 classList.add(cls) // 添加类
这个东西的用处很大，比如京东里面，当我们鼠标放到全部商品的时候，下面就出现好多商品，其商品是属于隐藏的，触发事件以后他才显示出来，其中间的操作就是定义了一个css隐藏属性，鼠标放上去后，移除CSS隐藏属性；鼠标移走又把隐藏属性给添加上去。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>隐藏</title> <style> .hide{ display: none; } </style> </head> <body> <span>放这上面有东西出来，不放东西又消失</span> <div id = "zhangyanlin">张岩林好帅</div> <script> function mouOver() { document.getElementById("zhangyanlin").classList.remove("hide"); } function mouOut() { document.getElementById("zhangyanlin").classList.add("hide"); } </script> </body> </html> 来个案例醒醒脑
5、标签操作
我们可以通过dom创建标签，添加到指定位置，下面给大家举两种方法来操作标签
// 方式一 var zhang = "<input type='text' />"; xxx.insertAdjacentHTML("beforeEnd",zhang); xxx.insertAdjacentElement('afterBegin',document.createElement('a')) //注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd' // 方式二 var tag = document.createElement('div') xxx.appendChild(tag) //往后追加一个div元素 xxx.insertBefore(tag,xxx[1]) //插到指定位置，可根据索引
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <div> <input type="text" /> <input type="button" value="添加" /> </div> <div> <ul> <li>alex</li> <li>eric</li> </ul> </div> </div> <script> function AddElement(ths) { // 获取输入的值 var val = ths.previousElementSibling.value; ths.previousElementSibling.value = ""; var commentList = document.getElementById('commentList'); //第一种形式，字符串方式 //var str = "<li>" + val + "</li>"; // 'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd' // beforeEnd内部最后 // beforeBegin 外部上边 //afterBegin 内部贴身 //afterEnd 外部贴墙 //commentList.insertAdjacentHTML("beforeEnd",str); //第二种方式，元素的方式 var tag = document.createElement('li'); tag.innerText = val; var temp = document.createElement('a'); temp.innerText = '百度'; temp.href = "http://etiantian.org"; tag.appendChild(temp); // commentList.appendChild(tag); commentList.insertBefore(tag,commentList.children[1]); } </script> </body> </html> 添加标签操作案例
6、样式操作