DOM API
简单记录
请看阮一峰的DOM API<!DOCTYPE html>意思是我使用的是html5
Document Object Model文档对象模型
在文档与对象做一个模型映射,就是文档对象模型
把文档变成对象的模型.就是DOM
Element元素, Text 文本.
Document是html标签的父元素.
只要看到一个节点,浏览器就构造出来一个对应的对象,放在内存中.
页面中的节点通过构造函数变成对象,想要操作节点,就操纵对象相应的API就行了
document继承node,原型链
底下几个接口去MDN看详细的,或者需要用了就去看MDN
1.Node接口
1.1属性
Node派生于Objectsibling,兄弟姐妹
属性
childNodes,firstChild,innerText,lastChild,nextSibling,nodeName,nodeType,nodeValue,outerText,ownerDocument,parentElement,parentNode,previousSibling,textContent
注意:
-
nextSibling,previousSibling会获取到文本节点.使用nextElementSibling,previousElementSibling -
innerText,textContent有细微区别 - nodeType,1表示元素,3表示文本
nodeName
1.2方法
cloneNode()
方法（如果一个属性是函数，那么这个属性就也叫做方法；换言之，方法是函数属性）
appendChild()//加儿子cloneNode()
注意:
- 深拷贝:递归拷贝里面所有的内容
div.cloneNode(true);深拷贝,不写或者false就是浅拷贝contains()hasChildNodes()insertBefore()
isEqualNode()//只要长得一样就行,内存地址不一样没关系
isSameNode()//等价于===,完全相等,包括地址,同一个
removeChild()//移除孩子,但是还在内存中
replaceChild()//交换孩子normalize() // 常规化
是
将两个文本节点变成一个
搞清楚英文单词的意思就知道用法
如果发现知道英文后依然不明白用法，看 MDN 的例子即可，如 normalize
2.document接口
document继承node,原型链
2.1属性
body
characterSet//字符编码
childElementCount//子标签数量
children
doctype
documentElement
domain//获取域名
head
hidden
images
links//获取所有的a标签
location//获取当前地址
onxxxxxxxxx//监听事件
origin
plugins//时候开始起flash插件
readyState//是否下载完了
**referrer**//引荐,通过引荐拒绝为其他网站提供服务.引荐就是从那个网站打开的这个请求.可以用来只能在自己的网站请求,其他地方直接打开这个请求是打不开的,具体看视频,防止把这个网站当图床
scripts
scrollingElement//正在滚动的元素
styleSheets
title
visibilityState//查看当前页面是都正在被用户浏览,如果用户打开了这个页面,但是不在看当前页面,这个就是false2.2方法：
close()//关闭文档,不用
createDocumentFragment()
createElement()
**注意**:div1.innerText='hello'会把div里面所有的元素去除掉,只剩下hello文本.所以要用div.appendchild(document.createTextNode('hello')),这样才不会覆盖
createTextNode()
execCommand()//执行命令,当希望插入使用富文本编辑器的时候使用这个
exitFullscreen()//退出全屏
getElementById()
getElementsByClassName()
getElementsByName()
getElementsByTagName()
getSelection()
hasFocus()
open()
**querySelector()**//通过选择器选择元素.得到的都是伪数组
querySelectorAll()
registerElement()
write()
writeln()3.Element 的接口
看MDN
classList
innerHtml可以读取html格式.标签会显示.出于安全问题尽量不要用.
innerText只是文本
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。