<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
</style>
</head>
<body>
<button id="xx" class="oo">按钮1</button>
<button id="xx" class="oo">按钮2</button>
<button id="xx" class="oo">按钮3</button>
<div class="dd"></div>
<span id="s"></span>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<button class="haonnan">按钮</button>
</body>
</html>
<script type="text/javascript">
//获取页面中的元素信息
// 语法都是以document(文档对象)开头
//通过标签名来获取
// 注意：通过这种方式获取到的元素是一个伪数组，要想使用某一个，必须要通过索引号来进行获取
var btn = document.getElementsByTagName('button');
// console.log(btn)
var div = document.getElementsByTagName('div');
// console.log(btn[0]) //可以获取某一个按钮
// console.log(div)
// onclick 是绑定单击事件
// 事件源：but按钮
// 事件类型（单击、双击、移入、移出、键盘、表单....）：单击事件
// 事件处理程序：function(){里面执行的代码}
btn[0].onclick = function(){
alert('单击了第一个按钮')
}
for(var i=0;i<btn.length;i++){
// console.log(btn[i])
//针对每个按钮绑定事件
btn[i].onclick = function(){
alert(123)
}
}
// 根据id来进行获取,只能获取到一个元素
var div = document.getElementById('d');
console.log(div)
// 根据class来进行获取
// 也可以获取到多个元素，返回的是一个伪数组。要想获取某一个还需要通过索引号来进行获取
var dd = document.getElementsByClassName('dd');
console.log(dd)
// 根据H5新提供的方法
// id class 标签
var a = document.querySelector('div')
var b = document.querySelector('.dd')
var c = document.querySelector('#s')
console.log(a,b,c)
// 获取到所有的li标签
var lis = document.querySelectorAll('ul li')
console.log(lis)
console.log(document.body) //获取body中的所有内容
console.log(document.documentElement) //获取整个html文档
</script>
扫一扫
3062
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
