JavaWeb笔记---JavaScript基础知识4(js中的DOM 查询练习)_javascript请输入你最喜欢的城市-优快云博客

本文探讨了用户对不同城市的偏好、经典单机游戏的喜好以及手机操作系统的分布，通过交互式查询演示了HTML/CSS/JavaScript在网页元素操作中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

按照要求进行查询

<body>
<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>
</body>

<script type="text/javascript">
	window.onload = function(){
		//1.查找#bj节点
		var bt1 = document.getElementById("btn01");
		bt1.onclick = function () {
		    var num = document.getElementById("bj");
		    alert(num.innerHTML);
		}
		//2.查找所有li节点
		document.getElementById("btn02").onclick = function () {
			var li_lists = document.getElementsByTagName("li");
			for(var i = 0; i < li_lists.length; i++){
			    alert(li_lists[i].innerHTML);
			}
        }
		//3.查找name=gender的所有节点
		document.getElementById("btn03").onclick = function () {
		    var gender_all = document.getElementsByName("gender");
		    alert(gender_all.length);
		}
		//4.查找#city下所有li节点
		document.getElementById("btn04").onclick = function () {
		    var city_li = document.getElementById("city").getElementsByTagName("li");
		    alert(city_li.length);

		}

		//5.返回#city的所有子节点
        document.getElementById("btn05").onclick = function () {
            var city_li = document.getElementById("city").childNodes;
            alert(city_li.length);
        }

		//6.返回#phone的第一个子节点
        document.getElementById("btn06").onclick = function () {
            var city_li = document.getElementById("phone").firstChild;
            alert(city_li.innerHTML);
        }

		//7.返回#bj的父节点
        document.getElementById("btn07").onclick = function () {
            var city_li = document.getElementById("bj").parentNode;
            alert(city_li.innerHTML);
        }

		//8.返回#android的前一个兄弟节点
        document.getElementById("btn08").onclick = function () {
            var city_li = document.getElementById("android").previousSibling;
            alert(city_li.innerHTML);
        }
		//9.读取#username的value属性值
        document.getElementById("btn09").onclick = function () {
            var city_li = document.getElementById("username").previousSibling;
            alert(city_li.length);
        }

		//10.设置#username的value属性值
        document.getElementById("btn10").onclick = function () {
            document.getElementById("username").value = "詹姆斯";

        }

		//11.返回#bj的文本值
        document.getElementById("btn11").onclick = function () {
            var city_li = document.getElementById("bj").innerHTML;
            alert(city_li);
        }

	};
</script>
</head>