JS HTML DOM

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
HTML DOM (文档对象模型)
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

查找 HTML 元素
通过 JavaScript，操作 HTML 元素。
须首先找到该元素。有三种方法：
通过 id 找到 HTML 元素
通过标签名找到 HTML 元素
通过类名找到 HTML 元素

//通过 id 查找 HTML 元素:
var x=document.getElementById("intro");
/*如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。
如果未找到该元素，则 x 将包含 null。
*/

//通过标签名查找 HTML 元素:
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

//通过类名找到 HTML 元素
var x=document.getElementsByClassName("intro");

HTML DOM - 改变 HTML
改变 HTML 输出流
在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());//绝对不要在文档(DOM)加载完成之后使用 document.write()。这会覆盖该文档
</script>

</body>
</html>

改变 HTML 内容
修改 HTML 内容的最简单的方法是使用 innerHTML 属性。

document.getElementById(id).innerHTML="新的 HTML"
//实例
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
</body>
</html>
//改变了 <h1> 元素的内容：
<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="新标题";
</script>
</body>
</html>

改变 HTML 属性

document.getElementById(id).attribute="新属性值"

//改变 <img> 元素的 src 属性：
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>

HTML DOM - 改变CSS
改变 HTML 样式

document.getElementById(id).style.property="新样式"

改变 <p> 元素的样式：
<body>
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
<p>以上段落通过脚本修改。</p>
</body>

使用事件
通过触发事件来执行代码。
元素被点击。
页面加载完成。
输入框被修改。
……
显示隐藏案例：

<body>
<p id="p1">这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。</p>
<input type="button" value="隐藏文本" onclick="document.getElementById('p1').style.visibility='hidden'" />
<input type="button" value="显示文本" onclick="document.getElementById('p1').style.visibility='visible'" />
</body>

HTML DOM 事件
当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时

//点击时，会改变其内容
<body>
<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
</body>
//从事件处理器调用一个函数：changetext(id)
<script>
function changetext(id){
    id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">点击文本!</h1>
</body>

HTML 事件属性
向 HTML 元素分配 事件，可以使用事件属性。

//向 button 元素分配 onclick 事件：
<button onclick="displayDate()">点这里</button>

//使用 HTML DOM 来分配事件
//向 button 元素分配 onclick 事件：
<button id="myBtn">点这里</button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。

<body onload="checkCookies()">
<script>
function checkCookies(){
    if (navigator.cookieEnabled==true){
        alert("Cookies 可用")
    }
    else{
        alert("Cookies 不可用")
    }
}
</script>

onchange 事件
onchange 事件常结合对输入字段的验证来使用。

<script>
function myFunction(){
    var x=document.getElementById("fname");
    x.value=x.value.toUpperCase();
}
</script>
</head>
<body>
输入你的名字: <input type="text" id="fname" onchange="myFunction()">
/*当鼠标离开输入框后，函数将被触发，将小写字母转为大写字母。
*/

onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj){
    obj.innerHTML="Thank You"
}
function mOut(obj){
    obj.innerHTML="Mouse Over Me"
}
</script>

onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

HTML DOM EventListener
addEventListener() 方法

//在用户点击按钮时触发监听事件：
document.getElementById("myBtn").addEventListener("click", displayDate);
/*addEventListener() 方法用于向指定元素添加事件句柄。添加的事件句柄不会覆盖已存在的事件句柄。
可以向一个元素添加多个、多个同类型的事件句柄。
可以向任何 DOM 对象添加事件监听
addEventListener() 方法可以更简单的控制事件（冒泡与捕获）
*/

HTML DOM 元素 (节点)
创建新的 HTML 元素 (节点) - appendChild()
appendChild() 方法，它用于添加新元素到尾部

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var para = document.createElement("p");//创建 <p> 元素
var node = document.createTextNode("这是一个新的段落。");//为 <p> 元素添加文本节点
para.appendChild(node);//将文本节点添加到 <p> 元素中
 
var element = document.getElementById("div1");//查找已存在的元素
element.appendChild(para);//添加到已存在的元素中
</script>

创建新的 HTML 元素 (节点) - insertBefore()
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>

移除已存在的元素
要移除一个元素，需要知道该元素的父元素。

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
<script>
var parent = document.getElementById("div1");//查找 id="div1" 的元素
var child = document.getElementById("p1");//查找 id="p1" 的 <p> 元素
parent.removeChild(child);//从父元素中移除子节点
</script>

替换 HTML 元素 - 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 DOM 集合(Collection)
HTMLCollection 对象
getElementsByTagName() 方法返回 HTMLCollection 对象。

TMLCollection 对象类似包含 HTML 元素的一个数组。
获取文档所有的 <p> 元素：
var x = document.getElementsByTagName("p");
集合中的元素可以通过索引(以 0 为起始位置)来访问。

HTMLCollection 对象 length 属性
HTMLCollection 对象的 length 属性定义了集合中元素的数量。

var myCollection = document.getElementsByTagName("p");//获取 <p> 元素的集合
document.getElementById("demo").innerHTML = myCollection.length;//显示集合元素个数

注意
HTMLCollection 不是一个数组！
HTMLCollection 看起来可能是一个数组，但其实不是。
你可以像数组一样，使用索引来获取元素。
HTMLCollection 无法使用数组的方法： valueOf(), pop(), push(), 或 join() 。

HTML DOM 节点列表
NodeList 对象是一个从文档中获取的节点列表 (集合) 。
所有浏览器的 childNodes 属性返回的是 NodeList 对象。
大部分浏览器的 querySelectorAll() 返回 NodeList 对象。
节点列表不是一个数组！

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 十二、事件
      JavaScript 与 HTML 之间的交互是通过事件实现的。   事件，就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,581评论 1赞 11
  • 专辑篇:JS HTML DOM
    JavaScript HTML DOM 通过HTML DOM,可以访问JavaScript HTML文档的所有元素...
    edwin_hei阅读 453评论 0赞 2
  • 九、DOM
      DOM（文档对象模型）是针对 HTML 和 XML 文档的一个 API（应用程序编程接口）。   DOM 描绘...
    霜天晓阅读 3,743评论 0赞 7
  • JavaScript高级程序设计-笔记
    第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型：Unde...
    RickCole阅读 5,286评论 0赞 21
  • JS HTML DOM (文档对象模型)
    DOM简介 当网页加载时，浏览器会创建页面的文档对象模型（DOM）。通过DOM，JS可以对HTML实现以下操作：改...
    figure_ai阅读 550评论 0赞 1