08JavaScript之JavaScript操作DOM对象方法

最新推荐文章于 2020-10-06 20:30:42 发布

Denial_learn

最新推荐文章于 2020-10-06 20:30:42 发布

阅读量106

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/Denial_learn/article/details/100746415

版权

html 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

通过元素类型的方法来操作：

document.getElementById();//id名，在实际开发中较少使用，选择器中多用class id一般只用在顶级层存在不能太过依赖id
document.getElementsByTagName();//标签名
document.getElementsByClassName();//类名
document.getElementsByName();//name属性值，一般不用
document.querySelector();//css选择符模式，返回与该模式匹配的第一个元素，结果为一个元素；如果没找到匹配的元素，则返回null
document.querySelectorAll()//css选择符模式，返回与该模式匹配的所有元素，结果为一个类数组

所有节点都有nodeType属性，代表节点的不同类型，通过nodeType属性可以来判断节点的类型。经常使用的节点主要有以下几种类型：

Element类型（元素节点）：nodeType值为 1
Text类型（文本节点）：nodeType值为 3
Comment类型（注释节点）：nodeType值为 8
Document类型（document节点）：nodeType值为 9；其规定的一些常用的属性有
document.body document.head 分别为HTML中的 <body><head>
document.documentElement为标签
所有的节点都有 hasChildNodes()方法判断有无子节点有一个或多个子节点时返回true】

通过一些属性可以来遍历节点树：

parentNode//获取所选节点的父节点，最顶层的节点为#document
childNodes //获取所选节点的子节点们
firstChild //获取所选节点的第一个子节点
lastChild //获取所选节点的最后一个子节点
nextSibling //获取所选节点的后一个兄弟节点列表中最后一个节点的nextSibling属性值为null
previousSibling //获取所选节点的前一兄弟节点列表中第一个节点的previousSibling属性值为null

基于元素节点树的遍历（遍历元素节点树）：

parentElement　//返回当前元素的父元素节点（IE9以下不兼容）
children // 返回当前元素的元素子节点
firstElementChild //返回的是第一个元素子节点（IE9以下不兼容）
lastElementChild //返回的是最后一个元素子节点（IE9以下不兼容）
nextElementSibling //返回的是后一个兄弟元素节点（IE9以下不兼容）
previousElementSibling //返回的是前一个兄弟元素节点（IE9以下不兼容）

示例：

1、DOM节点

		<img src="images/fruit.jpg" alt="水果" id="fruit"/>
		<h1>喜欢的水果</h1>
		<p>DOM应用</p>

节点还包括文本节点，例如空格或换行
	<script type="text/javascript">
 		var img = document.getElementById("fruit");
        alert(img.parentNode.innerHTML);
//alert(img.parentNode.innerText);
 		var body = document.getElementsByTagName("body")[0];
		//alert(body.childNodes[3].innerHTML);
 		//alert(body.firstChild.nextSibling.nextSibling.nextSibling.innerHTML);
body.childNodes：body下面的所有子节点
for (var i = 0; i < body.childNodes.length; i++) {
 		if (body.childNodes[i].nodeType == 1) {
               alert(body.childNodes[i].innerHTML+"111111");
        }
        else if (body.childNodes[i].nodeType == 3) {
               alert(body.childNodes[i].nodeValue+"33333");
        }

}
 		//alert(body.firstElementChild.nextElementSibling.nextElementSibling.innerHTML);
	</script>

2、访问节点

<section id="news">
		<header>京东快报<a href="#">更多 > </a></header>
		<ul>
			<li><a href="#">志玲姐姐：墨镜300减30</a></li>
			<li><a href="#">京东无锡馆正式启动</a></li>
			<li><a href="#">99元抢平板！品牌配件199-100</a></li>
			<li><a href="#">节能领跑京东先行</a></li>
			<li><a href="#">高洁丝实力撩货，领券五折</a></li>
		</ul>
	</section>
<script>
	var obj = document.getElementById("news");
	//var str = obj.lastChild.firstChild.innerHTML;
	//var str=obj.lastChild.lastChild.previousSibling.previousSibling.innerHTML;
	//var str=obj.lastElementChild.firstElementChild.innerHTML||obj.lastChild.firstChild.innerHTML;
	//var str=obj.lastElementChild.lastElementChild.innerHTML;
	alert(str);

</script>

3、节点信息

<ul id="nodeList"><li>nodeName</li><li>nodeValue</li><li>nodeType</li></ul><p></p>
<script>
    var nodes=document.getElementById("nodeList");
    var type1=nodes.firstChild.nodeType;             //1
    var type2=nodes.firstChild.firstChild.nodeType;     //3
    var name1=nodes.firstChild.firstChild.nodeName;   //#text
    var str=nodes.firstChild.firstChild.nodeValue;       //nodeName
    var con="type1："+type1+"<br/>type2："+type2+"<br/>name1："+name1+"<br/>str："+str;
    document.getElementById("nodeList").nextSibling.innerHTML=con;
</script>

要分清元素的value属性和nodeValue 不一样，nodeValue适用于“文本节点”和“属性节点”；对应“文档节点”和“标签节点”不起作用

Denial_learn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
08JavaScript之JavaScript操作DOM对象方法

通过元素类型的方法来操作：document.getElementById();//id名，在实际开发中较少使用，选择器中多用class id一般只用在顶级层存在不能太过依赖iddocument.getElementsByTagName();//标签名document.getElementsByClassName();//类名document.getElementsByName();/...
复制链接

扫一扫