1.HTML DOM (文档对象模型)
通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。
1.JavaScript 能够改变页面中的所有 HTML 元素
(1)查找 HTML 元素:
通过 id 找到 HTML 元素:document.getElementById("intro");
通过标签名找到 HTML 元素:document.getElementsByTagName("p");
通过类名找到 HTML 元素:document.getElementsByClassName("intro");
(2)JavaScript 能够改变页面中的所有 HTML 属性
- 改变 HTML 输出流,
document.write()
可用于直接向 HTML 输出流写内容。
注意:绝对不要在文档(DOM)加载完成之后使用 document.write()。这会覆盖该文档。 - 改变 HTML 内容:
document.getElementById(id).innerHTML=新的 HTML
- 改变 HTML 属性:
document.getElementById(id).attribute=新属性值
,attribute为属性名
2.JavaScript 能够改变页面中的所有 CSS 样式
- 改变 HTML 样式:
document.getElementById(id).style.property=新样式,
property为样式名 - 改变样式可以与点击事件结合使用:
onclick="document.getElementById('id1').style.color='red'"
3.JavaScript 能够对页面中的所有事件做出反应
- onload 和 onunload 事件:用户进入或离开页面时被触发
- onclick事件:点击时触发
- onchange 事件:结合对输入字段的验证来使用
- onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
- onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。
2.EventListener句柄,冒泡与捕获
- addEventListener() 方法:用于向指定元素添加事件句柄,添加的事件句柄不会覆盖已存在的事件句柄。
语法
element.addEventListener(event, function, useCapture);
第一个参数是事件的类型 (如 “click” 或 “mousedown”)。不要使用 “on” 前缀,使用 “click”
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
将 p元素插入到 div元素中,用户点击 p 元素
在冒泡中,内部元素的事件会先被触发,然后再触发外部元素,即:p元素的点击事件先触发,然后会触发 div元素的点击事件。默认值为 false, 即冒泡传递
在捕获中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即: div元素的点击事件先触发 ,然后再触发p 元素的点击事件。当值为 true 时, 事件使用捕获传递。
- removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄
3.事件
1.事件流:在页面中接受事件的顺序
2.事件冒泡与捕获;
在冒泡中,内部元素的事件会先被触发,然后再触发外部元素,即:p元素的点击事件先触发,然后会触发 div元素的点击事件。默认值为 false, 即冒泡传递
在捕获中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即: div元素的点击事件先触发 ,然后再触发p 元素的点击事件。当值为 true 时, 事件使用捕获传递。
3.事件处理
(1)html事件处理
<div id="div">
<button id="btn" onclick="demo()">按钮</button>
</div>
<script>
function demo() {
alert("hello,html事件处理");
}
</script>
缺点:当需要改动时,需要改动多处
(2)DOM0级事件处理
<script>
var btn1=document.getElementById("btn1");
btn1.onclick=function (ev) { alert("hello,DOM0级处理事件程序1") }
btn1.onclick=function (ev) { alert("hello,DOM0级处理事件程序2") }
btn1.onclick=function (ev) { alert("hello,DOM0级处理事件程序3") }
//最后弹出来的是3,1和2被覆盖掉
btn1.onclick=null; //表示内容被清除
</script>
(3)DOM2级事件处理
注:DOM2的布尔值(true、false)已不需要操作
<script>
var btn1=document.getElementById("btn1");
btn1.addEventListener("click",demo1);
btn1.addEventListener("click",demo2);
btn1.addEventListener("click",demo3);
function demo1() {
alert("DOM2级事件处理程序1")
}
function demo2() {
alert("DOM2级事件处理程序2")
}
function demo3() {
alert("DOM2级事件处理程序3")
// 事件不会互相覆盖,点击确认后依次弹出
}
btn1.removeEventListener("click",demo2);
// DOM2级事件处理程序2被移除
</script>
(4)IE事件处理程序:主要考虑浏览器的兼容
<script>
var btn1=document.getElementById("btn1");
if(btn1.addEventListener){ // 如果浏览器支持DOM2级
btn1.addEventListener("click",demo);
}else if(btn1.attachEvent){ //如果IE8不能处理,则让处理器处理IE事件
btn1.attachEvent("onclick",demo);
}else { //如果都不支持,只支持DOM0级事件
btn1.onclick=demo();
}
function demo() {
alert("hello")
}
</script>
4.事件处理对象:在触发DOM事件的时候会产生一个对象
(1)type:获取事件的类型
(2)target:获取事件的目标
(3)阻止事件的冒泡
(4)阻止默认事件的发生
<script>
document.getElementById("btn1").addEventListener("click",showType);
document.getElementById("div").addEventListener("click",showDiv);
document.getElementById("aid").addEventListener("click",showA);
function showType(event) {
alert(event.type);// 当点击按钮时,弹出当前事件的类型click
alert(event.target); // 当点击按钮时,弹出当前事件的目标
event.stopPropagation(); //阻止事件冒泡,div不再出现
}
function showDiv() {
alert("div");
} //冒泡事件,先弹出button的target,再弹出div的函数target
function showA() {
event.stopPropagation(); //阻止冒泡排序
event.preventDefault(); //阻止默认事件发生,即不允许点击时网页跳转
}
</script>
4.DOM 元素(节点)
创建新的 HTML 元素 (节点) - appendChild()
创建新的 HTML 元素 (节点) - insertBefore()
移除已存在的元素removeChild()
替换 HTML 元素 - replaceChild()
(1)获取name、获取元素、获取元素属性、设置元素属性、访问子节点
function getName() {
var count=document.getElementsByName("pn");
var count=document.getElementsByTagName("p");
alert(count.length); //弹出3,说明相同name成为一个集合被存起来
var p=count[2]; //获取集合中的数
p.innerHTML="world"; //页面显示第三个hello被修改
}
getName(); //获取name
function getAttr() {
var anode=document.getElementById("aid");
var attr=anode.getAttribute("id"); //获取元素的属性,获取元素的id
alert(attr);
}
getAttr(); //页面弹出一个aid
function setAttr(){
var anode=document.getElementById("aid2");
anode.setAttribute("title","动态设置a的title属性" );
// setAttribute中第一个表示要被修改的变量,第二个表示被修改以后的值
var attr=anode.getAttribute("title");
alert(attr);
}
setAttr();
function getchildNode(){ //子节点
var childnode=document.getElementsByTagName("ul")[0].childNodes;
alter(childnode.length);
//打印子节点的长度,注意列表中元素的书写方式,书写方式不同,长度不同
alert(childnode[0].nodeType);
// nodeType 属性返回以数字值返回指定节点的节点类型。
// 如果节点是元素节点,则 nodeType 属性将返回 1。
// 如果节点是属性节点,则 nodeType 属性将返回 2。
}
getchildNode();
注意:
<ul> //浏览器认为这个位置还有一个元素
<li>1</li>
<li>2</li>
<li>3</li>
//所以ul的子节点长度打印结果为7
</ul>
可以通过修改位置
<ul> <li>1</li><li>2</li><li>3</li>
//此时ul的子节点长度打印结果为3
</ul>
(2)访问父节点、创建元素节点、插入节点、删除节点、页面尺寸
function getParentNode() {
var div=document.getElementById("pid");
//获取p标签的父节点div
alert(div.parentNode.nodeName);
//打印节点的名称,弹出结果为div
}
function createNode() {
var div=document.body;
var input=document.createElement("input");
//创建的元素结点的类型;
input.type="button";
input.value="按钮";
body.appendChild(input);
//插入节点,位置不可调控
}
function addNode() {
var div=document.getElementById("div");
var node=document.getElementById("pid");
var newnode=document.createElement("p");
//表示要插入一个p元素
newnode.innerHTML="在动态中添加一个p元素";
//直接定义这个p元素的内容
div.insertBefore(newnode,node);
//第一个表示要插入的元素,第二个表示要插入的相对位置
//此处将它插入了div与p之间,
}
function removeNode() {
var div=document.getElementById("div");
var p=div.removeChild(div.childNodes[1]);
//表示删除div中的第二个子节点,即p元素
}
function getSize() {
var width=document.body.offsetWidth;
var width=document.documentElement.offsetWidth;
//以上两种写法意义相同,考虑了不同浏览器的兼容性
//scrollwidth指包含滚动条时的长度,offset指不包含滚动条时的长度
}
5. DOM 集合(Collection)和节点列表(NodeList)
1.collection:看起来可能是一个数组,但其实不是一个数组!
var x = document.getElementsByTagName("p");
y = x[1]; //可以获取第二个元素
document.getElementById("demo").innerHTML = myCollection.length;
//显示集合元素个数
2.NodeList 对象:类似 HTMLCollection 对象,getElementsByClassName()返回的是 NodeList 对象,而不是 HTMLCollection 对象。
和collection相似,NodeList 中的元素可以通过索引(以 0 为起始位置)来访问,NodeList 对象 length 属性定义了节点列表中元素的数量。
3.区别
HTMLCollection 是 HTML 元素的集合。NodeList 是一个文档节点的集合(既包括元素,也包括节点)。
【节点(Node)与元素(Element)的区别】:元素是一个小范围的定义,必须是含有完整信息的结点才是一个元素,例如<div>...</div>
。但是一个结点不一定是一个元素,而一个元素一定是一个结点。
<div id="parentDiv">
<!--注释-->
<div></div>
</div>
<script>
console.log(document.getElementById('parentDiv').childNodes);
//节点:NodeList[5]
console.log(document.getElementById('parentDiv').children) ;
//元素:HTMLCollection[1]
</script>
DOM将文档中的所有都看作节点 node>element:
- 文档本身是文档节点
- 所有 HTML 元素是元素节点
- 所有 HTML 属性是属性节点
- HTML 元素内的文本是文本节点 (包括回车符也是属于文本节点)
- 注释是注释节点