DOM文档对象模型(Document object model)
-
网页被加载是浏览器都会自动创建DOM如下：
Screenshot from 2017-05-31 23-19-00.png
Javascript DOM的主要用途
- JavaScript DOM能够改变页面中的所有 HTML 元素
- JavaScript DOM能够改变页面中的所有 HTML 属性
- JavaScript DOM能够改变页面中的所有 CSS 样式
- JavaScript DOM能够对页面中的所有事件做出反应
改变页面中的HTML元素
- 查找HTML元素
| 方法 | 描述 |
|---|---|
| getElementsByName | 通过标签的name属性查找(可用于单选按钮) |
| getElementsByClassName | 通过类名查找 |
| getElementsByTagName() | 通过标签名查找 |
| getElementById | 通过ID属性查找 |
eg:同下
改变元素
- 通过appendchild方法
添加节点
<div id="div1">
<p>**************</p>
</div>
<div id="div2">
<a href="http:www.baidu.com">百度</a>
<input type="text" placeholder="请输入文本">
<input type="button" value="提交" onclick="test()">
</div>
<script >
function test() {
var element=document.getElementById("div1");
var inner_div=document.createElement("div");//创建元素节点
var inner_text=document.createTextNode("#######");//创建文本节点
inner_div.appendChild(inner_text)
element.appendChild(inner_div);
}
</script>-
删除节点
function test() { var element=document.getElementById("div1"); alert(1); p_node=document.getElementsByTagName("p"); element.removeChild(p_node[0]); }
- 通过innerHTML方法
-
修改HTML属性
function test() { var node=document.getElementsByTagName("input"); node[0].type="radio"; }
function test() {
var node=document.getElementById("div1");
node.innerHTML="<i>帅</i>"
} -
- 修改CSS属性
function test() {
var node=document.getElementById("div1");
node.style.backgroundColor="red";
} - 事件监听请见下一篇博客
