欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

dom查询

程序员文章站 2022-03-09 08:04:06

你喜欢哪个城市?

  • 北京
  • 上海
  • 东京
  • 首尔
  • 		<div id="total">
    			<div class="inner">
    				<p>
    					你喜欢哪个城市?
    				</p>
    
    				<ul id="city">
    					<li id="bj">北京</li>
    					<li>上海</li>
    					<li>东京</li>
    					<li>首尔</li>
    				</ul>
    
    				<br>
    				<br>
    
    				<p>
    					你喜欢哪款单机游戏?
    				</p>
    
    				<ul id="game">
    					<li id="rl">红警</li>
    					<li>实况</li>
    					<li>*飞车</li>
    					<li>魔兽</li>
    				</ul>
    
    				<br />
    				<br />
    
    				<p>
    					你手机的操作系统是?
    				</p>
    
    				<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
    			</div>
    
    			<div class="inner">
    				gender:
    				<input type="radio" name="gender" value="male"/>
    				Male
    				<input type="radio" name="gender" value="female"/>
    				Female
    				<br>
    				<br>
    				name:
    				<input type="text" name="name" id="username" value="abcde"/>
    			</div>
    		</div>
    		<div id="btnList">
    			<div><button id="btn01">查找#bj节点</button></div>
    			<div><button id="btn02">查找所有li节点</button></div>
    			<div><button id="btn03">查找name=gender的所有节点</button></div>
    			<div><button id="btn04">查找#city下所有li节点</button></div>
    			<div><button id="btn05">返回#city的所有子节点</button></div>
    			<div><button id="btn06">返回#phone的第一个子节点</button></div>
    			<div><button id="btn07">返回#bj的父节点</button></div>
    			<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
    			<div><button id="btn09">返回#username的value属性值</button></div>
    			<div><button id="btn10">设置#username的value属性值</button></div>
    			<div><button id="btn11">返回#bj的文本值</button></div>
    		</div>
    		<script>
    		var btn01 = document.getElementById("btn01")
    		btn01.onclick = function(){
    			//查找#bj节点
    			var bj = document.getElementById("bj")
    			// 通过innerHTML这个属性可以获取元素内部内容
    			alert(bj.innerHTML)
    		}
    				
    				
    		var btn02 = document.getElementById("btn02")
    		btn02.onclick = function(){
    			//查找所有li节点
    			var list = document.getElementsByTagName("li")
    			console.log(list)
    			for(var i = 0; i < list.length;i++){
    				alert(list[i].innerHTML)
    			}
    		}
    				
    		//查找name=gender的所有节点
    		var btn03 = document.getElementById("btn03")
    		btn03.onclick = function(){
    			//查找所有li节点
    			var genders = document.getElementsByName("gender")
    			// console.log(genders)
    			for(var i = 0; i < genders.length;i++){
    				alert("hello")
    			}
    		}
    				
    		//查找#city下所有li节点				
    		var btn04 = document.getElementById("btn04")
    		btn04.onclick = function(){
    			查找#city下所有li节点
    			var city = document.getElementById("city")
    			console.log(city)
    			var list = city.getElementsByTagName("li")
    			for(var i = 0; i < list.length;i++){
    				alert(list[i].innerHTML)
    			}
    		}
    
    		var btn05 = document.getElementById("btn05")
    		btn05.onclick = function(){
    			//返回#city的所有子节点
    			var city = document.getElementById("city")
    			console.log(city)
    			// 返回 #city元素下所有的子节点
    			var list = city.childNodes
    			console.log(list)
    			// 返回#city元素下所有的子元素
    			var list1 = city.children
    			console.log(list1)
    		}
    				
    		//返回#phone的第一个子节点
    		var btn06 = document.getElementById("btn06")
    		btn06.onclick = function(){
    		var phone = document.getElementById("phone")
    			console.log(phone)
    			// 返回 #phone元素下所有的子节点
    			var list = phone.childNodes
    			console.log(list)
    			// 返回#city元素下所有的子元素
    			// var list1 = phone.children
    			// console.log(list1)
    		}
    		//返回#bj的父节点
    		//返回#android的前一个兄弟节点
    		//读取#username的value属性值
    		//设置#username的value属性值
    		//返回#bj的文本值
    		}
    	</script>
    

    本文地址:https://blog.csdn.net/weixin_51958409/article/details/110221038

    相关标签: js