所有文件都是文档,DOM中的document特别指的是xml文档,html是xml的衍生品
- 在JavaScript中所有对象都是继承于Object,页面中的元素都继承于Node
- 程序员经常遇到很烂的APi,能不能用好,改进是体现一个程序员的价值所在.
- 这里面涉及到一个html的小细节,html标签head标签body标签都是可以省略的,也是符合规范的.
- 页面的元素之间的关系也是一个树状结构.
- html是一个特殊的元素,有单独的对象document 就像,就类似于函数的特殊性一样.html是由document构造出来的,其他元素是由element构造出来的,文本就是由text来造,这三个类型有共同的祖先Node;当然标签类型还不止这些,还有属性.......等一共七种
- 查看对象的时候用console.dir 别用log,log只是单纯打印对象包含的内容,dir是展示其对象内部结构
- console.dir(document.body)可以查看body内部结构,body有很多属性,他指向一个HTMLBodyElement原型,然后这个原型又指向HTMLElement原型,这个原型最后指向Element.
页面中的节点,通过Element,Document,Coment,Text四个构造函数构造出内存中的对象,这就是Dom的主要功能,想操作节点,就调用这个节点对应的对象API
那么Dom的API究竟有哪些呢?
- Node主要分成三类,Document,Element,Text,其他都不重要
- 涉及到Node要有个概念,即使是继承于Object但是在页面中类似于Object的地位,它的很多属性是被下面的对象继承的.也就是说,Node拥有的属性,Element,Text,Document都可以用
- Node属性:childNodes,firstChild,innerText,lastChild,nextSibling,nodeName,nodeType,nodeValue,outerText,ownerDocument,parentElement,parentNode,previousSibling,textContent
- Node 方法:appendChild()
cloneNode()
contains()
hasChildNodes()
insertBefore()
isEqualNode()
isSameNode()
removeChild()
replaceChild()
normalize() // 常规化 - 搞清楚英文单词的意思就知道用法
-
如果发现知道英文后依然不明白用法，看 MDN 的例子即可，如
当你的html被浏览器接受到那一刻开始,浏览器就已经吧dom树建好了,这些对象可以直接哪来操作的.
- 还有一点注意childNodes和childElement的区别,子节点是包括回车的,(也就是text对象),子元素就不包括.注意元素,节点之间的区别;页面中所有都是节点,元素也是节点,只是有高等要求的节点.// 一句话说完,节点是包括文本的,元素是不包括文本的.
- Dom本来是给xml用的,html非要用这个API导致不配套,用起来很别扭.
- document.documentElement.odeName // "HTML"
- 某个tap或者Element的nodeName返回的就是1 //这是个特殊的规定有考量的,是出于内存的考虑,1的内存远比Element这个字节少啊
- 问题来了,Document是不是HTML呢?有时候是,有时候不是~~~老师也解释不清楚.
- 最后有innertext 和textcontent 分别是ie 和火狐分别开发出来的,所以DOM的标准多么重要,这个又是浏览器大战下的产物.
- 原来dom是没有可以获取所有文本这个方法的,所以ie浏览器自己做了一个,是通过for循环来遍历 所有字符来实现的.代码如下
var text = ''
for (let i=0,i<div.childNodes.lengh,i++){
if(div.childNodes[i]===3){
text +=div.childNodes[i]
}
}
text() - innerText 和 textContent的区别:
innerText不会获取所有元素的内容,其中的<script>就不会获取,而textContent会
innerText不会意识样式,也就是style元素的内容(字串)不会获取,而textContent会
innerText不仅会一出当前元素额子节点,而且还会永久性破坏后代文本节点,所以不可能再次将节点再次插入到任何其他元素或者同一元素中.比如 div.innerText=XXX~~~这样的操作.
标签变成对象的过程// 是通过构造函数 //举个例子:
function createObject (){
return 1
} // 调用函数就返回1,所谓构造函数就是 返回一个对象来表示这个事物吗? //小狗构造函数就是构造一个小狗啊,虽然不完全表达,但是由基本的属性,比如毛是黄色,四条腿~~~
对象是由构造函数来构造的这就是过程~~~~~~
方法
- colonNode使用:
var dic2 = dic1.cloneNode(true//这就是全部拷贝,就是深拷贝) 如果不传也就是括号里面是空,false就是浅拷贝//按照JavaScript语法,复杂类型赋值只是复制一个地址给别人,而非生产一个完全一样的,新的东西,这就是涉及到深拷贝,浅拷贝的概念了.
document.body.appendChild(dic2)
相等的节点,相同的节点.
isEqualNode是看起来相等,isSameNode是=== 全等的相同
- 对于编程来说,删掉一个东西就等于去了天堂:也就是存在于内存中,虽然在页面中消失了,而removeChild()就是这样的一个方法,replaceChild是替换,被替换的也是去了内存.
- DOM APi 无外乎「增删改」
Document API 增删改查中的查主要就是在这里了/
- Document API是专门为了Document而准备的.
- 给一个标签加文本: 第一种方法是Document.innerText = hello //注意这是有风险的,假如他是给一个镶嵌有<span>标签的div加文本,它会把<span>给清空掉
- 安全的做法应该是:div1.appendChild(document.createTextNode('hello'))
API的使用不在于功能,而在于多个组合的时候如何使用恰当
- anchors就是获取页面所有的A标签//html5不支持了~~~被弃用了
- characterSet字符编码设置
- childElementCount//
结论::: Document是html的爸爸,html是根元素//Document.DocumentElement
- domain就是获取域名
- 使用了那么多的属性,会发现,很多属性都是获取页面中的某些东西.而不是操作
- document.ONxxxxx 一系列监听属性
- plugins是检查有么有安装插件
- referrer 引荐者// 在跳转页面的时候,发送请求是与引荐者页面的,服务器看这个网址是不是引荐者,不符号要求的引荐者是会被禁止访问
- scrollingElement在滚动的元素
- visibilitystate获取页面有没有被显示
- script就是获取所有script标签
- stylesheets获取所有css
- title获取页面的title
方法
- Document.close()// 用来关闭当前文档的数据写入,想要打开使用就必须Document.open()
- Document是怎么运行的? Document有三步动作open-writer -close// 这个页面加载完毕之后就是close //close之后就不可以写东西了,如果你想写入,就必须重新从open开始;那么之前写的东西就被清了
- 所以尽量不要写writer,不然就gg
- execCommand操作富文本的
- getElementxxxxx 获取文本,查找文本来获取,前面的都是有明确目标的,这些是查找选择.基本没人用了
重点来了,querySeletor与querySeletorAll的区别:
- 前者是获取一个,后者是获取所有
- 前者是返回一个元素,后者是返回多个元素的数组,即使只有一个元素也是返回一个数组,不过这个数组是一个伪数组.
网友评论