1、节点概述
节点就是浏览器为了管理页面上各种内容所分配的一个对象，最终这个对象会组合成为树形结构。每一个对象 内置都有相关的一些属性方法 可以使用控制对应的内容
2、节点类型
文本节点
注释节点
属性节点
元素节点(标签 dom对象)
3、节点属性
1、nodeName 节点名称 元素节点是大写的标签名称
2、nodeType 节点类型
3、nodeValue 节点的值
4、节点获取
1、childNodes 获取所有的子节点
2、attributes 获取属性的属性节点
3、children 获取所有的子元素节点
4、parentElment 获取父级节点
5、节点创建
docuemnt.createElement 创建元素节点 返回的是dom对象
6、节点追加
父元素的dom对象.appendChild(dom对象) 具备剪切
父元素的dom对象.insertBefore(dom对象,加入位置的dom对象)
7、替换
父元素的dom对象.replaceChild(dom对象,旧的dom对象)
8、克隆
被复制的dom对象.cloneNode(true/false)
9、删除节点
父元素的dom对象.removeChild(dom对象)
typora-root-url: img
获取元素宽高
<style>
div{ width: 100px; height: 100px; padding: 10px; border: 5px solid red;}
</style>
<div></div>
<script>
var divDom = document.querySelector('div');
// 1、获取到内容的尺寸 结果是包含px单位
console.log(window.getComputedStyle(divDom).width);
// 2、clientWidth/clientHeight 获取到可视区的尺寸 内容+padding 并且返回的结果 是数字
console.log(divDom.clientWidth);
// divDom.clientWidth = '200px' clientWidth/clientHeight 属于只读的属性 如果需要修改尺寸 可以使用dom对象.style.width/padding
// 3、offsetWidth/offsetHeight 内容+padding+border的尺寸 返回 不带px单位 也是只读属性
console.log(divDom.offsetHeight);
</script>
获取定位偏移量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.one {
width: 200px;
height: 200px;
background-color: green;
position: relative;
}
.two {
width: 100px;
height: 100px;
background-color: yellow;
position:absolute;
top:20px;
left:30px
}
</style>
</head>
<body>
<div class="one" >
<div class="two">
</div>
</div>
<script>
// 1、每一个元素都有一个相对的定位元素，如果没有自己设置过 相对于body定位
console.log(document.querySelector('.two').offsetParent);
// 获取相对于左侧的距离
console.log(document.querySelector('.two').offsetLeft);
// 相对于上侧的距离
console.log(document.querySelector('.two').offsetTop);
</script>
</body>
</html>
获取滚动宽高
1、属性
scrollHeight 元素滚动区域高度
scrollWidth 元素滚动区域宽度
scrollLeft：水平滚动条移动距离
scrollTop ：垂直滚动条移动距离
2、使用示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.small { width: 300px; height: 300px; overflow: scroll;}
.big{ width: 600px; height: 600px;}
</style>
</head>
<body>
<div class="small">
<div class="big"></div>
</div>
<button>按钮</button>
<script>
document.querySelector('button').onclick = function(){
var smallDom = document.querySelector('.small');
//获取到整个的宽度，不是以small 计算 而是以内容中最大的宽度计算
console.log(smallDom.scrollHeight);
// 获取到滚动的距离
console.log(smallDom.scrollTop);
console.log(window.getComputedStyle(smallDom).height)
}
// 如果 完整的宽度 = 内容的宽度 + 滚动的距离 就证明已经到底
// 部分情况下可能永远不相等 也可能到底了还偏差1px 解决办法 取整
</script>
</body>
</html>
3、许可协议案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#big{
width: 620px;
height: 300px;
overflow: scroll;
}
#small{
width: 600px;
height: 600px;
background-color: #eee;
}
</style>
<script>
window.onload = function(){
var bigDom = document.querySelector('#big');
var agreementDom = document.querySelector('#agreement');
bigDom.onscroll = function(){
var height = parseInt(window.getComputedStyle(this).height);
// 判断是否已经到底部
(bigDom.scrollHeight == bigDom.scrollTop + height) && agreementDom.removeAttribute('disabled');
}
agreementDom.onclick = function(){
// 将disabled 设置为布尔值更加方便
document.querySelector('#go').disabled = !this.checked
}
}
</script>
</head>
<body>
<div id="big">
<div id="small">
欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。
</div>
</div>
<input type="checkbox" id="agreement" disabled="">同意协议
<input type="button" id="go" value="去注册" disabled="">
</body>
</html>
事件对象
获取事件对象
事件对象是用于记录事件触发的环境相关的信息。事件对象是系统所提供的对象，只要获取到对象去使用即可
<button>按钮</button>
<script>
// 事件处理程序这个函数时由系统在进行调用 按照W3C浏览器标准 在调用事件处理程序时会自动传递一个对象(事件对象)
document.querySelector('button').onclick= function(e){
// e就是事件对象
// console.log(e)
// IE低版本中事件对象 在window下
// console.log(window.event);
// 短路写法 先判断e变量是否为真，如果为假就将window.event变量赋值给event 变量
var event = e || window.event;
console.log(event);
}
</script>
按键码
1、基本使用
document.onkeydown = function(e){
var event = e || window.event;
console.log(event);
// 获取按键码
console.log(event.key,event.keyCode,event.which);
console.log('键盘按下')
}
2、组合按键
//事件对象中可以支持ctrl、alt、shift按键与其他按键的组合
document.onkeydown = function(e){
var event = e || window.event;
console.log(event);
// 获取按键码
// console.log(event.key,event.keyCode,event.which);
// 组合按键 alt ctrl shift 三个按键 分别使用altKey、ctrlKey、shiftKey标识是否按下
// 判断是否使用ctel+c按键
if(event.ctrlKey && event.key == 'c'){
console.log('游戏结束')
}
// console.log('键盘按下')
}
打字游戏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body,
html {
height: 100%;
}
span {
width: 40px;
height: 40px;
background-color: red;
color: white;
border-radius: 50%;
display: block;
text-align: center;
line-height: 40px;
font-size: 24px;
font-weight: bold;
position: absolute;
top: 0;
left: 0
}
</style>
</head>
<body>
<p>得分：<b>0</b></p>
<script src="common.js"></script>
<script>
/**
* 生成随机数
* @param {Number} min 开始数字
* @param {Number} max 结束数字
* @param {Boolean} hasEnd 是否包含结束位置 true包含 否则 不包含
* @returns {Number}
*/
function makeRandom(min, max, hasEnd) {
// return Math.floor(Math.random()*(max-min+hasEnd?1:0)+min);
if (hasEnd) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
return Math.floor(Math.random() * (max - min) + min);
}
/**
* 获取元素的样式
* @param {Element} elem 需要获取样式元素的DOM对象
* @param {String} attr 需要获取的样式名称
*/
function getStyle(elem, attr) {
if (window.getComputedStyle) {
// 证明 window对象下存在 getComputedStyle属性的(方法) 所以就是满足w3c标准的浏览器
// 因为attr 是变量 window.getComputedStyle(elem)的到的是对象 所以 需要使用数组语法
return window.getComputedStyle(elem)[attr];
}
// 代码执行到这一行 绝对证明 是IE的低版本
return elem.currentStyle[attr];
}
/**
* 批量设置样式
* @param {Document} elem 元素dom对象
* @param {Object} options 对象格式 表示具体设置的样式信息 属性名称是样式名称，属性值是设置的样式值
* @returns {String}
*/
function setStyle(elem, options) {
for (var key in options) {
elem.style[key] = options[key];
}
}
/*
思路
1、无干扰的情况下 需要实现 控制一个字符向下掉落
1、创建span标签 随机生产出内容
2、随机控制span标签的left值
3、需要设置定时器反复修改span 标签的 top值。一旦高度达到底部了需要销毁 销毁之后重新再来
2、当用户在输入内容时如果相同的重新开始
1、绑定键盘按下事件
2、一旦事件触发 使用生产的随机字符与按下的进行比较 如果相同 重新生成字符
*/
// 保存span标签的dom对象
var spanDom = null;
//保存定时器标识
var timer;
function createSpan() {
// 使用全局变量存储 span标签的dom对象
spanDom = document.createElement('span');
// 调用自己封装的函数 生成出随机字符
spanDom.innerHTML = createChar();
// 将span加入到页面上
document.body.appendChild(spanDom);
// 计算left的最大值
var maxWidth = document.body.clientWidth - spanDom.clientWidth;
// 设置span标签的left值
spanDom.style.left = makeRandom(0, maxWidth, true) + 'px';
// 设置定时器向下掉落
timer = setInterval(function () {
// 获取到现在的top值
var top = parseInt(getStyle(spanDom, 'top'));
// 计算最大的高度 -10是因为避免垂直滚动条
var maxHeight = document.body.clientHeight - spanDom.clientHeight - 10;
if (top >= maxHeight) {
clearInterval(timer);
document.body.removeChild(spanDom);
createSpan();
} else {
spanDom.style.top = top + 10 + 'px';
}
}, 50)
}
// 生成随机的字符
function createChar() {
// 字符串是记录可以使用的字符
var str = "0123456789qwwrtyioplkjhgfdsazxcvbnm";
// 计算随机下标
var index = makeRandom(0, str.length, false);
return str[index];
}
createSpan();
// 控制输入
document.onkeypress = function (e) {
var event = e || window.event;
// 判断输入的值与生成的是否相等
if (event.key == spanDom.innerHTML) {
document.querySelector('b').innerHTML = document.querySelector('b').innerHTML - 0 + 1;
clearInterval(timer);
document.body.removeChild(spanDom);
createSpan();
}
}
</script>
</body>
</html>
1364
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
