DOM API
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,previousElementSiblinginnerText,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//查看当前页面是都正在被用户浏览,如果用户打开了这个页面,但是不在看当前页面,这个就是false
2.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只是文本
相关推荐
Vue和React是数据驱动视图，如何有效控制DOM操作?能不能把计算，更多的转移为js计算？因为js执行速度很快。patch函数-->patch,对比tag,对比tag与key,对比children