复习
在执行代码时,有两种作用域,一种是AO主要用于函数里或者花括号里执行期上下文对象,另外一种是GO对象,一般来说是window对象,
//脚本加载时
// GO==>浏览器:window node.js:global
//1.检查语法
//2.
//变量变为GO对象的属性
//函数变为GO对象的方法
// var a=20
// GO{
// a:undefined
// }
//函数能不能无限自调用:就算是大括号里面是空的
闭包引起的问题
//垃圾回收机制:对象是引用数据
//在引用标识所在作用域内 都能引用对象
//作用域完毕的时候,会销毁AO中的变量
//总结:系统辨别对象没有能力再被使用时,引用计数为0 对象释放
//内存泄漏
//如何解决闭包引起的内存泄漏?
//1.尽量避开闭包的使用,使用高级语法:做兼容
//2.手动释放,优化代码,每次使用容器前先清空. xxx=null
//浏览器如何把html文件变为UI页面?
// BOM操作 (browser object model) 关键字是:window
//1.浏览器去翻译html文件中的代码:生成window对象
//window==>
//所有标签(节点对象)都在这个对象中:DOM
//浏览缓存相关的功能也在这个对象中
//浏览器的信息和系统信息也在这个对象中
//navigatior也在这个对象中
//设备和显示效果也在这个对象中
//总结:不是w3c 的规范 是所有浏览器自己都做了这些解构
//DOM (document object model)
//2.把标签按照文档流顺序进行解析==>像树一样的数据结构:DOM树
//3.把css样式按照顺序进行解析==>也像树一样的数据结构:CSS样式结构体
//4.把DOM树和CSS样式结构体结合==>renderTree 呈现树
//6.GPU绘制引擎 按照呈现树的顺序去绘制整个UI页面
//这个阶段主要学习DOM树的操作
//总结:是w3c 的规范
//节点:12大节点 作业:查博客看看有哪些节点
// 文档document
在script中获取元素的办法
1.var div1=document.getElementById(“div1”),id选择器,选择id为div1的标签,一般来说id最好一样的只有一个,不然和class使用冲突.返回第一个id为div1的节点对象,如果没有这个id 返回值:null
//2.通过class获取 没有返回空容器
var divs=document.getElementsByClassName(“div11”) 类名选择器
3.通过Name获取 没有返回空容器
var div2=document.getElementsByName(“div2”)
name选择器
4.通过标签名获取 没有返回空容器
var divs=document.getElementsByTagName(“hqyj”)
var divs=document.getElementsByTagName(“h1”)
以上4中方法是es5之前的方法,其中id选择器是最快的
//5.返回选择器选择的元素们的第一个,没有的话:null
var divs=document.querySelector(".div11")
console.log(divs)
//6.返回选择器选择的元素们,没有的话:空容器
var divs=document.querySelectorAll(".div11")
console.log(divs)
var ul1 = document.querySelector("#box")
var re = ul1.firstChild
var re = ul1.firstElementChild
var re = ul1.lastChild
var re = ul1.lastElementChild
var re = ul1.nextSibling
var re = ul1.nextElementSibling
var re = ul1.previousSibling
var re = ul1.previousElementSibling
var re = ul1.children[2]
var re = ul1.getson(2)
不同的选择器可以选择不同的标签
作业:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<style>
.div_tr {
width: 150px;
height: 50px;
border: 1px solid burlywood;
}
</style>
<script>
</script>
<script>
//列变颜色
for (let q = 0; q < 7; q++) {
var td1 = document.createElement("td");
td1.classList.add(`td${q}`)
document.body.appendChild(td1);
for (let i = 0; i < 6; i++) {
let tr1 = document.createElement("tr");
tr1.classList.add(`tr${q}${i}`);
td1.appendChild(tr1);
var div_tr = document.createElement("div");
div_tr.classList.add("div_tr");
tr1.appendChild(div_tr)
if (i % 2 == 0) {
tr1.style.backgroundColor = `#C5AE5D`;
}
if (i % 2 == 1) {
tr1.style.backgroundColor = `#5089B6`;
}
tr1.onclick = function () {
for (let i = 0; i < chuanru.length; i++) {
if (i % 2 == 0) {
chuanru[i].style.backgroundColor = `#C5AE5D`;
}
if (i % 2 == 1) {
chuanru[i].style.backgroundColor = `#5089B6`;
}
}
let first1 = tr1.parentElement.children;
for (let i = 0; i < first1.length; i++) {
first1[i].style.backgroundColor = "red";
}
let last1 = document
change(q, first1);
}
}
}
var change1 = 0;
var chuanru = {};
function change(nub = 0, chuan_ru) {
change1 = nub;
chuanru = chuan_ru;
console.log(change1);
}
</script>
<script>
var change1 = 0;
var chuanru = {};
function change(nub = 0, chuan_ru) {
change1 = nub;
chuanru = chuan_ru;
console.log(change1);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<style>
.div_tr {
width: 150px;
height: 50px;
border: 1px solid burlywood;
}
</style>
<div class="father1">
</div>
<script>
var div = document.querySelector(".father1")
for (let q = 0; q < 7; q++) {
var td1 = document.createElement("td");
td1.classList.add(`td${q}`)
div.appendChild(td1);
for (let i = 0; i < 6; i++) {
let tr1 = document.createElement("tr");
tr1.classList.add(`tr${q}${i}`);
td1.appendChild(tr1);
var div_tr = document.createElement("div");
div_tr.classList.add("div_tr");
tr1.appendChild(div_tr)
if (i % 2 == 0) {
tr1.style.backgroundColor = `#C5AE5D`;
}
if (i % 2 == 1) {
tr1.style.backgroundColor = `#5089B6`;
}
tr1.onclick = function () {
for (let ne = 0; ne <7; ne++) {
var bian1= tr1.parentElement.parentElement.children[ne];
console.log(jilu);
var bian2=bian1.children[jilu].style.backgroundColor= (jilu % 2 ? `#C5AE5D`:`#5089B6` );
}
get(tr1, i);
}
}
}
</script>
<script>
var jilu = 0;
function get(trr, num) {
jilu = num;
x = trr.parentElement.parentElement.children;
for (let m = 0; m < x.length; m++) {
x[m].children[num].style.backgroundColor = "red";
}
}
</script>
</body>
</html>