Javascript BOM与DOM

location对象

location.href  获取URL
location.href="www.baidu.com" // 跳转到指定页面
location.reload() 重新加载页面

计时事件

setTimeout()

语法：

var t=setTimeout("JS语句",毫秒)　　　　//js语句最好调用一个function
function foo(){
　　console.log("hehe");
}
var t = setTimeout(foo,3000);//3s执行foo函数，

 

 

clearTimeout()

语法：

clearTimeout(setTimeout_variable)

一般用第一种比较好；

setTimeout 设置一个定时事件后，将值传给t，每个事件有个序号，方便用clearTimeout来删除事件

setInterval()

 

语法

按周期循环触发某个事件

setInterval("JS语句",时间间隔)

clearInterval()

clearInterval(setinterval返回的ID值)

function foo(){
  console.log("heheh");  
}
function foo2(){
  console.log("123");  
}
var t1 = setInterval(foo,1000);
var t2 = setInterval(foo2,1000);
clearInterval(t1);

 

 

 

 

 查找标签：

直接查找

document.getElementById           根据ID获取一个标签
document.getElementsByClassName   根据class属性获取
document.getElementsByTagName     根据标签名获取标签合集

间接查找

parentElement            父节点标签元素
children                 所有子标签
firstElementChild        第一个子标签元素
lastElementChild         最后一个子标签元素
nextElementSibling       下一个兄弟标签元素
previousElementSibling   上一个兄弟标签元素

创捷一个标签：

document.creatElement("标签名");（必记**********）

具体流程：

1 创建一个节点，

2 定位标签

3 在定位的标签中进行添加

 

可以删除节点：

somenode.removeChild(要删除的节点)//删除标签内部节点

替换节点

somenode.replaceChild(newnode, 某个节点);

设置已近定位了的节点的值：

var divEle = document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="<p>2</p>"

innerHTML与innerText区别是：

innerHTML可以直接在定位的标签的位置上创建标签与内容，而innerText只能添加内容（*************必记）

 

 对标签的属性进行设置

语法：

elementNode.value

适用于以下标签：

• .input   
• .select
• .textarea 

 

class操作

className  获取所有样式类名(字符串)

classList.remove(cls)  删除指定类
classList.add(cls)  添加类
classList.contains(cls)  存在返回true，否则返回false
classList.toggle(cls)  存在就删除，否则添加

 

常用事件

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               // 练习：输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。

onselect      在文本框中的文本被选中时发生。
onsubmit      确认按钮被点击，使用的对象是form。

 

参考博客：

https://www.cnblogs.com/liwenzhou/p/8011504.html