1.复习内容
2.灵感代办
-
JavaScript变量作用域复习
-
一定要注意代码执行渲染的顺序
3.学习内容
-
BOM
-
window对象的属性
-
history
- 提供操作历史记录的方法(后退,前进)
- 只是当前窗口的历史记录
-
属性:length
- 保存当前窗口访问过的历史记录数量
-
方法
- back() 后退
- forward() 前进
- go(n) 正值前进n条,负值后退n条
-
使用:
- 超链接修改地址的url,会增加历史记录
- 前进和后退不会增加历史记录,是指针的指向改变
-
历史记录的进出栈
- 后退按钮不会操作栈
- 后退之后产生新的跳转会清栈(清除后退的栈)
-
location
- 保存当前窗口的地址栏信息
- 属性 :href
- 可读可写,读取或者设置当前窗口的URL
- 方法:reload(false)
- 功能:重载页面,刷新页面
- 默认false,优先从缓存加载
- 设置true,则强制从服务器目录请求
-
navigator/screen
-
windows中 on开头的?
- 都是事件
-
DOM
-
文档对象模型:
- 提供操作HTML文档的方法,核心对象为document对象
-
节点对象:
- JS对HTML文章中的标签,文本,属性,甚至注释都封装成对象,提供操作的方法
-
分类:
- 元素(标签,包含了文本和属性),文本(文本内容),属性(标签属性),注释,文档
-
获取元素节点
- 根据标签名获取列表(返回节点列表)
document.getElementsByTagName(“h1”);
- 根据类名获取列表(返回节点列表)
document.getElementByClassName(“c1”);
- 根据那么属性值获取节点列表(返回节点列表)
document.getElementsByName();
- 根据id属性值获取元素
document.getElementById();
-
操作元素内容,
- innerHTML: 用来读取设置元素节点的内容,可以识别标签语法
- innetText: 不能识别标签语法
- value:读取或者设置表单中的值
-
操作元素属性,
- 直接操作对象
- 简化,定义一个方法:$
- 直接赋值 id=“id” className=”“”; (class需要更名)
- 移除属性:赋空值“”,null(会显示出来,remove置空,看不见)
- 元素对象提供相关方法操作标签(class不需要更名)
- setAttribute(“attrName”,”value”)
- getAttribute(“attrName”)
- removeAttribute(“attrName”);
-
操作元素样式
- 通过操作id和class属性,对应选择器的样式
- 操作行内样式,操作style属性(动态操作常用)
- 字符串格式(和标签中写法一样)覆盖了css样式表中属性 style = “width:200px”;
- 对象格式 p.style.width = 200px;
- 所有出现连接符的属性都由-改为了驼峰,编程语言中(-是运算符号)
font-size == fontSize()
-
元素节点的层次属性
-
获取父元素
- parentNode()
-
获取子元素列表
-
属性值、
- nodeName,nodeValue
- nodeType:1:标签元素,2:属性,3:文字
- childNodes 可以拿到标签内的文本节点,元素
- children 常用,获取子元素,不包含文本节点
-
获取下一个兄弟节点
- nextSibling(带文字节点)
- nextElementSibling
-
获取上一个兄弟节点
- previousSibling(带文字节点)
- previousElementSibling
-
获取节点属性
- attributes 获取属性节点列表
-
节点的创建,添加,删除
-
创建节点
- createElement(“h1”); 返回创建好的元素节点
-
节点添加
- 节点的添加删除只能父元素操作
- 添加在父元素的末尾parentNode.appendChild(element)
- 指定位置添加parentNode.insertBefore(new,old)在已有位置插入新节点
- body作为document的属性存在,可以直接访问
- 一个节点,对应一个标签,多个标签,需要创建多个节点
- 文本节点:createTextNode()也是一个节点,需要追加到一个父节点之后,比如H1,H2
-
节点删除
- removeChild() 节点名称
-
DOM事件处理
-
DOM事件介绍:
-
DOM事件:
- 指的是用户的行为或元素的状态
-
DOM事件处理:
- 元素去监听事件,事件发生后进行处理
-
常用事件分类(on开始,全部都是小写)
-
鼠标事件
- onclick
- ondblclick
- onmouseover(鼠标移入)
- onmouseout(鼠标移出)
- oumousemove(鼠标移动)
-
键盘事件
- onkeydown 按下
- onkeyup 抬起
- onkeypress 字符按键被按下(fn shift 等不包括)
-
文档,窗口或元素加载完毕
- onload()
- 事件绑定方式
- 内联绑定:在元素上写明
- 动态绑定:取到元素,动态添加
4.扩展延伸知识
-
字符串里面加入变量
5.知识内容个人梳理
6.今天都复习了之前的什么内容
-
JavaScript变量作用域复习
-
一定要注意代码执行渲染的顺序
3.学习内容
-
BOM
-
window对象的属性
-
history
- 提供操作历史记录的方法(后退,前进)
- 只是当前窗口的历史记录
-
属性:length
- 保存当前窗口访问过的历史记录数量
-
方法
- back() 后退
- forward() 前进
- go(n) 正值前进n条,负值后退n条
-
使用:
- 超链接修改地址的url,会增加历史记录
- 前进和后退不会增加历史记录,是指针的指向改变
-
历史记录的进出栈
- 后退按钮不会操作栈
- 后退之后产生新的跳转会清栈(清除后退的栈)
-
location
- 保存当前窗口的地址栏信息
- 属性 :href
- 可读可写,读取或者设置当前窗口的URL
- 方法:reload(false)
- 功能:重载页面,刷新页面
- 默认false,优先从缓存加载
- 设置true,则强制从服务器目录请求
-
navigator/screen
-
windows中 on开头的?
- 都是事件
-
DOM
-
文档对象模型:
- 提供操作HTML文档的方法,核心对象为document对象
-
节点对象:
- JS对HTML文章中的标签,文本,属性,甚至注释都封装成对象,提供操作的方法
-
分类:
- 元素(标签,包含了文本和属性),文本(文本内容),属性(标签属性),注释,文档
-
获取元素节点
- 根据标签名获取列表(返回节点列表)
document.getElementsByTagName(“h1”);
- 根据类名获取列表(返回节点列表)
document.getElementByClassName(“c1”);
- 根据那么属性值获取节点列表(返回节点列表)
document.getElementsByName();
- 根据id属性值获取元素
document.getElementById();
-
操作元素内容,
- innerHTML: 用来读取设置元素节点的内容,可以识别标签语法
- innetText: 不能识别标签语法
- value:读取或者设置表单中的值
-
操作元素属性,
- 直接操作对象
- 简化,定义一个方法:$
- 直接赋值 id=“id” className=”“”; (class需要更名)
- 移除属性:赋空值“”,null(会显示出来,remove置空,看不见)
- 元素对象提供相关方法操作标签(class不需要更名)
- setAttribute(“attrName”,”value”)
- getAttribute(“attrName”)
- removeAttribute(“attrName”);
-
操作元素样式
- 通过操作id和class属性,对应选择器的样式
- 操作行内样式,操作style属性(动态操作常用)
- 字符串格式(和标签中写法一样)覆盖了css样式表中属性 style = “width:200px”;
- 对象格式 p.style.width = 200px;
- 所有出现连接符的属性都由-改为了驼峰,编程语言中(-是运算符号)
font-size == fontSize()
-
元素节点的层次属性
-
获取父元素
- parentNode()
-
获取子元素列表
-
属性值、
- nodeName,nodeValue
- nodeType:1:标签元素,2:属性,3:文字
- childNodes 可以拿到标签内的文本节点,元素
- children 常用,获取子元素,不包含文本节点
-
获取下一个兄弟节点
- nextSibling(带文字节点)
- nextElementSibling
-
获取上一个兄弟节点
- previousSibling(带文字节点)
- previousElementSibling
-
获取节点属性
- attributes 获取属性节点列表
-
节点的创建,添加,删除
-
创建节点
- createElement(“h1”); 返回创建好的元素节点
-
节点添加
- 节点的添加删除只能父元素操作
- 添加在父元素的末尾parentNode.appendChild(element)
- 指定位置添加parentNode.insertBefore(new,old)在已有位置插入新节点
- body作为document的属性存在,可以直接访问
- 一个节点,对应一个标签,多个标签,需要创建多个节点
- 文本节点:createTextNode()也是一个节点,需要追加到一个父节点之后,比如H1,H2
-
节点删除
- removeChild() 节点名称
-
DOM事件处理
-
DOM事件介绍:
-
DOM事件:
- 指的是用户的行为或元素的状态
-
DOM事件处理:
- 元素去监听事件,事件发生后进行处理
-
常用事件分类(on开始,全部都是小写)
-
鼠标事件
- onclick
- ondblclick
- onmouseover(鼠标移入)
- onmouseout(鼠标移出)
- oumousemove(鼠标移动)
-
键盘事件
- onkeydown 按下
- onkeyup 抬起
- onkeypress 字符按键被按下(fn shift 等不包括)
-
文档,窗口或元素加载完毕
- onload()
- 事件绑定方式
- 内联绑定:在元素上写明
- 动态绑定:取到元素,动态添加
4.扩展延伸知识
-
字符串里面加入变量
5.知识内容个人梳理
6.今天都复习了之前的什么内容
BOM
-
window对象的属性
-
history
- 提供操作历史记录的方法(后退,前进)
- 只是当前窗口的历史记录
-
属性:length
- 保存当前窗口访问过的历史记录数量
-
方法
- back() 后退
- forward() 前进
- go(n) 正值前进n条,负值后退n条
-
使用:
- 超链接修改地址的url,会增加历史记录
- 前进和后退不会增加历史记录,是指针的指向改变
-
历史记录的进出栈
- 后退按钮不会操作栈
- 后退之后产生新的跳转会清栈(清除后退的栈)
-
location
- 保存当前窗口的地址栏信息
- 属性 :href
- 可读可写,读取或者设置当前窗口的URL
- 方法:reload(false)
- 功能:重载页面,刷新页面
- 默认false,优先从缓存加载
- 设置true,则强制从服务器目录请求
-
navigator/screen
-
windows中 on开头的?
- 都是事件
-
DOM
-
文档对象模型:
- 提供操作HTML文档的方法,核心对象为document对象
-
节点对象:
- JS对HTML文章中的标签,文本,属性,甚至注释都封装成对象,提供操作的方法
-
分类:
- 元素(标签,包含了文本和属性),文本(文本内容),属性(标签属性),注释,文档
-
获取元素节点
- 根据标签名获取列表(返回节点列表)
document.getElementsByTagName(“h1”);
- 根据类名获取列表(返回节点列表)
document.getElementByClassName(“c1”);
- 根据那么属性值获取节点列表(返回节点列表)
document.getElementsByName();
- 根据id属性值获取元素
document.getElementById();
- 根据标签名获取列表(返回节点列表)
-
操作元素内容,
- innerHTML: 用来读取设置元素节点的内容,可以识别标签语法
- innetText: 不能识别标签语法
- value:读取或者设置表单中的值
-
操作元素属性,
- 直接操作对象
- 简化,定义一个方法:$
- 直接赋值 id=“id” className=”“”; (class需要更名)
- 移除属性:赋空值“”,null(会显示出来,remove置空,看不见)
- 元素对象提供相关方法操作标签(class不需要更名)
- setAttribute(“attrName”,”value”)
- getAttribute(“attrName”)
- removeAttribute(“attrName”);
- 直接操作对象
-
操作元素样式
- 通过操作id和class属性,对应选择器的样式
- 操作行内样式,操作style属性(动态操作常用)
- 字符串格式(和标签中写法一样)覆盖了css样式表中属性 style = “width:200px”;
- 对象格式 p.style.width = 200px;
- 所有出现连接符的属性都由-改为了驼峰,编程语言中(-是运算符号)
font-size == fontSize()
-
元素节点的层次属性
-
获取父元素
- parentNode()
-
获取子元素列表
-
属性值、
- nodeName,nodeValue
- nodeType:1:标签元素,2:属性,3:文字
- childNodes 可以拿到标签内的文本节点,元素
- children 常用,获取子元素,不包含文本节点
-
-
获取下一个兄弟节点
- nextSibling(带文字节点)
- nextElementSibling
-
获取上一个兄弟节点
- previousSibling(带文字节点)
- previousElementSibling
-
获取节点属性
- attributes 获取属性节点列表
-
-
节点的创建,添加,删除
-
创建节点
- createElement(“h1”); 返回创建好的元素节点
-
节点添加
- 节点的添加删除只能父元素操作
- 添加在父元素的末尾parentNode.appendChild(element)
- 指定位置添加parentNode.insertBefore(new,old)在已有位置插入新节点
- body作为document的属性存在,可以直接访问
- 一个节点,对应一个标签,多个标签,需要创建多个节点
- 文本节点:createTextNode()也是一个节点,需要追加到一个父节点之后,比如H1,H2
-
节点删除
- removeChild() 节点名称
-
DOM事件处理
-
DOM事件介绍:
-
DOM事件:
- 指的是用户的行为或元素的状态
-
DOM事件处理:
- 元素去监听事件,事件发生后进行处理
-
常用事件分类(on开始,全部都是小写)
-
鼠标事件
- onclick
- ondblclick
- onmouseover(鼠标移入)
- onmouseout(鼠标移出)
- oumousemove(鼠标移动)
-
键盘事件
- onkeydown 按下
- onkeyup 抬起
- onkeypress 字符按键被按下(fn shift 等不包括)
-
文档,窗口或元素加载完毕
- onload()
-
- 事件绑定方式
- 内联绑定:在元素上写明
- 动态绑定:取到元素,动态添加
-
-
字符串里面加入变量
5.知识内容个人梳理
6.今天都复习了之前的什么内容