原生javascript操作DOM元素
2016-08-08 16:27
531 查看
<!DOCTYPE html> <html class="bg"> <head> <meta charset="UTF-8"> <title>使用原生js操作DOM</title> <style> *{margin:0;padding:0} html{font-size: 16px;color:#666;} .active{color:red} ul,li{list-style: none;display: block;line-height: 30px;} </style> </head> <body> <ul class="list"> <li class="first">list1</li> <li>list2</li> <li>list3</li> <li>list4</li> </ul> <ul class="list list2"> <li>list5</li> <li>list6</li> </ul> <button type="button" id="btn">I'am a button</button> <script> //ready函数 document.addEventListener("DOMContentLoaded",function(){ //获取dom节点 var li = document.querySelector("li"); //result:返回第一个li对象,等同于 $("li") var li_all = document.querySelectorAll(".list li"); //result: 返回.list下的所有li对象 //获取dom父节点 var list = document.querySelector("li").parentNode; //result:返回list对象 //获取dom的第N个子节点 注意,这里不能使用querySelectorAll var li_third = document.querySelector(".list").children[2].style.color = 'red'; //result:第一个.list 元素的第三个子节点文字颜色变成红色 //获取dom元素下的第一个子节点 (最后一个 lastElementChild) document.querySelector(".list").firstElementChild.style.fontSize = '20px'; //result:第一个.list 元素的第1个子节点字体大小变成20px //添加样式 var first = document.querySelector(".first"); first.className = "active"; //resule 将.first的class直接替换成active //注意 不替换之前的class,只是添加一个 注意空格 first.className += " active"; //删除样式 var ele = document.documentElement; removeClass(ele,"bg"); //result: class="bg" => class=" " //检查元素是否有某个样式 if(hasClass(ele,"bg")){ console.log("ele hasClass bg"); }else{ console.log("no"); } //result: no //html5 classList API 添加和移除样式 var body = document.querySelector("body"); body.classList.add("one"); body.classList.add("two"); body.classList.remove("two"); //给一个元素绑定事件 var btn = document.querySelector("#btn"); btn.addEventListener("click",function(){ alert("click btn!"); },false); //给多个元素绑定统一事件 var all_li = document.querySelectorAll("li"); [].forEach.call(all_li,function(el){ el.addEventListener("click",function(){ alert("click li!"); },false) },false); },false); /*** * 移除元素样式 * @param {Object} ele 元素 * @param {Object} cls 样式名称 */ function removeClass(ele,cls){ var reg = new RegExp("(s|^)" + cls + "(s|$)"); ele.className = ele.className.replace(reg," ").replace(/(^s*)|(s*$)/g,""); } /*** * 判断元素是否包含某个样式 * @param {Object} ele 元素 * @param {Object} cls 样式名称 */ function hasClass(ele,cls){ return ele.className && new RegExp("(s|^)" + cls + "(s|$)").test(ele.className); } </script> </body> </html>
相关文章推荐
- JavaScript DOM笔记:获取及操作元素
- 原生javascript操作class-元素查找-元素是否存在-添加class-移除class
- 整理JavaScript对DOM中各种类型的元素的常用操作
- Javascript操作DOM元素实现多段图决策问题
- 04——javascript Dom 动态创建元素 操作样式
- JavaScript DOM笔记:获取及操作元素
- javascript的DOM操作获取元素
- 整理JavaScript对DOM中各种类型的元素的常用操作
- JavaScript操作DOM元素
- Javascript操作DOM元素
- 原生Javascript操作DOM的一些常用方法集合
- 原生JavaScript操作DOM
- 原生Javascript解析HTML(非DOM操作)
- JavaScript操作DOM节点元素重排
- JavaScript DOM笔记:获取及操作元素
- 【面试必备】javascript操作DOM元素
- 使用JavaScript操作DOM节点元素的常用方法(创建/删除/替换/复制等)
- javascript操作DOM元素
- JavaScript常见原生DOM操作API总结
- JavaScript中操作有些DOM时关于文本节点和元素节点的问题。