首页 > 代码库 > HTML DOM介绍
HTML DOM介绍
HTML DOM定义了一系列的对象,以及访问和处理HTML的方法。通过DOM可以浏览所有的HTML元素,不但可以修改或者删除元素的文本和属性,而且可以创建新的元素。
一.首先对一个元素进行操作前,要得到要操作的元素,有三种方法得到元素:
1.通过id名,getElementById(id)
2.通过TagName,getElementByTagName(tagname)
3.通过ClassName,getElementByClassName(classname)
或者用jQuery方法来的到元素更加容易
1.通过id名,$("#text")得到id="text"的元素
2.通过TagName,$("p")得到所有的<p>元素
3.通过ClassName,$(".text")得到class="text"的所有元素
4.$(this)表示当前的HTML元素
二.得到元素后就可以进行操作了
1.属性innerHTML获得或设置元素文本内容
2.改变样式:如将id="text‘的元素颜色改为红色
var x=document.getElementById("#text");x.style.color="red";
3.创建新的元素:如创建一个<p>标签,内容为“this is a new p",再将新建的元素放置在id="text”元素后
var x=document.creatElement("p");
var content=document.createTextNode("this is a new");
x.appendChild(content);
var y=document.getElementById("text");
y.appendChild(x);
jQuery方法操作
1.属性:text()获得或设置元素文本
html()获得或设置包含html标签的文本
val()获得或设置表单的内容
attr()h获得或设置属性
2.样式:css()获得或设置CSS属性
3.创建元素:如创建一个<p>标签,内容为“this is a new p",再将新建的元素放置在id="text”元素后
$("#text").append("<p>this is a new p</p>");
三.常见事件
onclick 单击
onload 加载页面
onchange 改变输入字段的内容时触发
onmouseover 鼠标移动到事件
onmouseout 鼠标移出事件
onmouseup 鼠标松开事件
onmousedown 鼠标按下事件
HTML DOM介绍