js dom元素的选取

最新推荐文章于 2023-01-24 13:13:44 发布

u010032648

最新推荐文章于 2023-01-24 13:13:44 发布

阅读量930

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/u010032648/article/details/24431689

版权

JS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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>

u010032648

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js dom元素的选取

1.获取节点：根据元素Id获取元素document.getelementById("元素Id"),值是一个object根据元素name获取元素document.getelementByName("元素的Name")，值是一个object根据元素标签获取获取元素document.getelementByTagName("元素标签名，比如div")，值是一个集合2.根据已经有的节点，来获取
复制链接

扫一扫