还是要看文档

所有文件都是文档,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() // 常规化
    1. 搞清楚英文单词的意思就知道用法
  1. 如果发现知道英文后依然不明白用法,看 MDN 的例子即可,如

    normalize


当你的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 if(div.childNodes[i]===3){
    text +=div.childNodes[i]
    }
    }
    text()
  • innerText 和 textContent的区别:
    innerText不会获取所有元素的内容,其中的

你可能感兴趣的:(还是要看文档)