获取页面元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>hello</div>
<div id="main">world</div>
<div>heima</div>
<p id='p'>test</p>
<script>
// document 文档对象
// get 获取 Element 元素 By 根据 Id 标示
//
// 如果页面上没有对应的id，此时返回null
//
//
// div -> HTMLDivElement
// p -> HTMLParagraphElement
var main = document.getElementById('p');
// console.log(main);
// console.log('abc');
//
// 打印对象
console.dir(main);
//
// 对象是有类型的
// var arr = new Array();
// console.dir(arr);
</script>
</body>
</html>获取页面元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
var divs = document.getElementsByTagName('div');
console.log(divs.length);
</script>
</head>
<body>
<div>hello</div>
<div id="main">world</div>
<div>heima</div>
<p>heihei</p>
<script>
// console.log(divs.length);
// HTMLCollection 集合 伪数组
// var divs = document.getElementsByTagName('div');
// console.log(divs);
// for (var i = 0; i < divs.length; i++) {
// // console.log(divs[i]);
// // divs 中的每一个元素是什么类型？
// // divs 中的每一个元素都是对象 都是 HTMLDivElement
// }
// 注意：getElementsByTagName() 获取到的集合是动态集合
// getElementsByTagName()
//
// var spans = document.getElementsByTagName('span');
// console.log(spans);
//
</script>
</body>
</html>获取页面元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="container">
<div>11111</div>
<div>22222</div>
<p>ppppp</p>
<span>span</span>
</div>
<div>hello</div>
<div id="main">world</div>
<div>heima</div>
<p>heihei</p>
<span>111</span>
<script>
var container = document.getElementById('container');
var divs = container.getElementsByTagName('div');
console.log(divs);
</script>
</body>
</html>
获取页面元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='main'></div>
<div name='main'></div>
<div class='a'></div>
<div class='a'></div>
<p class='a'></p>
<script>
// 根据标签的name属性获取元素
// document.getElementsByName()
// var divs = document.getElementsByName('main');
// console.log(divs);
//
//
// 根据标签的class属性获取元素
// 浏览器兼容性 IE9以后才支持的
// document.getElementsByClassName();
//
//
// query 查询
// Selector 选择器
// 根据选择器来查找元素
// document.querySelector();
// var main = document.querySelector('#main');
// console.log(main);
//
//
// 只能获取到一个元素
// var element = document.querySelector('.a');
// console.log(element);
//
//
//
// var elements = document.querySelectorAll('.a');
// console.log(elements);
//
//
// 都是根据选择器来获取元素
// 浏览器兼容性问题 IE8以后才执行
//
// 只会返回第一个匹配到的元素
// querySelector()
// 返回所有匹配到的元素
// querySelectorAll()
</script>
</body>
</html>
事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" id="btn" value="点我">
<div id="main">1111</div>
<script>
// 事件：当什么时候做什么事情
// 触发-响应
//1 获取按钮
var btn = document.getElementById('btn');
//2 给按钮注册事件
//事件名称 click
//事件源：谁触发的事件
//事件处理函数：
btn.onclick = function () {
alert('别点我，疼');
}
// 给div注册事件
var div = document.getElementById('main');
div.onclick = function () {
alert('我是div');
}
</script>
</body>
</html>点击按钮切换图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" value="点我" id="btn">
<br>
<img src="images/a.jpg" id="mv" alt="" width="400" height="300">
<script>
// 1 获取元素
var btn = document.getElementById('btn');
var mv = document.getElementById('mv');
// 2 给按钮注册事件
var flag = 1; // 当flag的值是1 的时候 对应a.jpg 当flag的值是2的时候 对应 b.jpg
btn.onclick = function () {
// 3 切换图片
if (flag === 1) {
mv.src = 'images/a.jpg';
flag = 2;
} else if (flag === 2) {
mv.src = 'images/b.jpg';
flag = 1;
}
}
</script>
</body>
</html>
设置文本框的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input id="btn" type="button" value="获取文本框的值">
<script>
// 1 当页面加载完毕，给所有的文本框赋值
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
// 根据type属性 判断是否是文本框
if (input.type === 'text') {
input.value = i;
}
}
// 2 当点击按钮的时候，获取所有文本框的值，并使用 | 分割输出
// 0|1|2
var btn = document.getElementById('btn');
btn.onclick = function () {
var array = [];
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
// 判断是否是文本框
if (input.type === 'text') {
array.push(input.value);
}
}
console.log(array.join('|'));
}
</script>
</body>
</html>
表单元素的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" value="按钮" id="btn">
<input type="button" value="设置文本框的值" id="btn1">
<br>
<input type="text" id="txt" value='123'>
<script>
// 获取元素
var btn = document.getElementById('btn');
// 注册事件
btn.onclick = function () {
var txt = document.getElementById('txt');
console.log(txt.value);
console.log(txt.type);
// 当html中的标签的属性，只有一个值的时候
// DOM中对应的元素的属性值是布尔类型
console.log(txt.disabled);
txt.disabled = true;
}
var btn1 = document.getElementById('btn1');
btn1.onclick = function () {
var txt = document.getElementById('txt');
// 设置文本框中的内容
txt.value = 'hello world';
}
</script>
</body>
</html>
设置文本框的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input id="btn" type="button" value="获取文本框的值">
<script>
// 1 当页面加载完毕，给所有的文本框赋值
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
// 根据type属性 判断是否是文本框
if (input.type === 'text') {
input.value = i;
}
}
// 2 当点击按钮的时候，获取所有文本框的值，并使用 | 分割输出
// 0|1|2
var btn = document.getElementById('btn');
btn.onclick = function () {
var s = '';
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
// 判断是否是文本框
if (input.type === 'text') {
s += input.value + '|';
}
}
// 把最后一个| 去掉
s = s.substr(0, s.length - 1);
console.log(s);
}
</script>
</body>
</html>非表单元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a id="link" href="http://www.baidu.com" title="我是百度">百度</a>
<img id="mv" src="images/a.jpg" alt="美女">
<script>
var link = document.getElementById('link');
var mv = document.getElementById('mv');
// 获取DOM对象的属性值
console.log(link.id);
console.log(link.href);
console.log(link.title);
console.log(mv.id);
console.log(mv.src);
console.log(mv.alt);
// 设置DOM对象的属性
link.href = 'http://www.google.com';
link.title = 'google';
</script>
</body>
</html>点击按钮隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box {
background-color: red;
width: 200px;
height: 200px;
}
.show {
display: block;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<input type="button" id="btn" value="隐藏">
<br>
<div id="box" >
</div>
<script>
//1 获取元素
var btn = document.getElementById('btn');
//2 给按钮注册事件
btn.onclick = function () {
//3 控制div的显示隐藏
var box = document.getElementById('box');
// 为什么DOM对象的对应的标签的class属性的名字叫做className ，应为class 在js中是关键字
// 关键字不可以作为变量或者属性的名字
box.className = 'hidden';
// 如何设置按钮对应的元素的属性
// btn.value = '显示';
this.value = '显示';
}
// this的几种情况
// 1 普通函数中的this -> window
// 2 构造函数中的this -> 是当前构造函数创建的对象
// 3 方法中的this -> 方法所属的对象
// 4 事件处理函数中的this -> 事件源，谁调用的该事件this就指向谁
//4 改变按钮中的文字
</script>
</body>
</html>
点击按钮隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box {
background-color: red;
width: 200px;
height: 200px;
}
.show {
display: block;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<input type="button" id="btn" value="隐藏">
<br>
<div id="box" >
</div>
<script>
//1 获取元素
var btn = document.getElementById('btn');
//2 给按钮注册事件
// isShow记录了box的状态，true 显示 ，false 隐藏
var isShow = true;
btn.onclick = function () {
//3 控制div的显示隐藏
var box = document.getElementById('box');
if (isShow) {
// 为什么DOM对象的对应的标签的class属性的名字叫做className ，应为class 在js中是关键字
// 关键字不可以作为变量或者属性的名字
box.className = 'hidden';
// 如何设置按钮对应的元素的属性
// btn.value = '显示';
this.value = '显示';
isShow = false;
} else {
box.className = 'show';
this.value = '隐藏';
isShow = true;
}
}
//4 改变按钮中的文字
</script>
</body>
</html>
a标签的点击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a id="link" href="http://www.baidu.com">百度</a>
<script>
var link = document.getElementById('link');
link.onclick = function () {
alert('点击我了');
// 取消a标签的默认行为（跳转到href）
return false;
}
</script>
</body>
</html>美女相册的实现
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
font-family: "Helvetica","Arial",serif;
color: #333;
background-color: #ccc;
margin: 1em 10%;
}
h1 {
color: #333;
background-color: transparent;
}
a {
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
ul {
padding: 0;
}
li {
float: left;
padding: 1em;
list-style: none;
}
#imagegallery {
}
#imagegallery a {
margin: 0px 20px 20px 0px;
padding: 0px;
display: inline;
}
#imagegallery a img {
border: 0;
}
</style>
</head>
<body>
<h2>
美女画廊
</h2>
<div id="imagegallery">
<a href="images/1.jpg" title="美女A">
<img src="images/1-small.jpg" width="100px" alt="美女1" />
</a>
<a href="images/2.jpg" title="美女B">
<img src="images/2-small.jpg" width="100px" alt="美女2" />
</a>
<a href="images/3.jpg" title="美女C">
<img src="images/3-small.jpg" width="100px" alt="美女3" />
</a>
<a href="images/4.jpg" title="美女D">
<img src="images/4-small.jpg" width="100px" alt="美女4" />
</a>
</div>
<div style="clear:both"></div>
<img id="image" src="images/placeholder.png" alt="" width="450px" />
<p id="des">选择一个图片</p>
<script>
//1 获取到所有的a标签
var imagegallery = document.getElementById('imagegallery');
var links = imagegallery.getElementsByTagName('a');
//2 给所有的a标签注册事件
for (var i = 0; i < links.length; i++) {
// 所有的a标签对应的元素
var link = links[i];
// 注册事件
link.onclick = function () {
//4 切换图片
// 获取占位的大`的img标签
var image = document.getElementById('image');
// 把img标签的src属性 设置为当前点击的a标签的href
image.src = this.href;
//5 设置p标签的内容
var des = document.getElementById('des');
// 当前点击的a标签的title属性
// this.title
// 如何设置p标签中显示的内容
// console.dir(des);
des.innerText = this.title;
//3 取消a的默认行为
return false;
}
}
// 当循环结束之后 link是谁？？
// link 是最后一个a标签
// console.log(link);
</script>
</body>
</html>innerHTML和innerText
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box">
我一个div
<span>这是一个span</span>
</div>
<b>123</b> "
<b>
1231231 abadf
<script>
var box = document.getElementById('box');
// box.id
// console.dir(box);
// // innerHTML innerText
// // 获取开始标签和结束标签之间的内容
// //
// // innerHTML 获取内容的时候，如果内容中有标签，会把标签页获取到
// // 原封不动把内容获取到
// console.log(box.innerHTML);
// // innerText 获取内容的时候，如果内容中有标签，会把标签过滤掉
// // innerText 会把前后的换行和空白都去掉
// console.log(box.innerText);
// 设置标签之间的内容
// box.innerHTML = ''; // 清空内容
// 通过innerHTML 设置内容，如果内容中带标签，会以HTML的方式来解析
// box.innerHTML = '<b>可爱</b>程序猿';
//
// 通过innerText 设置内容，如果内容中带标签，在网页上会把标签显示出来
box.innerText = '<b>可爱</b>程序猿';
</script>
</body>
</html>
innerText和textContent
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box">
我是一个box
<b>hello</b>
</div>
<script>
// innerText 最早出现在IE浏览器中
//
// 浏览器兼容问题
//
// 老版本的firefox浏览器不支持innerText
// 2016的时候 已经把innerText 在DOM中规定为正式的标准属性
//
// textContent
var box = document.getElementById('box');
// 都会把标签过滤
// 前后的空白和一些换行去掉
console.log(box.innerText);
// 原封不动的把内容输出
console.log(box.textContent);
</script>
</body>
</html>
兼容处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box">
hello
</div>
<script>
// // 如何知道。浏览器是否支持元素的某个属性
// var box = document.getElementById('box');
// // 当属性不存在的时候返回的是 undefined
// console.log(typeof box.a);
// // 当属性存在的时候返回的是 该属性的类型
// console.log(typeof box.id);
var box = document.getElementById('box');
console.log(getInnerText(box));
// 处理innerText的兼容性问题
function getInnerText(element) {
// 判断当前浏览器 是否支持元素的innerText属性，支持innerText 使用element.innerText获取内容
// 如果不支持innerText属性，使用element.textContent获取内容
if (typeof element.innerText === 'string') {
return element.innerText;
} else {
return element.textContent;
}
}
// box.innerHTML = 'hello world';
// 设置内容的时候
// innerText(textContent) 当设置不含标签的内容的时候应该使用innerText，效率高
// innerHTML
</script>
</body>
</html>