您现在的位置是：首页 > 技术学习 > javascript 网站首页 技术学习 javascript

DOM可以控制HTML文档里面的节点元素

HTML的DOM树结构：

DOM的节点及节点类型(nodeType)包括：

1. 文档节点 nodeType:9。
2. 元素节点 nodeType:1。
3. 文本节点 nodeType:3。
4. 属性节点 nodeType:2。
5. 注释节点 nodeType:8。

1. DOM常用方法

1-1 获取元素

1-1-1 getElementById()

document.getElementById("id名")；获取具体id名的元素；

<div id="div1">
    <p id="p1">123</p>
</div>
<script type="text/javascript">
    var oDiv = document.getElementById("div1");
    var oP = document.getElementById("p1");
    //还可以
    var oP2 = oDiv.getElementById("p1");
</script>

1-1-2 getElementsByClassName()

document.getElementsByClassName("class名"); 获取某class名下的所有元素，获得的是一个类数组，如果要访问某一个元素，需要加上下标[n];n从0开始。

<div class="test">
    <p class="test">123</p>
</div>
<div class="test"></div>
<span class="test"></span>
<script type="text/javascript">
    var aTest = document.getElementsByClassName("test");
    // 第一个可以这样写：
    var oTest = document.getElementsByClassName("test")[0];
</script>

1-1-3 getElementsByTagName()

document.getElementsByTagName("标签名"); 获取某标签的所有元素，获得的是一个类数组，如果要访问某一个元素，需要加上下标[n];n从0开始。

<div></div>
<div></div>
<div></div>
<script type="text/javascript">
    var aDiv = document.getElementsByTagName("div");
    // 第一个可以这样写：
    var oDiv = document.getElementsByTagName("div")[0];
</script>

1-1-4 getElementsByName()

document.getElementsByName("属性name的值"); 获取所有name值是该值的标签元素，获得的是一个类数组，如果要访问某一个元素，需要加上下标[n];n从0开始。

<input type="radio" name="test" value="唱歌" />
<input type="radio" name="test" value="跳舞" />
<input type="radio" name="test" value="运动" />
<script type="text/javascript">
    var aIpt = document.getElementsByName("test");
    // 第一个可以这样写：
    var oIpt = document.getElementsByName("test")[0];
</script>

1-2 创建节点

1-2-1 createElement("标签名") 创建元素节点

var oDiv = document.createElement("div");

1-2-2 createAttribute("属性名") 创建属性节点

var oDiv = document.createElement("div");
var age = document.createAttribute("age");
age.value = 18;
oDiv.setAttributeNode(age);

1-2-3 createTextNode("文本内容") 创建文本节点

var oDiv = document.createElement("div");
var myText = document.createTextNode("我是内容");
oDiv.appendChild(myText);

1-2-4 cloneNode("布尔值") 克隆节点

cloneNode()方法将为给定节点创建一个副本。这个方法的返回值是一个指向新建克隆节点的引用指针。
这个方法只有一个布尔值型的参数，它的可取值只能是true或false ，
这个参数决定着是否把被复制节点的子节点也一同复制复制到新节点里去。

var oDiv = document.createElement("div");
reference = oDiv.cloneNode(true); // 同时复制该节点的所有子孙节点
reference = oDiv.cloneNode(false); // 只复制该节点 

1-3 操作/更改节点

1-3-1 appendChild() 插入节点

父节点.appendChild("子节点"); 向节点的子节点列表的末尾添加新的子节点

var oDiv = document.getElementById("div1");
var oP = document.createElement("p");
oDiv.appendChild(oP);

1-3-2 removeChild()删除节点

父节点.removeChild("子节点"); 删除子节点。如果成功该函数返回被删除的节点，如果失败则返回 NULL。

var oDiv = document.getElementById("div1");
var oP = document.getElementById("p1");
oDiv.removeChild(oP);

1-3-3 replaceChild() 替换节点

父节点.replaceChild("新子节点","旧子节点"); 替换子节点为其他节点。如果成功该函数则返回被替换的节点，如果失败则返回 NULL。

var oDiv = document.getElementById("div1");
var oP1 = document.getElementById("p1");
var oP2 = document.createElement("p");
oDiv.replaceChild(oP2,oP1); //用oP2替换oP1

1-3-3 insertBefore() 在某节点前插入新节点

父节点.insertBefore("新子节点","指定子节点"); 指定的已有子节点之前插入新的子节点。

var oDiv = document.getElementById("div1");
var oP1 = document.getElementById("p1");
var oP2 = document.createElement("p");
oDiv.insertBefore(oP2,oP1); //用oP2替换oP1

1-4 属性操作

1-4-1 getAttribute() 获取属性

elementNode.getAttribute("属性名"); 返回某元素节点的属性值

getAttributeNode("属性名"); 返回属性

var oA = document.getElementById("a1");
oA.getAttribute("target"); // 获取该a标签的target属性值

1-4-2 setAttribute()设置/创建属性

elementNode.setAttribute("属性名","属性值"); 创建或改变某个新属性。如果指定属性已经存在,则只设置该值。

var oA = document.getElementById("a1");
oA.setAttribute("target","_self"); // 获取该a标签的target属性值

2. DOM常用属性

2-1 nodeName

name = node.nodeName; 返回一个字符串，其内容是给定节点的名字.
nodeName属性返回值：

1. 如果给定节点是: 一个元素节点 => 这个元素的名字
2. 如果给定节点是: 一个属性节点 => 这个属性的名字
3. 如果给定节点是: 一个文本节点 => 一个内容为 #text的字符串

nodeName属性是一个只读属性，只能对它进行查询(读)，不能直接对它进行设置(写)。

2-2 nodeType

nodeType :只读属性。将返回一个整数，这个数值代表着给定节点的类型。

integer = node.nodeType;

2-3 nodeValue

nodeValue 属性: 将返回给定节点的当前值。

value = node.nodeValue;
nodeValue属性返回值：

1. 如果给定节点是一个: 属性节点 => 这个属性的值
2. 如果给定节点是一个: 文本节点 => 这个文本节点的内容
3. 如果给定节点是一个: 元素节点 => null

nodeValue是一个读/写属性。
不能为元素节点的nodeValue属性设置一个值。可为文本节点的nodeValue属性设置一个值。

2-4 childNodes

childNodes 属性: 将返回一个数组，这个数组由给定元素节点的子节点构成。如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。

nodeList = 父节点.childNodes;

2-5 firstChild

firstChild 属性: 将返回一个给定元素节点的第一个节点。如果选定的节点没有子节点，则该属性返回 NULL。

第一个子节点 = 父节点.firstChild;

2-6 lastChild

lastChild 属性: 可返回文档的最后一个子节点。是一个只读属性。

最后一个子节点 = 父节点.firstChild;

2-7 nextSibling

nextSibling 属性: 可返回某个元素之后紧跟的节点(处于同一树层级中)。返回节点以节点对象返回。如果元素紧跟后面没有节点则返回 null。

下一个节点 = node.nextSibling;

2-8 parentNode

parentNode 属性: 可返回某节点的父节点。如果指定的节点没有父节点则返回 null 。

父节点 = node.parentNode;

2-9 previousSibling

previousSibling 属性: 可返回某节点之前紧跟的节点（处于同一树层级）返回节点以节点对象返回。如果没有此节点，那么该属性返回 null。

上一个节点 = node.previousSibling;

 
个人CSDN博客