HTML DOM对象————方法属性
一些常用的HTML-DOM方法
getElementByID(id)-获取带有指定节点(元素)appendChild(node)-插入新的子节点(元素)removeChild(node)-删除子节点元素
一些常用的HTML-DOM属性
innerHTML - 节点(元素)的文本值parentNode -节点(元素)的父节点childNode - 节点(元素)的父节点attributes - 节点(元素)的属相节点
举例:
<script
>
var pare
=document
.createElement("p");
var node
=document
.getElement
.createTextNode("这是新的段落");
pare
.appendChild(node
);
var element
=document
.getElementById("div");
element
.appendChild(pare
);
</script
>
一些DOM的对象方法
metheddescribe
getElementById()返回带有指定元素的值getElementsByTagName返回包含带有指定标签名称的所有元素的节点列表(集合或者数组)appendChild()把新的子节点添加到指定节点removeChild()删除子节点replaceChild()替换子节点insertBefore()在指定的节点之前插入新的子节点createAttribe()创建属性列表createElement()创建元素节点createTextNode()创建文本节点getAttribute()返回指定的属性值setAttribute()把指定属性设置灬修改指定的值
DOM访问元素节点
方法名作用
getElementById()返回带有置顶ID的元素getElementByTagName通过返回带有制定标签名的所有元素getElementByClassName通过返回带有指定类名的元素
最后一个在IE 5,6,7,8中无效
DOM修改
修改一下内容 - 改变HTMl的内容 - 改变CSS的样式 - 改变HTMl属性 - 创建新的HTML元素 - 删除已有的HTML - 改变时间(处理程序) 修改内容的方法——innnerHTML属性 ```js document.getElementById("name").innerHTML="New text"; ``` 改变样式的几种方法 - 直接设置style属性 ```js document.getElementById("ID").style.height="100px" ```
直接设置属性
document
.getElementById("ID").setAttribute("height",100)
设置style的属性
document
.getElementById("ID").setAttribute("style","height:100px !important");
使用setProperty
document
.getElementById("ID").style
.setProperty("height","100px","important");
改变class
document
.getElementByID("ID').className="newClass"
;
设置cssText
document
.style
.cssText
="height:100px !important";
创建引入新的css样式文件
<link href
="css1.css" rel
="stylesheet" type
="text/css" id
="css"/>
function changeStyle4() {
var obj
= document
.getElementById("css");
obj
.setAttribute("href","css2.css");
}
创建新的HTML元素
- appendChild(); ```js var para=document.createElement("p"); var node=document.createTextNode("new "); pare.appendChild(node); ``` - insertBefore() 吧新元素添加到父元素的任意位置 - removeChild 删除已有的HTML元素 知道父元素,删除其中的某个子元素 - replaceChild();替换html ```js var parent=document.getElementById("div"); var child=document.getElementById("p"); parent.removeChild(child); ```
时间中文描述
onclick点击事件onload进入界面onunload离开页面事件onchange常用语输入字段的验证onmouseover鼠标指针移动到元素时触发onmouseout在鼠标离开元素时触发函数onmousedown鼠标被点击的触发事件onmouseup鼠标点击完成的触发事件