Web前段——DOM

HTML DOM对象————方法属性

1. 一些常用的HTML-DOM方法

• getElementByID(id)-获取带有指定节点(元素)
• appendChild(node)-插入新的子节点(元素)
• removeChild(node)-删除子节点元素

---

2. 一些常用的HTML-DOM属性

• innerHTML - 节点（元素）的文本值
• parentNode -节点（元素）的父节点
• childNode - 节点（元素）的父节点
• attributes - 节点（元素）的属相节点

---

3. 举例:

<script>
var pare=document.createElement("p");//创建一个新的<p>标签
var node=document.getElement.createTextNode("这是新的段落"); //新建一个内容
pare.appendChild(node);//把内容添加给p标签
//把p标签添加给id为div的标签
var element =document.getElementById("div");
element.appendChild(pare);
</script>

---

一些DOM的对象方法

methed	describe
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	鼠标点击完成的触发事件