console
.
log
(
document
);
3. 通过document对象，可以实现对页面内容的修改
var
h1Obj
=
document
.
getElementById
(
"title"
);
console
.
log
(
h1Obj
);
2.
getElementsByClassName
方法：获取DOM中class值包含···的元素对象，返回值是一个类似数组的对象（类数组），这个对象可以向数组一样使用索引访问容器中的元素，也可以有length属性，但是没有数组的其他方法
因为class的值可以多用，所以Elements（元素）是复数
var
lines
=
document
.
getElementsByClassName
(
"line"
);
console
.
log
(
lines
);
3.
getElementsByTagName
方法：获取DOM中标签名为···的元素对象，返回值也是一个类数组
（选择所有的p标签）
var
paragraph
=
document
.
getElementsByTagName
(
"p"
);
console
.
log
(
paragraph
);
4.
querySelector
方法：查询DOM中第一个符合选择器的元素对象
5.
querySelectorAll
方法：查询DOM中所有符合选择器的元素对象
// 在css中样式名是通过-分隔,在js中，样式名要用驼峰命名法
title
.
style
.
color
=
"red"
;
title
.
style
.
fontSize
=
"20px"
;
// 2.
通过js修改的样式实际上是修改了元素的行内样式
（优先级）
// 改内容
//1.
textContent和innerHTML属性都用于修改元素的内容，区别是：textContent设置的内容中标签会显示为标签文本，而innerHTML中的标签会被解析为元素对象
title
.
textContent
=
"<i>js还可以修改元素的内容</i>"
;
title
.
innerHTML
=
"<i>js还可以修改元素的内容</i>"
;
//1.大部分的
html属性，都可以在js中通过元素对象的同名属性进行修改，例如a标签的href属性，img的src属性，input的placeholder属性
var
link
=
document
.
getElementById
(
"link"
);
link
.
href
=
"http://mail.163.com"
;
// class修改
//1. 对于元素的class属性，它可以设置多个值，它是一个列表形式的数据，修改时不会直接修改全部，而是添加一个class值或者删除一个已有的class值，所以class的修改不能直接改元素对象的class属性
//2. 元素对象的classList表示元素的class列表，add方法用于添加一个class值
title
.
classList
.
add
(
"c1"
);
//正确的再添加一个class值
// 3.remove 删除一个class值
title
.
classList
.
remove
(
"c3"
);
// 4.toggle,切换一个class属性值，有则删除，无则添加
title
.
classList
.
toggle
(
"c1"
);
// 5.contains，判断某个元素的class中是否包含某个值
title
.
classList
.
contains
(
"c4"
);
<!--1. html的属性可分为：html自带属性和自定义属性 -->
<!-- html自带的属性又分为通用属性和专用属性，例如id，class，title是通用属性，src，href是专用属性 -->
<!--2. html标签还可以添加自定义属性 -->
<!-- 对于自定义属性，浏览器在解析页面时会忽略这些属性 -->
<!-- 自定义属性一般用于自定义属性选择器 -->
<div
wangbin
=
"123"
></div>
//
在html标签中添加的属性叫做标签属性
// 找到这个元素对象，通过打点访问的属性时这个对象的属性
// 这两种属性有关联，但是不相等
//
对于大部分的标签属性，都可以通过同名的对象属性来设置
var
box
=
document
.
getElementById
(
"box"
);
box
.
title
=
"悬停之后显示的提示内容"
;
// 除了这大部分属性之外，其他的属性（包括所有的自定义属性），都不能通过对象打点 添加
//
通过对象打点添加的属性。仅仅是这个元素对象的属性，并不能设置到标签上
box
.
first
=
"第一个属性"
;
// 通过js给标签添加自定义属性也有专门的写法
//
setAttribute,为元素添加的标签属性，不管是自定义属性还是html自定的属性都可以通过这种方法设置.第一个参数是属性名，第二个参数是属性值（属性的值只能是字符串
）
box
.
setAttribute
(
"first"
,
"通过setAttribute添加的自定义属性"
);
// getAttribute 获得元素对象的某个标签属性（自定义和html自带属性都可以），参数是要获取的属性的名字，返回值就是获得的属性值
var
t1
=
box
.
getAttribute
(
"title"
);
console
.
log
(
t1
);
//1 对于body元素对象，可以不用查找，直接通过document.body调用
// console.log(document.body);
// 2 createElement创建一个元素对象，参数是要创建的元素的名字，返回值就是创建的元素对象
var
t1
=
document
.
createElement
(
"h1"
);
t1
.
textContent
=
"这是通过js设置的标题"
;
// 3 创建的元素必须添加到DOM中才能显示
// 元素对象 .appendChild方法表示为这个元素添加一个子元素，参数是要添加的子元素对象，被添加的子元素会排列在最后
document
.
body
.
appendChild
(
t1
);
// 创建三个li
for
(
var
i
=
0
;
i
<
3
;
i
++){
var
li
=
document
.
createElement
(
"li"
);
ul
.
appendChild
(
li
);
li
.
textContent
=
"这是li"
;
}
// 元素对象 .remove方法。从DOM中删除这个元素
// ul.remove();
// 删除元素对象的某个子元素
document
.
body
.
removeChild
(
ul
);
<!-- 监听某个元素的事件，可以为 这个元素标签添加 onxxx属性，xxx表示要监听的事件类型，属性的值就是要执行的js代码-->
<!-- onclick表示鼠标左键单击事件 -->
<!-- <div id="btn1" onclick="alert('蓝色')">蓝色</div>
-->
<!-- 1 如果事件对应的代码只有一行，就可以直接写在属性值中，如果事件对应的代码非常复杂，则可以把这段代码写成一个函数 ，写在js代码中。然后在事件代码中调用这个函数-->
<!-- <div id="btn1" onclick="btn1Click()">蓝色</div> -->
<!--2 给事件绑定事件函数时，可以传递一个全局对象event作为参数 -->
<!-- event是一个对象，里面存储着本次事件的详细信息 -->
<div
id
=
"btn1"
onclick
=
"btn1Click1()"
>
蓝色
</div>
<div
id
=
"btn2"
onclick
=
"btn1Click2()"
>
黄色
</div>
<div
id
=
"box"
></div>
<script>
// event,事件，表示某些事情发生了，例如，鼠标点击，键盘点击，窗口尺寸发生变化，网络请求完成等。前端开发属于事件驱动式开发，程序的主要任务就是针对不同的事件作出不同的响应。例如，按下按钮之后执行什么，按下回车之后执行什么。
// 元素标签属性绑定的事件函数，必须是全局域中的函数
// function btn1Click1(){
// var x = document.getElementById("box");
// x.style.border = "solid 1px blue";
// }
// function btn1Click2(){
// var x = document.getElementById("box");
// x.style.border = "solid 1px yellow";
// }
// *******************************************************
function
btn1Click
(
e
){
var
box
=
document
.
getElementById
(
"box"
);
// e 是事件对象，记录这本次事件的详细信息
// e.target 表示触发本次事件的元素
// 给多个按钮绑定事件函数时，可以绑定为同一个函数，在函数中通过e.target区分哪个按钮点击的。
// 也可以给这些按钮分别绑定不同的函数
if
(
e
.
target
.
id
==
"btn1"
){
box
.
style
.
border
=
"solid 1px blue"
;
}
else
{
box
.
style
.
border
=
"solid 1px yellow"
;
}
}
// *********************************************************
// 给元素添加事件监听的另一种方法：
// 通过元素对象添加事件监听，元素对象可以是从DOM中查找，也可以是创建的
var
btn
=
document
.
createElement
(
"button"
);
btn
.
textContent
=
"通过js添加的按钮"
;
document
.
body
.
appendChild
(
btn
);
// onclick是一个函数
// 可以通过元素对象为这个元素添加事件监听，格式为：元素对象.onxxxxx = 事件函数
// xxxx是监听的事件类型，事件函数一般写为匿名函数，当元素触发这个事件时，事件函数就会执行，自动传递event对象
btn
.
onclick
=
function
(){
alert
(
"你好"
);
}
</script>
// onkeydown键盘上某个键被按下的事件
// onkeyup,某个键弹起时的事件
document
.
body
.
onkeydown
=
function
(
e
){
// console.log("键盘上某个键被按下了")
console
.
log
(
e
);
// 通过事件对象的key或keyCode属性可以判断是哪个键被按下
if
(
e
.
keyCode
==
13
){
alert
(
"您按下了回车键"
);
}
}
// 有两个参数：第一个参数是定时器事件函数，表示需要延时执行的函数。第二个参数是延时时间，单位是毫秒
// 返回值是一个定时器编号，通过这个编号可以在定时器出发前取消定时器
var
timer
=
setTimeout
(
function
(){
alert
(
"3秒到"
);
},
3000
);
console
.
log
(
123
);
// clearTimeout函数，取消一个创建但还未触发的定时器
clearTimeout
(
timer
);
// --------------------------------------------------------\
//
setInterval，创建一个循环执行的定时器，每隔一段时间就执行一次事件函数
// 第一个参数是时间函数，第二个参数是间隔事件，单位毫秒
i
=
0
;
var
timer2
=
setInterval
(
function
(){
console
.
log
(
i
++);
},
1000
);
// 写一个按钮，当按下按钮取消
var
bnt
=
document
.
getElementById
(
"bnt"
);
btn
.
onclick
=
function
(){
clearTimeout
(
timer2
);
}
