首先回顾一下以前内容
1.通过JS控制表单
2.innerText innerHTML
(二)课程目标1. 节点控制
2. 控制样式属性
3. 改变盒子大小
4 . 川剧变脸
5. 开关效果
6. 关闭广告
7. 隔行变色
(三)节点控制什么是节点?什么是元素?
页面上的都可以称之为一个节点,包括纯文字、换行等。元素指的是标签;
为什么要用节点控制?
因为getElementsByTagName()没有层级,会把满足标签名的所有元素全部获得
节点控制的关键点是:节点之间的关系
子节点 父节点 兄弟节点
节点是包含元素的
2.1节点类型
node.nodeType = 1; //元素节点
根据值不同,表示不同的节点类型:
1表示元素节点 2表示属性节点 3表示文本节点… 8 注释节点
nodeValue:节点的值
nodeName:节点的名称
注意:元素节点的nodeValue值返回的是null,以后可以用这个进行一些判断
2.2节点层次: 子节点 父节点 兄弟节点
childNodes:子节点 凡是在html中出现的都称为节点;
children:子元素:虽然不是早期DOM标准中的方法,但是所有浏览器都支持
nextSibling:下一个兄弟节点
nextElementSibling:下一个兄弟元素 有兼容性问题
previousSibling:上一个兄弟节点
previousElementSibling:上一个兄弟元素 有兼容性问题
JQuery 不存在兼容问题
firstChild :第一个节点
firstElementChild:第一个子元素 有兼容性问题
lastChild:最后一个子节点
lastElementChild:最后一个子元素 有兼容性问题
parentNode :父节点
(四)通过JS样式属性style属性是对象,style对象的属性是字符串
style只能获取和设置行内样式
DOM对象中style的属性和标签中style内的值几乎一样
因为在style里面的background-color这样的命名方式在JS是不允许的,所有一般就变成了驼峰命名法 ——就是第二个单词的首字母大写 backgroundColor
只是带有 - 的属性名较为特殊(如background-color变成了backgroundColor),因为在JS中 - 不能作为标识符
3.1 设置和获取样式
通过对象的style属性只能设置和获取行内样式
获取样式的时候 如果行内没有该样式 输出空字符串
设置样式的时候 赋的值是一个字符串 如果这个属性有单位 一定要节点加单位
3.2 什么情况通过class控制样式 什么情况通过style控制样式
哪种方式最便捷采用哪种方式;
但是如果是属性的值会参与一些运算,必须采用控制行内样式的方式
值的运算最多的是 ;字符串拼接 把要替换的 " 替换内容 "
(一)复制节点var node = cloneNode(true/false);
true :深层复制,把内部节点一起克隆
false:浅层复制,只复制当前元素
(二)追加节点、删除节点obj.appendChild(要追加的元素);
1.在元素中的最后追加子元素;
2.如果是克隆出来的节点,不会影响原来节点;
3.直接追加,原来节点就会被删除后再追加;
obj.insertBefore(要插入的元素,插到这个元素的前面);
1.在元素中的子元素前面插入子元素;
2.如果是克隆出来的节点,不会影响原来节点;
3.直接追加,原来节点就会被删除后再追加;
obj.removeChild(要移除的子元素);
从元素中移除子元素;
(三)动态创建元素节点document.write(“内容”)
直接在文档中书写
innerHTML=”内容”
改变元素对象内部的HTML
createElement()
cloneNode()
创建节点并追加
通过这两种方法创建出来的元素只是保存在内存中,必须放到页面上才行!
武汉大牛哥教育是一家真正的育人为本的公司,学习技术到武汉大牛哥教育
1.节点控制
2.动态创建元素
(一)课程目标1.函数的定义方式与执行方式
2.预解析
3.变量的作用域
4.作用域链
5.内置对象
6.BOM
(二)函数的定义方式1.函数的定义方式与函数声明的提升;2.变量声明提升,只提升声明,不提升赋值;
3.函数声明提升,函数的声明提升到当前作用域的前面;
(三)预解析1.就是页面加载的一种准备方式;2.先去全局找var 再找 function3.看var后面有没有赋值4.再找function5.作为了解内容(四)*变量的作用域*1.变量类型:全局变量 局部变量
2.全局变量:可以作用域所有区域使用
3.局部变量:在函数内部声明的变量,称为局部变量。只能在函数内部使用
4.隐式全局变量:在函数内部不加var的称也是全部变量
5.块级作用域:在其他语言中,{}内部的称为块级作用域,在里面定义的变量,外部是访问不到的。而在Javascript里面是没有块级作用域的,只有函数作用域。
(五)作用域链1.执行过程
var a = 1;
function fn(){
var a = 2;
}
fn();
console.log(a);
执行过程:1.先找全局范围的var和function;预解析,提升变量声明与函数声明; var a undefined fn{}
2.变量赋值与函数执行 var a = 1; fn(),如果能找到,执行fn(){}
3.fn()函数局部执行: var a undefined
4.函数内部赋值 var a = 2; 函数内部作用域
5.输出全局变量 1
2.多个函数嵌套,内部函数可以访问到外部函数作用域的变量。
var a = 1;
function fn(){
a = 2;
}
fn();
console.log(a);
执行过程:
1.先找全局范围的var 与function预解析,提升变量声明与函数声明; var a undefined fn{}
2.变量赋值与函数执行 var a = 1;
3.fn()函数内部执行 a没有声明会继续往上找;
4.a = 2;
5.输出:2
1. 预解析的过程;1.1 先提升 var 和 function的声明 1.2执行:赋值与fn调用
2.函数作用域:一旦执行函数
3. 全局与局部之间的关系;
局部里面 预解析
变量没有声明时候,这个时候跳出局部继续往上找直到找到为止!
(六)内置对象1.Window对象 .onload 文档加载
window | Onload | 文档加载 |
Open(url)Open(url,”_blank”)Open(url,target,”w,h”); | 打开窗口 | |
Close(); | 关闭窗口 | |
Location.href =”url”; | ||
setTimeout(fn,time)回调函数,毫秒 3000 | 延时定时器 | |
clearTimeout(timerID) | 清理定时器 | |
setInterval(fn,time) | 间歇定时器 | |
clearInterval() | 清理定时器 | |
Location.href | ||
History.forward();History.back(); |