您的位置：首页 > Web前端 > JavaScript

JS HTML DOM

2016-04-21 13:13 726 查看

JavaScript HTML DOM

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素

HTML DOM

文档对象模型（Document Object Model）
当网页被加载时，浏览器会创建页面的文档对象模型
HTML DOM 模型被构造为对象的树
HTML DOM 树
![结构](https://img-blog.csdn.net/20160421125517078)
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
查找 HTML 元素
通常，通过 JavaScript，您需要操作 HTML 元素
为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事
通过 id 找到 HTML 元素
通过标签名找到 HTML 元素
通过类名找到 HTML 元素

通过 id 查找 HTML 元素
在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id
var x=document.getElementById("intro")
如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。
如果未找到该元素，则 x 将包含 null
通过标签名查找 HTML 元素
通过标签名查找 HTML 元素
本例查找 id="main" 的元素，然后查找 "main" 中的所有 <p> 元素
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
通过类名查找 HTML 元素在 IE 5,6,7,8 中无效

HTML DOM 教程

如何改变 HTML 元素的内容 (innerHTML)
如何改变 HTML 元素的样式 (CSS)
如何对 HTML DOM 事件对做出反应
如何添加或删除 HTML 元素

JavaScript HTML DOM - 改变 HTML

HTML DOM 允许 JavaScript 改变 HTML 元素的内容
改变 HTML 输出流
<script>
document.write(Date());
</script>
改变 HTML 内容
修改 HTML 内容的最简单的方法时使用 innerHTML 属性
document.getElementById(id).innerHTML=new HTML
document.getElementById("p1").innerHTML="New text!";
改变 HTML 属性
document.getElementById(id).attribute=new value
document.getElementById("image").src="landscape.jpg";
JavaScript HTML DOM - 改变 CSS
HTML DOM 允许 JavaScript 改变 HTML 元素的样式
改变 HTML 样式
document.getElementById("p2").style.color="blue";
<h1 id="id1">My Heading 1</h1>

<button type="button" onclick="document.getElementById('id1').style.color='red'">
点击这里
</button>
JavaScript HTML DOM 事件
HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应
HTML 事件的例子：
当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时
<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>
HTML 事件属性
使用 HTML DOM 来分配事件
onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie
onchange 事件

onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>

<script>
function mOver(obj) {
obj.innerHTML="谢谢"
}

function mOut(obj) {
obj.innerHTML="把鼠标移到上面"
}
</script>
</body>
onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件
<body>
<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">请点击这里</div>

<script>
function mDown(obj) {
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="请释放鼠标按钮"
}

function mUp(obj) {
obj.style.backgroundColor="green";
obj.innerHTML="请按下鼠标按钮"
}
</script>
</body>

JavaScript HTML DOM 元素（节点）

添加和删除节点（HTML 元素）
如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一    个已存在的元素追加该元素
<body>
<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>
</body>
删除已有的 HTML 元素
<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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航