JS HTML DOM
DOM简介
- 通过HTML DOM，可访问JavaScript HTML文档的所有元素。
- 当网页加载时，浏览器会创建页面的文档对象模型。
- HTML DOM模型被构造为对象的树。
JavaScript能够改变页面中的所有HTML元素，属性，CSS样式，能够对页面中的所有时间做出反应。
-
JavaScript操作HTML元素，首先需要找到该元素。有三种方法：
- 通过id 找到HTML元素
- 通过标签名找到html元素
- 通过类名找到HTML元素
-
通过id查找html元素
var x=document.getElementById(“intro”)
找到：以对象形式返回该元素
找不到：x将包含null
- 通过标签名查找html元素
var x=document.getElementById(“main”)
var y=x.getElementsByTagName(“p”);
改变HTML
- HTML DOM允许JavaScript改变HTML元素的内容
- 改变HTML输出流
<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
- 改变HTML内容
document.getElementById(id).innerHTML=new HTML
<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="New Header";
</script>
</body>
</html>
- 改变HTML属性
document.getElementById(id).attribute=new value
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
改变CSS
- HTML DOM允许JavaScript改变HTML元素的样式。
document.getElementById(id).style.property=new style
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
<h1 id="id1">My Heading 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color='red'">
点击这里
</button>
DOM事件
- HTML DOM使JavaScript有能力对HTML事件做出反应
- 对事件做出反应，在事件发生时执行代码
οnclick=JavaScript
- 用户点击鼠标时
- 网页已加载时
- 图像已加载时
- 鼠标移动到元素时
- 提交HTML表单时
- 用户触发按键时
<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="谢谢!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">请点击该文本</h1>
</body>
</html>
- HTML事件属性
<button οnclick=“displayDate()”>点击这里
- 使用HTML DOM来分配事件
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>
- onload和onunload事件
onload和onunload在用户进入或离开页面时被触发
onload 和 onunload 事件可用于处理 cookie。
<body οnlοad=“checkCookies()”>
- onchange事件
onchange 事件常结合对输入字段的验证来使用。
当用户改变输入字段的内容时，会调用 upperCase() 函数。
<input type="text" id="fname" onchange="upperCase()">
- onmouseover和onmouseout事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
- onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
JavaScript HTML DOM EventListener
- addEventListener() 方法
element.addEventListener(event, function, useCapture);
第一个参数是事件的类型 (如 “click” 或 “mousedown”).
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
element.addEventListener("click", function(){ alert("Hello World!"); });
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);
- windows对象添加事件句柄
// 当用户重置窗口大小时添加事件监听：
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext;
});
- 事件冒泡或事件捕获
事件传递有两种方式：冒泡与捕获。
事件传递定义了元素事件触发的顺序。 如果你将元素插入到
元素中，用户点击元素, 哪个元素的 “click” 事件先被触发呢？
在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即：元素的点击事件先触发，然后会触发
元素的点击事件。
在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即：元素的点击事件先触发 ，然后再触发元素的点击事件。
addEventListener(event, function, useCapture);
默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。
document.getElementById("myDiv").addEventListener("click", myFunction, true);
- removeEventListener() 方法
removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄
element.removeEventListener("mousemove", myFunction);
DOM节点
- 添加和删除节点
- 创建新的html元素
var para=document.createElement("p") #创建新元素
var node=document.createTextNode("这是新段落"); #创建新节点
para.appendChild(node);
var element=document.getElementById("div1");
element.apppendChild(para):
// element.insertBefore(para, child); 将新元素添加到开始位置
- 删除已有的HTML元素
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
#找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素：
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
- 替换 HTML 元素 - replaceChild()
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);
DOM 集合(Collection)
- getElementsByTagName() 方法返回 HTMLCollection 对象。HTMLCollection 对象类似包含 HTML 元素的一个数组。
var myCollection = document.getElementsByTagName("p");
var i;
for (i = 0; i < myCollection.length; i++) {
myCollection[i].style.backgroundColor = "red";
}
DOM 节点列表
- NodeList 对象是一个从文档中获取的节点列表 (集合)
var myNodelist = document.querySelectorAll("p");
var i;
for (i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.backgroundColor = "red";
}
4295
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
