Javascript基本整理<3>
@[基本示例DOM|基于bootstrap框架]
JavaScript DOM简介
通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
JavaScript 查找DOM元素
- 通过 id 找到 HTML 元素
- 通过标签名找到 HTML 元素
通过类名找到 HTML 元素
通过id查找元素
var x=document.getElementById("intro");
通过签名查找元素
var x=document.getElementByTagName("p");
通过类名查找元素
var x=document.getElementByClassName("btn");
JavaScript改变HTML
JavaScript改变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>JavaScript改变HTML属性
document.getElementById(id).attribute=new value;
//举例
<!DOCTYPE html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>JavaScript改变CSS
document.getElementById(id).style.property=new style;
//举例 改变了 id="id1" 的 HTML 元素的样式，当用户点击按钮时
<h1 id="id1">My Heading 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color='red'">
点击这里
</button>JavaScript DOM事件
HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。
如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：
οnclick=JavaScript
HTML 事件的例子：
- 当用户点击鼠标时
- 当网页已加载时
- 当图像已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当提交 HTML 表单时
- 当用户触发按键时
//在本例中，当用户在 <h1> 元素上点击时，会改变其内容：
<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>//从事件处理器调用一个函数
<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="谢谢!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">请点击该文本</h1>
</body>
</html>//使用 HTML DOM 来分配事件
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>JavaScript DOM元素节点
创建新的 HTML 元素
<div id="div1">
<p id="p1">这是一个段落</p>
<p id="p2">这是另一个段落</p>
</div>
<script>
//创建新的<p>元素
var para=document.createElement("p");
//创建了一个文本节点
var node=document.createTextNode("这是新段落。");
//向 <p> 元素追加这个文本节点
para.appendChild(node);
//向一个已有的元素追加这个新元素
var element=document.getElementById("div1");
element.appendChild(para);
</script>删除已有的HTML元素
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
//找到 id="div1" 的元素
var parent=document.getElementById("div1");
//找到 id="p1" 的 <p> 元素
var child=document.getElementById("p1");
从父元素中删除子元素
parent.removeChild(child);
</script>