您的位置：首页 > 其它

DOM入门

2016-07-18 16:59 267 查看

DOM入门



HTML文档可以说由节点构成的集合，DOM节点有:

元素节点：上图中
<html>
、
<body>
、
<p>
等都是元素节点，即标签。

文本节点:向用户展示的内容，如
<li>...</li>
中的JavaScript、DOM、CSS等文本。

属性节点:元素属性，如
<a>
标签的链接属性
href="http://www.imooc.com"
。

节点属性:



遍历节点树:



以上图ul为例，它的父级节点body,它的子节点3个li,它的兄弟结点h2、P。

DOM操作:



方法

getElementsByName()
方法通过元素的 
name
属性查询元素，而不是通过 id 属性。

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function getnum(){
var mynode=  document.getElementsByName('myt')       ;
alert(mynode.length);
}
</script>
</head>
<body>
<input name="myt" type="text" value="1">
<input name="myt" type="text" value="2">
<input name="myt" type="text" value="3">
<input name="myt" type="text" value="4">
<input name="myt" type="text" value="5">
<input name="myt" type="text" value="6">

<br />
<input type="button" onclick="getnum()" value="看看有几项？" />
</body>
</html>


checkbox

Check/Uncheck checkbox with javascript?

Javascript:

// Check
document.getElementById("checkbox").checked = true;

//  Uncheck
document.getElementById("checkbox").checked = false;


jQuery (1.6+):

// Check
$("#checkbox").prop("checked", true);

//  Uncheck
$("#checkbox").prop("checked", false);


jQuery (1.5-):

// Check
$("#checkbox").attr("checked", true);

//  Uncheck
$("#checkbox").attr("checked", false);


判断input的type为checkbox：

var hobby = document.getElementsByTagName("input");
for(var i=0;i<hobby.length;i++)
{
if(hobby[i].type == "checkbox")
{
hobby[i].checked = true;
}
}


getAttribute()
方法，通过元素节点的属性名称获取属性的值。

setAttribute()
方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。

节点属性

在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性 ：

nodeName : 节点的名称

nodeValue ：节点的值

nodeType ：节点的类型

一、nodeName 属性: 节点的名称，是只读的。

元素节点的 nodeName 与标签名相同

属性节点的 nodeName 是属性的名称

文本节点的 nodeName 永远是 #text

文档节点的 nodeName 永远是 #document

二、nodeValue 属性：节点的值

元素节点的 nodeValue 是 undefined 或 null

文本节点的 nodeValue 是文本自身

属性节点的 nodeValue 是属性的值

三、nodeType 属性: 节点的类型，是只读的。以下常用的几种结点类型:

元素类型节点类型
元素1
属性2
文本3
注释8
文档9
运行结果:

访问子结点childNodes



IE:

UL子节点个数:3
节点类型:1


其它浏览器:

UL子节点个数:7
节点类型:3


注意:

IE全系列、firefox、chrome、opera、safari兼容问题

节点之间的空白符，在firefox、chrome、opera、safari浏览器是文本节点，所以IE是3，其它浏览器是7，如下图所示:



如果把代码改成这样:

<ul><li>javascript</li><li>jQuery</li><li>PHP</li></ul>


运行结果:（IE和其它浏览器结果是一样的）

UL子节点个数:3
节点类型:1


firstChild
属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。

lastChild
属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。

访问父节点
parentNode


访问兄弟节点

nextSibling 属性可返回某个节点之后紧跟的节点（处于同一树层级中）。

语法：

nodeObject.nextSibling


说明：如果无此节点，则该属性返回 null。

previousSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中）。

语法：

nodeObject.previousSibling


说明：如果无此节点，则该属性返回 null。

注意: 两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点（例如，换行符号），而其它浏览器不会忽略。

解决问题方法:

判断节点nodeType是否为1, 如是为元素节点，跳过。



运行结果:

LI = javascript
nextsibling: LI = jquery


插入节点
appendChild()




插入节点
insertBefore()




删除节点
removeChild()




运行结果:

HTML
删除节点的内容: javascript


注意: 把删除的子节点赋值给 x，这个子节点不在DOM树中，但是还存在内存中，可通过 x 操作。

如果要完全删除对象，给 x 赋 null 值，代码如下:



替换元素节点
replaceChild()


<body>

<div><b id="oldnode">JavaScript</b>是一个很常用的技术，为网页添加动态效果。</div>
<a href="javascript:replaceMessage()"> 将加粗改为斜体</a>

<script type="text/javascript">
function replaceMessage(){
var oldnode=document.getElementById("oldnode");
var newnode=document.createElement("i");
newnode.innerHTML=oldnode.innerHTML
oldnode.parentNode.replaceChild(newnode,oldnode);

}
</script>

</body>


创建元素节点
document.createElement(tagName)
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航