什么是HTML-- DOM:
当页面被加载的时候,浏览器会创建页面的文档对象模型(Document Object Model)
HTML DOM 是HTML 的标准对象模型和编程接口,它定义了:
- 作为对象的HTML元素
- 所有HTML元素的属性
- 访问所有HTML元素的方法
- 所有HTML元素的事件
总之: HTML DOM 是关于如何获取,更改,添加或者删除HTML元素的标准
JavaScript--HTML DOM 方法:
HTML DOM方法是能够在HTML元素上执行的动作
HTML DOM属性是能够设置或者改变的HTML元素的值
在DOM 中 所有的HTML元素都被定义为节点
查找HTML元素:
1.通过id 查找 var x=document.getElementById("id") |
2.通过标签名查找 var x=document.getElementsByTagName("p") |
3.通过类名查找 var x=document.getElementsByClassName("intr") |
4.通过CSS选择器查找 |
5.通过HTML对象集查找 |
节点是有类型的(文件节点,元素节点,属性节点)
- 创建新的节点:
创建元素节点: var node =document.createElement() ;
例子: var para =document.createElement("p") ;
创建文本节点: var textNode=document.createTextNode("文本");
例子: var txt1=document.createTextNode("今天天气真好")
- 向元素节点中添加文本:
para.appendChild(txt1);
- 如何获得节点:
语法: var btn=document.getElementById("id的字符串");
例子:
<script>
onload=function(){
var btn =document.getElementById("btn");
//为节点添加事件
btn.onClick=function(){
alert("完成!");
};
};
</script>
<body>
<input type="button" value="点击" id="btn"/>
</body>
- 获得节点集合:
语法: document.getElementsByTagName("标签名"); //获得页面中所有标签名符合要求的标签
- 获得子节点:
获得子节点语法: var dv=document.getElementById("dv");
//获得下面所有的子元素
dv.childNodes;
- 插入节点:
上面介绍了 appendChild()方法,这个方法的作用是将新元素作为父的最后一个
除此之前还有一个 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>
- 修改节点:
修改节点的属性 和 修改节点包含的文本
修改节点的属性的方法:
语法:
<node>.setAttribute("属性名","值");
文本 <node>.getAttribute("属性名");
修改内容:
<node>.innerHTML
修改属性:
<node>.setAttribute();
修改样式:
<node>.style.样式属性="值";
例子: <node>.style.color=red;