<html>
<head>
</head>
<body>
<div id="container">
<div class="box-item">
<p>段落 1</p>
</div>
<div class="box-item">
<p>段落 2</p>
<ul id="list">
<li class="list-item"> <a href="#">baidu</a></li>
<li class="list-item"> <a href="#">tencent</a></li>
<li class="list-item"> <a href="#">alibaba</a></li>
</ul>
</div>
<input type="radio" name="cityname" value="北京"> 北京
<input type="radio" name="cityname" value="上海"> 上海
</div>
</body>
<script>
var get_container = document.getElementsByClassName("box-item");
console.log(get_box_items);
console.log(get_box_items[0]);
console.log(get_box_items[1]);
/*
用标签名选
*/
var get_eles_TN = document.getElementsByClassName("p");
console.log(get_eles_TN);
console.log(get_eles_TN[0]);
console.log(get_eles_TN[1]);
/*
用name属性选
*/
var get_eles_name = document.getElementsByClassName("cityname");
console.log(get_eles_name);
console.log(get_eles_name[0]);
console.log(get_eles_name[1]);
/*
用选择器选择元素
*/
var get_css_sel = document.querySelector("#list");
console.log(get_css_sel);
//如果该选择器对应的有多个元素，querySelector 查询的结果是第一个元素
var get_css_sel = document.querySelector(".list-item");
console.log(get_css_sel);
//querySelectorAll 查询所有复合条件的元素
var get_css_sel = document.querySelector(".list-item");
console.log(get_css_sel);
console.log(get_css_sel[0]);
console.log(get_css_sel[1]);
console.log(get_css_sel[2]);
</script>
</html>
