DOM简介
HTML DOM(文档对象模型)
通过HTMl DOM,可访问JS文档的所有元素
当网页被加载时,浏览器创建页面的文档对象模型(Docement Object Model)
HTML DOM模型被构造为对象的树
通过可编程的对象模型,JS获得了足够的能力来创建动态的HTML,表现在JS能够改变页面中的所有HTML元素、HTML属性、CSS样式并对所有事件做出反应
那么如何查找HTML元素?
- 通过id查找HTML元素
var x = document.getElementById(“intro”); //没有找到返回null - 通过标签名查找HTML元素
var x = document.getElementsByTagName(“p”); //伪数组 - 通过类名找到HTML元素
var x = document.getElementsByClassName(“intro”); //伪数组 - 通过属性名找到HTML元素
var x = document.querySelector(“intro”);
DOM HTML
HTML DOM 允许 JavaScript 改变 HTML 元素的内容,其改变的方式有:
- 改变HTML输出流
在JS中,document.write()方法可用于直接向输出流写内容,但不要在文档加载完成后使用document.write(),这会覆盖文档 - 改变HTML内容
使用innerHTML属性,可以改变元素的内容 - 改变HTML属性
document.getElementById(id).attribute = 新属性值
DOM CSS
HTML DOM 允许 JavaScript 改变 HTML 元素的样式
如需改变 HTML 元素的样式,请使用这个语法:
document.getElementById(id).style.property=新样式
DOM事件
HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应
我们可以在事件发生时执行 JavaScript,比如当用户在 HTML 元素上点击时。
如需在用户点击某个元素时执行代码,请向一个 HTML 事件属性添加 JavaScript 代码:
οnclick=JavaScript
HTML 事件的例子:
当用户点击鼠标时 onclick
当网页已加载时 onload
当鼠标移动到元素上时 onmouseover
当提交 HTML 表单时 omsubmit
and more
这是使用HTML元素分配事件,使用的是HTML事件属性
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
</body>
</html>
使用 HTML DOM来分配事件
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>
大多时候这样使用
<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">点击文本!</h1>
</body>
</html>
常用事件:
onload 和 onunload 事件
onload事件表是页面加载完成之后,也就是用户进入时触发,可用于检测浏览器类型和浏览器版本,用来加载网页的正确版本,onunload事件在用户离开后出发。它们可用于处理cookie
onchange 事件
onchange事件常结合对输入字段的验证来使用
onmousedown 点下鼠标出发
onmouseup 松开鼠标触发
onclick 完成点击时触发
DOM EventListener
addEventListener() 方法
- addEventListener方法用于向指定元素添加事件句柄
element.addEventListener("click", function(){ alert("Hello World!"); });
- 其添加的事件句柄不会覆盖已存在的事件句柄
- 你可以向一个元素添加多个事件句柄
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);
- 你可以向同个元素添加多个同类型的事件句柄,如两个"click"事件
- 你可以向任何DOM对象添加事件监听,如window对象
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext;
});
- 其可以更简单地控制事件
- 当你使用方法时,JS从HTML标记中分离开来,可读性更强,在没有控制HTML标记时也可以添加事件监听
- 使用removeEventListener()来移除监听
element.removeEventListener("mousemove", myFunction);
- 语法 element.addEventListener(event,function,useCapure)
事件传递有两种方式 :冒泡与捕获
冒泡就是先出发内部的事件,再往外依次触发
捕获则相反
useCapture参数默认为false,表示冒泡事件,true将修改为捕获 - 传递参数(当传递参数值时,使用匿名函数调用带参数的函数)
element.addEventListener("click", function(){ myFunction(p1, p2); });
浏览器支持
表格中的数字表示支持该方法的第一个浏览器的版本号
方法 | chrome | IE | Firefox | Safari | Opera |
---|---|---|---|---|---|
addEventListener() | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
removeEventListener() | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
注意: IE 8 及更早 IE 版本,Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是,对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄:
element.attachEvent(event, function);
element.detachEvent(event, function);
11.兼容写法(IE9)
var x = document.getElementById("myBtn");
if (x.addEventListener) { // 所有主流浏览器,除了 IE 8 及更早版本
x.addEventListener("click", myFunction);
} else if (x.attachEvent) { // IE 8 及更早版本
x.attachEvent("onclick", myFunction);
}
DOM元素
HTML DOM元素,又称节点,主要介绍它的创建添加和移除
- 创建新的HTML元素
使用方法createElement()创建元素节点
使用方法cteateTextNode创建文本节点
使用方法appendchild()进行尾部添加元素
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
</script>
使用insertBefore实现头部添加元素
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>
2.移除元素(removeChild)
要移除一个元素,你需要知道该元素的父元素
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>
如果能够在不引用父元素的情况下删除某个元素,就太好了,不过很遗憾,DOM 需要清楚您需要删除的元素,以及它的父元素,但是这样就要获取两个元素,很麻烦,我们通常使用:
var child = document.getElementById("p1");
child.parentNode.removeChild(child);
3.替换(replaceChild)
我们可以使用replaceChild方法替换一个元素
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
<script>
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);
</script>
HTML Collection对象
- Collection对象
getElementsByTagName() 方法返回 HTMLCollection 对象
HTMLCollection 对象类似包含 HTML 元素的一个数组
集合中的元素可以通过索引来访问
var x = document.getElementsByTagName("p");
有length属性
var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = myCollection.length;
但无法使用数组的方法
是一个伪数组
NodeList对象
- NodeList对象是一个从文档中获取的节点列表(集合)
- NodeList对象类似Collection对象
- 一些旧版本的浏览器的方法,如getElementsByClassName返回的是NodeList对象,而不是Collection
- 所有浏览器的childNodes属性返回的都是NodeList对象
- 大部分浏览器的querySelectorAll()返回的是NodeList对象
- 有length属性
- 无法使用数组的方法
- NodeList和Collection的区别
HTML Collection是HTML元素的集合,NodeList是文档节点的集合
HTML Collection元素可以通过name、id或者索引获取,NodeList只能通过索引获取
NodeList是DOM节点数量和类型的对照,对节点增删,NodeList感觉不到。但对节点内容修改可以感觉到,比如修改innerHTML,而Collection是live绑定的,对节点的增删是敏感的
plist = document.quetySelectorAll("p");
pcoll = document.getElementsByTagName("p");
//以上plist返回的就是固定的值,而pcoll会随着html页面变化,如添加或者移除p标签,发生相应的改变
我的分享就到这里了,谢谢大家