window对象下内置的子对象:
1.history对象:该对象包含浏览器访问过的url。
该对象的属性:
history.length; //返回历史记录的数量
该对象的方法:
history.back(); //后退,加载前一个url。
history.forward(); //前进,需要后退一下之后,才有前进的方向
history.go(num); //参数为正,前进相应的数目,为负,后退相应的数目,为0,刷新
2.location对象:包含当前url的相关信息,而history对象不能具体反映url的相关信息。
该对象的属性:
location.href; //设置或返回完整的url
location.search; //返回url?后面的查询部分
location.hash; //是一个可读写的字符串,是url的锚部分(从#开始的部分)哈希
该对象的方法:
location.reload(); //刷新页面的方法,一般情况下,传递一个true,不使用缓存刷新。缓存?
location.assign(url); //加载新页面,当url为空字符时,加载当前页面
3.navigator对象:浏览器信息
navigator.appName; //返回当前浏览器名
navigator.appCodeName; //返回当前浏览器的代码名
navigator.appVersion; //返回当前浏览器的版本号和平台
navigator.platform; //返回当前计算机的操作系统
以上方法已经在逐渐被抛弃,出现一个新的属性替代这些属性:
navigator.userAgent; //返回浏览器信息
拓展:4.frames对象:包含当前页面所有的框架信息。
frames.length; //返回当前页面的框架数量
frames[0].location; //修改第一个框架的地址
5.screen对象:包含当前显示屏信息
screen.width/height //屏幕总宽高度
screen.availWidth/availHeight //屏幕的宽高(不包括任务栏)
window.onload / onscroll/onresize 事件
onload当文档加载完成后执行一些操作
window.onload = function(){
console.log("页面加载完成")
}
onscroll当页面发生滚动时执行一些操作
window.onload = function(){
console.log(1) //当页面发生滚动时,打印1
}
onresize当窗口大小发生改变时执行一些操作
window.onresize = function(){
console.log(1) //当窗口大小发生改变时,打印1
}
页面滚动条距离顶部的距离
document.documentElement.scrollTop
页面滚动条距离左边的距离
document.documentElement.scrollLeft
DOM是document Object Model的缩写,简称文档对象模型。他给文档提供了一种结构化的表示方式,可以改变文档的内容和呈现方式,我们最关心的是,DOM把网页和脚本以及其他的编程语言联系了起来
DOM中的选择器
1.getElementById(id) //获取指定元素的ID元素
2.getElementsByTagName() //获取相同元素的节点列表,通过标签名选择元素,返回值是一个数组
3.getElementsByName() //通过name值获取元素,返回值是数组,通常用来获取有name的input的值
4.getElementsByClassName() //通过class名获取元素,返回值是数组n
注意:1.不是所有标签都有name值;2.在低版本的浏览器中,getElementsByName和getElementsByClassName有兼容性
ES5选择器:
document.querySelectorAll(); //强大到超乎想象,支持IE8+。ECMAScript借鉴了jQuery选择器的
//返回一个数组,哪怕只有一个元素
document.querySelector();
//返回单个元素
根据父级,选择子级:
oDiv.children; //返回一个数组
根据子级,选择父级:
oSpan.parentNode; //返回一个元素
改变元素的内容(innerHTML),属性(value),样式(width,height,background)
也就是对DOM进行增删改查
DOM的属性操作,增删改查
什么是元素的属性?class就是元素的属性,写在元素内的所有东西都是元素的属性,比如link的href,img的src等
元素的属性是什么,分为两种,一种叫内置属性,一种叫非内置属性。
内置属性可以直接通过点"."进行操作
tagName //返回值是当前元素的标签名
innerHTML/innerText //返回值是当前元素的内容
id //返回值是当前元素的ID
title //获取title的标签值,这个title是从document中获取的
className //返回值是当前元素的class
href //返回值是当前的href的值
以上这些属性既可以获取,也可以设置
非内置属性需要通过一些节点的方法进行操作,注意:节点的方法,前缀一定是节点
getAttribute() //获取 元素的属性
setAttribute() //设置/修改 元素的属性,低版本的IE不兼容;接收两个参数,属性名和属性值
removeAttribute() //删除 元素的属性,低版本的IE不兼容
2.节点
根据DOM规定,HTML文档中的每个成分都是一个节点。
DOM是这样规定的:
整个文档是一个文档节点
每个HTML标签是一个元素节点
包含在HTML元素中的文本是文本节点
每一个HTML属性是一个属性节点
注释属于注释节点
相当于HTML文档中的所有内容都是节点,元素是节点的别称,节点包含元素,当然节点还有好多细化的种类
如何获取DOM节点:
对象.parentNode //获得父元素节点
对象.children //获得子元素节点的集合,不包含空白节点
//但IE7包含首个注释节点(前面没有元素节点),IE8包含所有注释节点
对象.childNodes //获得所有子节点的集合,包括空白节点
//IE7/8不包含空文本节点,但IE7包含首个注释节点(前面没有元素节点),IE8包含所有注释节点
如何获取属性节点:
对象.attributes //获得所有属性节点,返回一个数组
3.childNodes/过滤空白节点
通过 对象.childNodes 获得所有子节点的集合
节点属性 nodeType 返回值为数值
节点类型(nodeType) 节点名字(nodeName) 节点值(nodeValue)
元素节点 1 标签名 null
文本节点 3 #text 文本
注释节点 8 #comment 注释的文字
文档节点 9 #document null
属性节点 2 属性名 属性值
通过遍历所有子节点,将空白节点过滤掉,得出所有的元素节点
4.高级选取firstChild/lastChild/parentNode/previousSibling/nextSibling
高级选取,(根据某一个节点位置找到它的父子,兄弟节点)
父(parent)、子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞(兄弟)。
对象.childNodes //获取当前元素节点的所有子节点
对象.ownerDocument //获取该节点的文档根节点,相当与 document
对象.firstChild //获得第一个子节点。(IE7/8非空白节点,可能是注释节点)
对象.firstElementChild //获得第一个非空白的子节点。(IE7/8不支持)
对象.lastChild //获得最后一个子节点(IE7最后一个元素节点,IE8最后一个非空白节点,可能是注释节点)
对象.lastElementChild //获得最后一个非空白的子节点。(IE7/8不支持)
对象.nextSibling //获得下一个兄弟节点。(包含空白节点和注释,IE7/8包括注释节点,不包括空白节点)
对象.nextElementSibling //获得下个兄弟节点。(IE7/8不支持)
对象.previousSibling //获得上一个兄弟节点。(包含空白节点和注释。IE7/8包括注释节点,不包括空白节点)
对象.prveiousElementSibling //获得上一个兄弟节点。(IE7/8不支持)
缺点:兼容性不好