您的位置：首页 > Web前端 > JavaScript

js dom元素的选取

2014-04-24 19:32 260 查看

1.获取节点：根据元素Id获取元素document.getelementById("元素Id"),值是一个object

根据元素name获取元素document.getelementByName("元素的Name")，值是一个object

根据元素标签获取获取元素document.getelementByTagName("元素标签名，比如div")，值是一个集合

2.根据已经有的节点，来获取跟他相关的节点：获取元素的第一个节点父节点.firstChild

获取最后一个节点：父节点.lastChild，值是个object

获取所有的子节点：父节点.childNodes，值是个集合

获取节点的前一个节点：兄弟节点.previousSibling，值是个object

获取节点的下一个节点：兄弟节点.nextSibling，值是个object

获取节点的父节点：子节点.parentNode，值是个object

3.创建节点：

创建元素：document.createElement("元素标签名")

4.插入节点：

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

在节点的前面添加一个节点:insertBefore("要添加的节点","节点（在此节点前面添加）")

替换一个节点：replaceChild("新的节点","将要被替换的节点")

复制节点：需要被复制的节点.cloneNode(true/false)，true复制当前节点和气子节点，false仅复制当前节点

删除节点：removeChild("删除的节点")

5.元素的属性操作：

获取属性值：节点.getAttribute("属性名")

设置属性值：节点.setAttribute("属性名","属性值")

删除属性:节点.removeAttribute("属性名")

这是网页的代码

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title></title>

<script src="jquery-1.7.1.js"></script> 

<script>

$(function () {

// 获取节点

// var qw = document.getElementsByTagName("ul");//根据元素标签获取节点

// var a = qw.item(0);

// var a = document.getElementById("qwe");// 根据Id获取节点

var qw = document.getElementsByName("zxc"); // 根据name获取节点

var a = qw.item(0);

// 有些浏览器的childNodes会把文本节点算在里面,过滤childNodes中的文本节点

for (i = 0; i < a.childNodes.length; i++) {

if (a.childNodes[i].nodeType != 1) {

a.removeChild(a.childNodes[i]);

}

}

var b = a.childNodes;// 所有的子节点

var c = a.firstChild; // 第一个子节点

var d = a.lastChild; // 最后个子节点

var e = d.previousSibling; // 获取节点的前一个节点

var f = c.nextSibling; // 取节点的下一个节点

var g = c.parentNode; // 获取节点的父节点

alert(c);

// 输出ul下的文本

for (i = 0; i < b.length; i++) {

if (b[i].nodeType == 1) {

alert(b[i].innerHTML);

}

}

// 创建节点

var h = document.createElement("span");

h.setAttribute("display", "block");

h.innerHTML = "sfdsdfsdf";

// 向ul中插入节点

a.appendChild(h);

// 向d的前面插入节点

d.insertBefore(h);

// 替换节点

a.replaceChild(h, c);

// 复制节点

var v = c.cloneNode(true)

alert(v.innerHTML);

// 获取节点的属性

var j = h.getAttribute("display");

h.removeAttribute("display");

});

</script>

</head>

<body>

<div>

<div id="gf" data-sdf="dsfsdfs">sdfsdfsd</div>

<ul id="qwe" name="zxc">

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

<li>6</li>

</ul>

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航