HTML Dom
======================================================================================
一.
HTML Dom 方法
-------------------------------------------------------------------------------------------------------------------------------------------------------
1.getElementById()返回带有指定 ID 的元素。
var element=document.getElementById("直接写id名");
2.getElementsByTagName()返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
3.getElementsByClassName()返回包含带有指定类名的所有元素的节点列表。
4.appendChild()把新的子节点添加到指定节点。
5.removeChild()删除子节点。
6.replaceChild()替换子节点。
7.insertBefore()在指定的子节点前面插入新的子节点。
8.createAttribute()创建属性节点。
9.createElement()创建元素节点。
10.createTextNode()创建文本节点。
11.getAttribute()返回指定的属性值。
12.setAttribute()把指定属性设置或修改为指定的值。
13.appendChild() 将新元素作为父元素的最后一个子元素进行添加。
14.insertBefore() 在您指定的已有子节点之前插入新的子节点
node.insertBefore(newnode,existingnode)
node:您插入的节点-----插入到哪个节点面
newnode：必需。需要插入的节点对象。--插入的节点对象
existingnode：可选。在其之前插入新节点的子节点。如果未规定，则 insertBefore 方法会在结尾插入 newnode。-----node节点里面会有很多子节点，需要插入哪个子节点前面。
15.removechild() 删除节点----如果要删除节点，必须清楚该节点的父元素，或者使用parentNode属性来查找其父元素
parentNode.removeChild(deleteNode);
16.replaceChild（） 替换HTML元素
parentNode.replaceChild(newNode, replaceNode);
二.
HTML Dom 属性
------------------------------------------------------------------------------------------------------------------------------------------------------
1.innerHTML - 获取节点（元素）的内容--经常用于改变元素内容
document.getElementById("p").innerHTML = "替换的内容";
2.nodeName -规定节点的名称
nodeName 是只读的
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 与属性名相同
文本节点的 nodeName 始终是 #text
文档节点的 nodeName 始终是 #document
3.nodeValue - 规定节点的值
元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值
4.nodeType - 返回节点的类型
5.parentNode - 节点（元素）的父节点
6.childNodes - 返回节点的子节点集合，以 NodeList 对象
7.attributes - 节点（元素）的属性节点
8.lastChild - 返回列表中的最后一个子节点
三. HTML Dom 事件
-----------------------------------------------------------------------------------------------------------------------------------------------------
1.οnclick="" - 点击事件
2.onload -页面加载时执行-可用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页
<script>
function checkCookies()
{
if (navigator.cookieEnabled==true)
{
alert("Cookies are enabled")
} else {
alert("Cookies are not enabled")
}
}
</script>
3.onchange --常用于输入字段的验证。当输入框失去焦点时。
4.onmouseover -鼠标划入时执行，ommouseout - 鼠标划出时执行
5.onmousedown -鼠标按钮被点击时执行， onmouseup - 鼠标按钮松开时执行
<script>
function whichButton(event){
var btnNum = event.button;
if (btnNum==2)
{
alert("您点击了鼠标右键！")
} else if (btnNum==0) {
alert("您点击了鼠标左键！")
} else if(btnNum==1) {
alert("您点击了鼠标中键！");
} else {
alert("您点击了" + btnNum+ "号键，我不能确定它的名称。");
}
}
</script>
<body οnmοusedοwn="whichButton(event)">
<p>请在文档中点击鼠标。一个消息框会提示出您点击了哪个鼠标按键。</p>
</body>
扫一扫
8125
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
