DOM查找元素

最新推荐文章于 2024-06-04 02:03:09 发布

小欣的blogs

最新推荐文章于 2024-06-04 02:03:09 发布

阅读量661

点赞数 2

分类专栏： JavaScript

本文链接：https://blog.csdn.net/cedricdx/article/details/89341220

版权

JavaScript 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

DOM查找元素

根据ID查找节点对象:document.getElementById(id)

    返回值：(找到了)指定对象   (找不到)输出null

根据标签名查找元素:document.getElementsByTagName(tagName)

  返回值：(找到了)HTMLCollection(里面是元素对象)  
   (找不到)输出HTMLCollection[]

 注意：该方法是唯一一个既可以被document对象调用，又可以被节点对象调用的方法

根据类名查找元素:document.getElementsByClassName(className)

  返回值：(找到了)HTMLCollection(里面是元素对象)  
   (找不到)输出HTMLCollection[]

根据名称查找元素:document.getElementsByName(name)

  返回值：(找到了)HTMLCollection(里面是元素对象)  
   (找不到)输出HTMLCollection[]

例题：查找元素

<div>
	   <p>你好</p>
	   <div>888</div>
	</div>
	<div class="one"></div>
	<input type="radio" name="sex">男
	<input type="radio" name="sex">女
    

 
    <div id="box">
		<div>1</div>
		<div>2</div>
	</div>

	<div>hello</div>
	<p>world</p>
	<div>hi</div>

	<script type="text/javascript">
		var o=document.getElementsByTagName('div');
		console.log(o.length);     //3
		o[1].innerHTML='第二个'; 
				 for(var i=0;i<o.length;i++){
			console.log(i);  //0 1 2
		 }
         

         //根据类名查找元素
         var oo=document.getElementsByClassName('one');
         console.log(oo,oo.length);   //HTMLCollection [div.one] 1
         o[0].innerHTML='哈哈哈哈哈';

         var ooo=document.getElementsByName('sex');
         console.log(ooo);  //NodeList(2) [input, input]

         var cz=document.getElementsByTagName('div');
         cz[1]=innerHTML='大家好';

         var o1=document.getElementById('box');
		var ds=o1.getElementsByTagName('div');
		console.log(ds);     //HTMLCollection(2)
		ds[0].innerHTML='啊哈哈哈哈哈';
	</script>
</body>

querySelector 查找节点对象

根据指定选择器查找页面元素
选择器：CSS选择器 #box .one p

querySelectorAll：	查找有所育的对象 	返回值：NodeList

注意：若不是ID选择器，只取第一个

<body>
	<div id="box">哈哈</div>
	<div class="one">呵呵</div>
	<div class="one">嘿嘿</div>

	<div id="box1">
		<p>哈哈哈</p>
		<div>大家好</div>
	</div>

	<script type="text/javascript">
		var o=document.querySelector('#box'); //根据ID
		console.log(o);  //<div id="box">哈哈</div>

		var o1=document.querySelector('.one');//只能取一个
		console.log(o1); //<div class="one">呵呵</div>

		var os=document.querySelectorAll('#box');
		console.log(os);  //NodeList [div#box]

		var os1=document.querySelectorAll('.one');
		console.log(os1); //NodeList(2) [div.one, div.one]

	    var os2=document.querySelectorAll('div');
		console.log(os2); //NodeList(5) [div#box, div.one, div.one, div#box1, div]

		var oo=document.querySelector('#box1 div');
		console.log(oo); //<div>大家好</div>

		var oo1=document.querySelectorAll('#box1 div');
		console.log(oo1); //NodeList [div]
	</script>
</body>