BOM和DOM

一.BOM

　　1.location对象

　　　    　location.href　　　　　　获取当前url

　　　　location.href="xxx"　　　 设置当前url并跳转

　　　　location.reload()　　　　  刷新页面

　　2.计时相关

　　　　    setTimeout(js语句,毫秒)　　　　一段时间后做js语句

　　　　clearTimeout(t)　　　　　　　　清除设置的timeout变量t

　　　　setInterval(js语句,毫秒)　　　　 每个一段时间做js语句

　　　　clearInterval(t)　　　　　　　　清除设置的interval变量t

二.DOM

　　1.查找标签

　　  直接查找

　　　　document.getElementById()　　　　　   通过id获取标签

　　　　document.getElementsByClassName()　通过类名获取标签　

　　　　document.getElementsByTagName()　　通过标签名获取标签

　　  间接查找

　　　　.parentElement　　　　　　获取父级标签

　　　　.children　　　　　　　　　获取所有子级标签

　　　　.firstElementChild　　　　　获取第一个子级标签

　　　　.lastElementChild　　　　　获取最后一个子级标签

　　　　.nextElementSibling　　　　获取下一个兄弟标签

　　　　.previousElementSibling　　获取上一个兄弟标签

　　2.标签操作

　　  创建标签

　　　　document.createElement("div");

　　  添加标签

　　　　.appendChild(新标签)　　　　　　追加一个子级标签

　　　　.insertBefore(新标签,某标签)　　　把新节点插在某节点前面

　　  删除标签

　　　　.removeChild(标签)　　　　　　删除子级标签

　　  替换标签

　　　　.replaceChild(新标签,旧标签)　　用新标签替换旧标签

　　  标签属性

　　　　.innerText　　　　　　获取标签内所有标签的文本内容

　　　　.innerHTML　　　　　获取标签能所有内容,包括标签

　　　　.innerText=""　　　　  设置标签文本内容,不能识别文本标签

　　　　.innerHTML=""　　　　设置标签文本内容,能识别文本标签

　　　　.setAttribute("age","18")　　设置一个属性

　　　　.getAttribute("age")　　　　获取一个属性

　　　　.removeAttribute("age")　　 删除一个属性　　

　　　　.value　　　　　　　　　　获取标签的value值

　　  class标签操作

　　　　.classList.add(cls)　　　　　　添加类

　　　　.classList.remove(cls)　　　　  删除类

　　　　.classList.contains(cls)　　　　 判断是否包含类

　　　　.classList.toggle(cls)　　　　　切换类,存在删除,不存在添加

　　3.css样式操作

　　　　.style.width="100px"　　　　　　给标签设置样式

　　　　.style.marginTop="10px"　　　　给标签设置样式

　　4.事件

　　  常用事件:只支持单个事件,前面的会被后面的覆盖

　　　　onclick　　　　  鼠标点击触发

　　　　onfocus　　　　获得焦点时触发,常用于input,select,a

　　　　onblur　　　　　离开焦点时触发,和onfocus相反

　　  绑定事件:支持多个事件

divEle.onclick=function(){
    this.innerText = "呵呵";
}

//不推荐
<div id="d1" onclick="changeColor(this);">点我</div>  
<script>  
  function changeColor(ths) {  
    ths.style.backgroundColor="green";
  }
</script>