含义
DOM（文档对象模型）是针对 HTML 和 XML 文档的一个 API，通过 DOM 可以去改变文档。
简单的说，一个 web 网页就是一个文档，使用 DOM 改变文档就是使用 DOM 定义的一些方法操作具体的节点。比如用getElementById 来根据元素 id 来查找元素节点。
当浏览器载入HTML时，会生成相应的 DOM 树，大概长这样
image.png
转化为代码就是如下：
<html>
<head>
<title>我是title</title>
</head>
<body>
<a herf="">我是超链接</a>
<p id="test">我是p标签</p>
</body>
</html>
对DOM的定义
对于一个 HTML 来说，文档节点 Document （是看不到的）就是它的根节点，这个根节点对应的对象就是 document ，我们可以通过根节点来访问它的子节点(Element 、Text)。
Document 类型
刚才说到 Document 是整个文档的根节点，我们想要访问某个节点的时候都必须通过 document 这个实例对象。
- document 对象的常用属性：
document.documentElement //可以直接拿到html的节点的引用
document.title //直接获取title节点的文本 即 我是title
document.url //获取url
-
doucument常用方法
2018-04-24 10-26-44屏幕截图.png
document.getElementById() //docment.getElementById('test') 可以获取到属性 id 为 ‘myId’ 的节点，在上面的代码中获取的也就是 p 节点
document.getElementsByTagName //docment.getElementByTagName('p') 可以获取到节点为 p 的所有节点集
document.documentElement // 全部文档
document.body //文档的主体
以上的方法就使我们根据 document 对象中的方法获取到 HTML 中任意节点了
Element 类型
通常我们在使用 document 对象来获取节点时，返回的节点类型就是 Element 类型，所以我们想要对获取的节点进行操作，我们只需要使用 Element 包含的属性和方法即可。
- 常用的属性
var myNode = document.getElementById('myId');
myNode.id // 获取该节点的 id ，即 ‘myId‘
myNode.tagName // 获取该节点的节点名，即 'P'，大部分浏览器返回的标签名都是大写
myNode.className //获取该节点的 class
- 操作节点属性的常用方法
//假如我们有一个 input，我们想要获取 input 的 type 属性，并对 type 属性进行操作
<input type='text' id='input'/>
var myNode = document.getElementById('input')
myNode.getAttribute('type') // 获取属性值，即 ‘text’
myNode.setAttribute('type','password') // 将 type 属性值改为 password 类型
myNode.removeAttribute('type') // 移除 type 属性
实例
- 对事件做出反应
要求：
当事件发生时，可以执行 JavaScript，比如当用户点击一个 HTML 元素时。
如需在用户点击某个元素时执行代码，请把 JavaScript 代码添加到 HTML 事件属性中：
onclick=JavaScript
- html事件的例子
当用户点击鼠标时
当网页已加载时
当图片已加载时
当鼠标移动到元素上时
当输入字段被改变时
当 HTML 表单被提交时
当用户触发按键时
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='hello!'">请点击这段文本!</h1>
</body>
</html>
// **相当于点击按钮时给h1进行赋值**
- 从事件处理程序中调用函数：
<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="hello!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">请点击这段文本!</h1>
</body>
</html>
- HTML 事件属性
如需向 HTML 元素分配事件，您可以使用事件属性。
向 button 元素分配一个 onclick 事件：
<!DOCTYPE html>
<html>
<body>
<p>点击按钮来执行 <b>displayDate()</b> 函数。</p>
<button onclick="displayDate()">试一试</button>
<script>
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>
- 使用 HTML DOM 来分配事件
HTML DOM 允许您使用 JavaScript 向 HTML 元素分配事件：
为 button 元素分配 onclick 事件：
<!DOCTYPE html>
<html>
<dody>
<p>点击按钮来执行<b>displayDate()</b></p>
<button id="myBtn">点击试一试</button>
<script>
document.getElementById("myBtn").onclik = function(){displayDate()}
function displayDate(){
document.getElementById('demo').innerHTML = Date();
}
</script>
<p id=""demo></p>
</body>
</html>
在上面的例子中，名为 displayDate 的函数被分配给了 id=myButn" 的 HTML 元素。
当按钮被点击时，将执行函数。
onload 和 onunload 事件
当用户进入或离开页面时，会触发 onload 和 onunload 事件。
onload 事件可用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页。
onload 和 onunload 事件可用于处理 cookies。
<!DOCTYPE html>
<html>
<body onload="checkCookies()">
<script>
function checkCookies()
{
if (navigator.cookieEnabled==true)
{
alert("Cookies are enabled")
}
else
{
alert("Cookies are not enabled")
}
}
</script>
<p>弹出的提示框会告诉你浏览器是否已启用 cookie。</p>
</body>
</html>
onchange 事件
onchange 事件常用于输入字段的验证。
下面的例子展示了如何使用 onchange。当用户改变输入字段的内容时，将调用 upperCase() 函数。
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(){
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</head>
<body>
请输入你的英文名：<input type="text" id="fname" onchange="myFunction()">
<p>当你离开输入框时，被触发的函数会把你输入的文本转换为大写字母。</p>
</body>
</html>
onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在鼠标指针移动到或离开元素时触发函数
<!DOCTYPE html>
<html>
<body>
<div
onmouseover="mOver(this)"
onmouseout="mOut(this)"
style="background-color:#D94A38;width:200px;height:50px;padding-top:25px;text-align:center;">
Mouse Over Me
</div>
<script>
function mOver(obj)
{
obj.innerHTML="谢谢你"
}
function mOut(obj)
{
obj.innerHTML="把鼠标指针移动到上面"
}
</script>
</body>
</html>
onmousedown、onmouseup 以及 onclick 事件
onmousedown、onmouseup 以及 onclick 事件是鼠标点击的全部过程。首先当某个鼠标按钮被点击时，触发 onmousedown 事件，然后，当鼠标按钮被松开时，会触发 onmouseup 事件，最后，当鼠标点击完成时，触发 onclick 事件。
<!DOCTYPE html>
<html>
<body>
<div
onmousedown="mDown(this)"
onmouseup="mUp(this)"
style="background-color:#D94A38;width:200px;height:50px;padding-top:25px;text-align:center;">
点击这里
</div>
<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="松开鼠标"
}
function mUp(obj)
{
obj.style.backgroundColor="#D94A38";
obj.innerHTML="谢谢你"
}
</script>
</body>
</html>
网友评论