从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（JS）

复习：从零开始学前端：CSSOM视图模式 — 今天你学习了吗？（JS：Day15）

前言

第十六节课：DOM、BOM、表单事件、事件捕获

一、DOM方法

childNodes
获取到所有的子节点，包括文本节点。

<div id="box">
	<div id='p1'></div>
</div>

console.log(box.childNodes)
//操作子节点；带了s，返回集合。
1.返回
	01：text
	02：ul
	03：text
解析空格text;

//注意:在低版本IE里面只会返回元素节点而不会返回无效的文本节点（除非有添加文本内容）。
		在低版本IE里面只会返回元素节点而不会返回无效的文本节点（除非有添加文本内容）。
//无效的文本节点：指空格或换行；
		在主浏览器里面，把换行和空格都视为正常的文本节点，跟普通的文本没区别。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

children
返回第一级子元素节点；
box.children
// 返回一个类数组，类数组的取值操作：[ ]下标取值；
children是一个属性，不是一个方法所以不用加（）;

nodeType
元素节点的节点类型；

<div id="box">
	<div id='p1'></div>
	<div id='p2'></div>
	<!--->
</div>
var box = document.getElementById('box');
console.log(box.childBodes[0].nodeType)  //3
console.log(box.children[0].nodeType)  //1
//不同的节点，数据类型是不一样的。比如：类数组与类组，类型就不一样
//百度找nodeType
元素节点的类型：1；
属性：2；
text文本内容：3；
注释：8；
1
2
3
4
5
6
7
8
9
10
11
12
13
14

nodeName
返回节点名称

console.log(box.children[0].nodeName);

<div id="box">
	<div id='p1'>123</div>
	<div id='p2'>123</div>
</div>

box.children[0].onclick = function(){
	alert(123)
}

//children为类数组，类数组通常有length的方法；
属于动态获取；
		只要里面孩子的个数变了，都能动态地反馈出来。
1
2
3
4
5
6
7
8
9
10
11
12
13
14

tagName

//与nodeName的区别
console.log(box.childNodes[1].nodeName);  //document 能返回注释节点
console.log(box.childNodes[1].tagName);   //返回undefined

//区别：nodeName能返回各种各样的节点，但是tagName只能返回对象节点；
1
2
3
4
5

firstChild

//返回第一个子节点
//在主流浏览器返回子节点
//在低版本IE的情况下返回的是元素节点
console.log(box.firstChild);
1
2
3
4

parentNode

//返回父节点，没有兼容问题
console.log(box.parentNode);
1
2

offsetParent

div{
		width:300px;
		height:300px;
		background-color:#90f;
}
div #box{position:absolute;}
p{background-color:#f0f;font-size:30px;}
<div id="box">
	<!--->
	<div id='p1'>123</div>
	<div id='p2'>123</div>
</div>
//返回定位父级
console.log(p2.offsetParent)
1
2
3
4
5
6
7
8
9
10
11
12
13
14

cresteElement/appendChild
创建元素与添加子节点，通常是结合起来使用的。
clone

var cloneBox = box.cloneNode();  //有两个值，默认为false。
		false：  //代表的是浅复制，浅复制只复制节点本身，不复制子元素的内容，只复制标签本身。
		true：   //深度复制，深度复制里面有什么东西的话，JS里面也是要有（比如属性，事件）。

document.body.appendChild(cloneBox);
1
2
3
4
5

removeChild
删除子节点（通过父级来杀，不能自杀）

var wrap = document.getElementByClassName('wrap');
box.removeChild(wrap[1]);
//如果有多个节点的话，先找到子节点之后再去找到父级
1
2
3

replaceChild

<div id="box">
	<div class='wrap'>wrap1</div>
	<div class='wrap'>wrap2</div>
	<div class='wrap'>wrap3</div>
	<div class='wrap'>wrap4</div>
</div>

var wrap = document.getElementByClassName('wrap')[1];
var p = document.createElement('p');
p.innerHTML = 'p0';
box.replaceChild(newnode,oldnode)
//node.replaceChild(newnode,oldnode)
1
2
3
4
5
6
7
8
9
10
11
12

二、BOM（browser object Model）浏览器对象

window对象

/*
		浏览器对象模型：
		BOM broser object Model 提供方法去操作浏览器的功能；
*/
/*
		Screen 对象包含有关客户端显示屏幕的信息。
		History 对象包含用户（在浏览器窗口中）访问过的URL。
		Location 对象包含有关当前URL的信息。
*/
console.log(window.location)

window.onblur = function(){
		console.log('切换到别的的地方去了。')
}

window.onfocus = function(){
		console.log('又切换回来了。'）
}
//警告框经常用于确保用户可以得到某些信息。
		alert（"文本"）
//确认框用于使用户可以验证或者接受某些信息。
		confirm("文本")
//提示框：经常用于提示用户在进入页面前输入某个值。
		prompt("文本","默认值")
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

Navigator对象包含有关浏览器的信息。

console.log(navigator.appName)   //网景公司
console.log(navigator.cookieEnabled)//返回浏览器是否启用cookie的布尔值；
1
2

Screen对象包含有关用户屏幕的信息。

/*
		window 对象
				所有浏览器都支持window对象。他表示浏览器窗口。
				window.screen对象在编写时可以不使用window这个前缀。
*/
//相关属性：
				console.log('可用宽度：'+screen.availWidth);//1920
/*
		screen.availHeight 可用的屏幕高度
		属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏。
*/
相关属性：
		console.log('可用高度:'+screen.availHeight);//1040
1
2
3
4
5
6
7
8
9
10
11
12
13

Window Location

//对象用于获取当前页面的地址（URL），并把浏览器重定向到新的页面。

//Window Location Href
//用中文的形式，会被传为unicode码
console.log(location.href); //返回（当前页面的）整个URL;

//Window Location Pathnam
console.log(location.pathname); //返回当前URL的路径名;

1
2
3
4
5
6
7
8
9

History

//Window Location Assign
<input type="button" value="Back">
<input type="button" value="Forward">
var input = document.getElementByTagName('input');
input[0].onclick = function () {
	window.history.back()
}
input[1].onclick = function(){
	window.history.forward()
}

1
2
3
4
5
6
7
8
9
10
11

三、onblur 失去焦点

//页面切换，也可以获取光标或失去光标；
//当前页面不会被渲染；
//轮播会报错，因为切换到别的页面，页面不会渲染到，但是定时器还是会走。

var input = document.getElementsByTagName('input')[0];

input.onfocus = function(){
	console.log('获得焦点');
}

input.onblur= function(){
	console.log('失去焦点');
}

//理论上是内容发生改变的时候才会触发；前提是得失去内容才能触发事件
input.onchange = function(){
	console.log(this.value)
}

//内容改变就会触发（能获取光标），没有任何前提；
//H5新事件，不兼容低版本IE浏览器
input.oninput =function = function(){
	console.log(this.value);
}
//focus 聚焦于某个能获取焦点的对象；
//blur  让某个呢个获得焦点的对象失去焦点；
input.onblur = function(){
	this.focus();
}
input.focus = function(){
	this.blur();
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

四、键盘事件

        //先后顺序：先down，后：up;
        input.onkey = function () {
            console.log('键盘按下')
        }
        input.onkey = function () {
            console.log('键盘抬起')
        }
        input.onkeypress = function () {
            console.log('键盘按下事件')
        }
        /*
            onkeydown 键盘按下（任何按键按下都会触发）
            onkeyup   键盘抬起（任何按键抬起都会触发）
            onkeypress 与 onkeypress的区别：
            onkeypress
                onkeypress
                    这个事件在用户按下并开放任何字母数字键时发生。系统按钮（例如，箭头键和功能键）无法得到识别。
                    console.log("🚀 ~ file: 2.键盘事件.html ~ line 28 ~ 这个事件在用户按下并开放任何字母数字键时发生。系统按钮（例如，箭头键和功能键）无法得到识别。", 这个事件在用户按下并开放任何字母数字键时发生。系统按钮（例如，箭头键和功能键）无法得到识别。)
                onkeydown
                    这个事件在用户按下任何键盘（包括系统按钮、如箭头键和功能键)dhiyoufasjeng
                */
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21