jsDOM
2018-07-26 本文已影响0人
焦迈奇
通过HTML DOM（文档对象模型，对象的树），javascript可访问HTML文档的所有内容。
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
查找Html元素
- 通过 id 找到 HTML 元素
var x=document.getElementById("intro"); - 通过标签名找到 HTML 元素
var x=document.getElementsByTagName("p"); - 通过类名找到 HTML 元素
var x=document.getElementByClassName("intro");
改变html
- document.write可用于直接向html输出流写内容。
- 改变html元素的内容innerHTML
- 改变html元素的属性 .属性（attribute）
改变元素的css样式
.style.property
HTML DOM事件
HTML 事件的例子：
- 当用户点击鼠标时
- 当网页已加载时
- 当图像已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当提交 HTML 表单时
- 当用户触发按键时
<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>
- onclick
- onload和onunload
- onchange
- onmouseover和onmouseout
- onmousedown、onmouseup、onclick
- onfocus(获得焦点)
DOM节点
添加和删除节点（元素）
添加
- 创建新的 HTML 元素
如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
这段代码创建新的 <p> 元素：
var para=document.createElement("p");
如需向 <p> 元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点：
var node=document.createTextNode("这是新段落。");
然后您必须向 <p> 元素追加这个文本节点：
para.appendChild(node);
最后您必须向一个已有的元素追加这个新元素。
这段代码找到一个已有的元素：
var element=document.getElementById("div1");
这段代码向这个已有的元素追加新元素：
element.appendChild(para);
删除已有的 HTML 元素
如需删除 HTML 元素，您必须首先获得该元素的父元素：
找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素：
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
