1、DOM
1.1、什么是DOM
文档对象类型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口
W3C已经定义了一系列的DOM接口,通过调用这些接口可以改变网页的内容、结构和样式
在DOM中就是将一个文档看做是一个节点树
DOM就是提供一系列方法(API)对这些节点树进行增删改查
DOM只是一个接口规范,可以用各种语言实现,不是JavaScript语言的一部分,但是DOM操作是JavaScript最常见的任务,离开了DOM,JavaScript就无法控制网页,并且JavaScript也是最常用于DOM操作的语言。
1.2、DOM树
文档:一个页面就是一个文档,DOM中使用document表示
元素:页面中的所有标签都是元素,DOM中用element表示
节点:网页中的所有内容都是节点(标签、属性、文本、注释等),DOM中使用node表示
DOM把以上内容都看作是对象
1.3、节点
元素节点(标签)
属性节点(标签上的属性)
文本节点(标签之间的文本)
1.4、获取元素节点的方法
document.getElementById(ID名字) 通过id(唯一)获取标签
document.getElementsByTagName(标签名字) 返回的是一个类似数组的集合
document.getElementsByName(标签name属性) 返回的是一个类似数组的集合
document.getElementsClassName(标签class名字) 返回的是一个类似数组的集合
document.querySelector(部分css选择器的写法) 返回匹配的第一个
document.querySelectorAll()
document.body 获取body标签
document.documentElement 获取html标签
document.表单name.表单标签name
//辅助方法
hasChildNodes()判断是否有子节点 返回的是布尔值
childNodes 返回所有子节点列表。
firstChild 返回第一个子节点。
lastChild 返回最后一个子节点。
nextSibling 返回后面的兄弟节点。
previousSibling 返回前面的兄弟节点。
parentNode 返回父节点。
children 返回子元素节点。
1.5、属性节点操作
1、.attributes
取得所有的属性
2、元素.属性名
获取某个属性,但是获取class的时候要写为className
3、元素.getAttribute(属性名) 属性名需要打引号
这种方法获取class可以直接写class
4、 设置属性
元素.属性名 = 属性值
元素.setAttribute(属性名,属性值); //避免设置style 和onclick
5、 元素.removeAttribute(属性名)
移除某个属性
6、hasAttribute()
返回一个布尔值,表示是否有某个属性。
HTML5中可以自定义属性 所有自定义属性 以data-自定义属性名
7、dataset
HTML5自定义属性获取方法。
元素.dataset.属性名 //属性名不写data-
可以在标签上保存数据-直接用data-
1.6、 文本节点
1、 innerHTML
可以重写标签中的内容,会解析成html的格式进行显示
2、innerText
可以重写标签中的内容,但是不会解析HTML(会直接将标签当作内容展示)
3、outerHTML
替换整个节点
4、value
获取/设置表单的值
1.7、 节点属性
1、节点.nodeName
元素节点返回 标签名;
属性节点 返回属性名;
文本节点始终返回#text;
2 节点.nodeValue
元素节点返回 undefined 或者null
属性节点返回属性值
文本节点返回文本
3、元素.nodeType
元素节点返回 1
属性节点返回 2
文本节点返回 3
1.8、 css操作
1、 元素.style.css属性
注意:设置的时候是将css添加到行内的
获取的时候只能获取行内属性
如果是设置float ,要写为cssFloat
2、元素.style.cssText
批量增加css
注意:会覆盖原来的style
3、获取当前标签渲染后所有样式
IE:element.currentStyle
window.getComputedStyle(element,null)
4、最佳修改css是控制class
box.className = 'bg';
1.9、 节点操作
1、document.createElement(标签名)
创建一个元素节点(标签)
2、 document.createTextNode(文本)
创建文本节点
3、 parentNode.appendChild(子节点)
将子节点添加到父节点的最后
4、parentNode.insertBefore(newNode,oldNode)
将newNode插入到oldNode之前
5、parentNode.replaceChild(newNode, oldNode)
用newNode替换oldNode
6、 parentNode.removeChild(子节点)
移除某个子节点
7、cloneNode(bool)
克隆节点(复制节点)
如果bool不写或者为false ,则只会克隆标签和属性
如果bool为true,则该节点的所有后代节点也会被克隆
2、BOM
2.1、JS组成
ECMAScript(ES3,ES5,ES6,ES7,ES8):核心语法,条件判断,循环,函数,变量,运算符
DOM:操作标签和CSS的方法 (API)
BOM:浏览器对象模型
2.2、BOM能做什么
1、操作浏览器窗口
2、提高导航对象
3、屏幕相关对象
4、浏览器信息
5、cookie
2.3、 window认识
1、window是作为浏览器端最顶层的对象
注意:调用这个对象下的方法和属性可以不用写window
2、window.open() 打开一个新窗口
3、window.close()关闭一个窗口
4、window.innerWidth 获取浏览器可用宽
5、window.innerHeight 获取浏览器可用高
浏览器的可用宽度还可以使用:document.documentElement.clientWidth || document.body.clientWidth
2.4、location认识
理解:用于获得当前页面的地址,也可以操作当前页面定向到其他页面
location 的属性:
1、location.href
当前页面完整的url //JS跳转页面
2、location.protocal
url的协议部分
3、location.host
主机名和端口
4、location.hostname
url的主机名
5、location.port
url中的端口号
6、location.hash
锚点部分,url中以'#'开头 的部分
7、location.pathname
url的路径部分 以/开头部分
8、location.search
url中的参数 以?开头的键值对字符串 ,格式 ?键=值
&键=值
locatin 方法:
1、 location.assgin()
载入新文档
2、location.replace
用新文档替换当前历史记录
3、location.reload()
重新载入
navigator 对象:
包含浏览器所有的详细信息
screen 对象:
获取当前屏幕
history对象:
提供对浏览器历史记录的访问能力
1、history.length:
访问了多少个页面
2、history.back()
后退
3、history.forward()
前进
4、history.go(n)
后退或者前进多少步,n是一个数值,正数代表前进多少页,负数代表后退多少页
5、history.state
获取history的堆栈,初始为空
6、history.pushState(state ,title,url)
state:一个与添加的记录相关联的状态对象
title:新页面的标题,一般浏览器会忽略,所以可以直接填空的
url:要打开的新网址