从零开始学前端:程序猿小白也可以完全掌握!—今天你学习了吗?(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里面只会返回元素节点而不会返回无效的文本节点(除非有添加文本内容)。
//无效的文本节点:指空格或换行;
在主浏览器里面,把换行和空格都视为正常的文本节点,跟普通的文本没区别。
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;
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的方法;
属于动态获取;
只要里面孩子的个数变了,都能动态地反馈出来。
tagName
//与nodeName的区别
console.log(box.childNodes[1].nodeName); //document 能返回注释节点
console.log(box.childNodes[1].tagName); //返回undefined
//区别:nodeName能返回各种各样的节点,但是tagName只能返回对象节点;
firstChild
//返回第一个子节点
//在主流浏览器返回子节点
//在低版本IE的情况下返回的是元素节点
console.log(box.firstChild);
parentNode
//返回父节点,没有兼容问题
console.log(box.parentNode);
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)
cresteElement/appendChild
创建元素与添加子节点,通常是结合起来使用的。
clone
var cloneBox = box.cloneNode(); //有两个值,默认为false。
false: //代表的是浅复制,浅复制只复制节点本身,不复制子元素的内容,只复制标签本身。
true: //深度复制,深度复制里面有什么东西的话,JS里面也是要有(比如属性,事件)。
document.body.appendChild(cloneBox);
removeChild
删除子节点(通过父级来杀,不能自杀)
var wrap = document.getElementByClassName('wrap');
box.removeChild(wrap[1]);
//如果有多个节点的话,先找到子节点之后再去找到父级
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)
二、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("文本","默认值")
Navigator对象包含有关浏览器的信息。
console.log(navigator.appName) //网景公司
console.log(navigator.cookieEnabled)//返回浏览器是否启用cookie的布尔值;
Screen对象包含有关用户屏幕的信息。
/*
window 对象
所有浏览器都支持window对象。他表示浏览器窗口。
window.screen对象在编写时可以不使用window这个前缀。
*/
//相关属性:
console.log('可用宽度:'+screen.availWidth);//1920
/*
screen.availHeight 可用的屏幕高度
属性返回访问者屏幕的高度,以像素计,减去界面特性,比如窗口任务栏。
*/
相关属性:
console.log('可用高度:'+screen.availHeight);//1040
Window Location
//对象用于获取当前页面的地址(URL),并把浏览器重定向到新的页面。
//Window Location Href
//用中文的形式,会被传为unicode码
console.log(location.href); //返回(当前页面的)整个URL;
//Window Location Pathnam
console.log(location.pathname); //返回当前URL的路径名;
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()
}
三、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();
}
四、键盘事件
//先后顺序:先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
*/