相对于JavaScript_基础来说.我觉得这篇的东西才是重要的!
1.查找
或者说获得HTML元素.
1.通过ID查找
document.getElementById("HTML元素ID");2.通过标签查找
document.getElementByTagName("标签名");3.通过类名查找
document.getElementByClassName("class名");2.改变
1.改变HTML输出流
document.write("你好鸭");
2.改变HTML内容(例子是文本)
document.getElementById("ID").innerHTML = "内容";3.改变HTML属性(例子是img):
document.getElementById("ID").src("路径");4.改变HTML样式
document.getElementById("ID").style.color="red";document.getElementById("ID").style.visibility="hidden";3.事件
如何使用?
<h1 οnclick="this.innerHTML='Ooops!'">点击文本!</h1>当然,οnclick="JS函数",也是可以的.
1.点击事件:onclick
2.网页加载:onload,body标签有这个事件,处理cookie
3.离开网页:onunload,处理cookie
4.改变内容:onchange
5.鼠标进入/鼠标离开:onmouseover/onmouseout
6.onmousedown/onmouseup:鼠标左右键点击还未松开/鼠标左右键点击后释放.
注意鼠标点击事件的顺序为 onmousedown>>onmouseup>>onclick
4.EventListener
怎么用?
element.addEventListener("click", myFunction);
function myFunction() {
alert ("Hello World!");
}
element.removeEventListener("click", myFunction);4.1.addEventListener():
添加事件句柄.
特点:可以添加多个事件句柄,并且句柄可以为同类型的,可以向任何DOM对象添加,例如window,更简单的控制事件
4.1.1 添加多个事件句柄
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);4.1.2 同一事件添加不同类型的句柄
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);4.1.3 向window添加重置窗口时的事件句柄
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = Math.random();
});4.1.4 向事件句柄调用的有参函数传递参数
element.addEventListener("click", function(){ myFunction(p1, p2); });4.1.5 事件执行的顺序
例如,你的p有一个点击事件,p标签中有一个div标签,div也存在一个点击事件,然后先执行谁?
这时,我们就可以使用三个参数的addEventListener了
addEventListener(event, function, useCapture);其中的useCapture就是事件传递的两种方式:冒泡与捕获
什么是冒泡与捕获呢?
如果是冒泡的话,先内.如果是捕获的话,先外.
useCapture为false,即冒泡,也就是先内.
4.2.removeEventListener() 方法
移除事件句柄
element.removeEventListener("mousemove", myFunction);5.节点
5.1创建节点:加到尾部
5.1.1创建元素(其实就是创建标签P):createElement
var para = document.createElement("p");5.1.2创建文本节点:createTextNode
var node = document.createTextNode("这是一个新的段落。");5.1.3将文本节点加到元素中:appendChild
para.appendChild(node);5.1.4将创建的元素加到某个标签里
例如,我们存在一个Div id:div1
document.getElementById("div1").appendChild(para);这时候,我们就将创建的元素加入到了Div元素的最后
5.2创建节点:加到头部
insertBefore()
document.getElementById("div1").insertBefore(para);5.3移除元素:
注意!必须知道要移除元素的父元素,以下是简化的写法
var child = document.getElementById("p1");
child.parentNode.removeChild(child);5.4替换元素:
注意!必须知道要移除元素的父元素.
//新元素
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
//父元素
var parent = document.getElementById("div1");
//要被替换的元素
var child = document.getElementById("p1");
parent.replaceChild(para, child);6.集合
6.1 getElementsByTagName()
使用getElementsByTagName()返回一个HTMLCollection对象
类似于数组但不能用数组的一些方法
通过从0开始的索引获得元素
修改所有P元素的背景颜色
var myCollection = document.getElementsByTagName("p");
var i;
for (i = 0; i < myCollection.length; i++) {
myCollection[i].style.backgroundColor = "red";
}上面代码中,如果获取完myCollection后html页面存在变化,比如添加了p标签,则myCollection也会变化.
6.2 getElementsByClassName()
与上面的类似,但是上面的HTMLCollection存的可是HTML元素,而NodeList存的是文档节点
操作其实与上面的HTMLCollection差不多.
