DOM API
简单记录
<!DOCTYPE html>意思是我使用的是html5 Document Object Model文档对象模型
在文档与对象做一个模型映射,就是文档对象模型
把文档变成对象的模型.就是DOMElement元素, Text 文本.Document是html标签的父元素.
只要看到一个节点,浏览器就构造出来一个对应的对象,放在内存中.页面中的节点通过构造函数变成对象,想要操作节点,就操纵对象相应的API就行了 document继承node,原型链
底下几个接口去MDN看详细的,或者需要用了就去看MDN
1.Node接口
1.1属性
Node派生于Object
sibling,兄弟姐妹属性 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 的例子即可，如 normalize2.document接口
document继承node,原型链
2.1属性
bodycharacterSet//字符编码childElementCount//子标签数量childrendoctypedocumentElementdomain//获取域名headhiddenimageslinks//获取所有的a标签location//获取当前地址onxxxxxxxxx//监听事件originplugins//时候开始起flash插件readyState//是否下载完了**referrer**//引荐,通过引荐拒绝为其他网站提供服务.引荐就是从那个网站打开的这个请求.可以用来只能在自己的网站请求,其他地方直接打开这个请求是打不开的,具体看视频,防止把这个网站当图床scriptsscrollingElement//正在滚动的元素styleSheetstitlevisibilityState//查看当前页面是都正在被用户浏览,如果用户打开了这个页面,但是不在看当前页面,这个就是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 的接口
看MDNclassListinnerHtml可以读取html格式.标签会显示.出于安全问题尽量不要用.innerText只是文本