<!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>
