html5中的dom中的各种节点的层次关系是怎样的
html5中的dom中的各种节点的层次关系是怎样的
⼀、总结
⼀句话总结：Node节点是所有节点的基类，所以都继承它的⽅法
1、dom提供在js中动态修改html标签的作⽤
⽐如增加修改标签等，并且是在⾮html代码（⽐如js）层⾯，⽽不是在view层⾯
2、弄清楚层次关系，就不⽤死记硬背了
那些属性⽅法什么的，就是不⽤背代码，这些东西是都可以理解的，很好理解的，弄懂层次关系
1、document⽂档对象是window对象的孩⼦么？
解答：是的。
2、document是什么？
解答：⽂档对象，代表了整个html⽂档，也包含了那个⽂档下⾯的所有内容，从html标签到head和body标签，从⽹页内容到⽹页样式。
3、DOM中的element对象是什么？
解答：每⼀个标签都是element对象，html标签是root element对象，head标签、body标签，a标签、h1标签等都是element对象。就是标签即element，element就是标签。
4、DOM中的Text对象是什么？
解答：Text对象即⽂本对象。html中的⽂本都是Text对象。<h1>这⾥⾯的⽂本是Text对象</h1>。标签也就是element的innerHTML所对应的就是Text对象
5、DOM中的Attribute对象是什么？
解答：Attribute对象即属性对象，所以标签也就是element的属性都是Attribute对象，例如<a href="#"></a>中的href就是属性对象。
6、⼀个DOM中id和name的数量是多少？
解答：id有且仅有⼀个，name可以有⽆数个。
7、ElementByName('table')这句话错在哪？
解答：取id才是element，因为document中id只有⼀个，取name的话，那就是elements，那么可以有⽆数个。
8、ElementById('table')中的element指的什么？
解答：element就是标签咯，标签就是element对象咯。
9、innerHTML中只有⽂本么？
解答：innerHTML中不仅可以包含⽂本，还可以包含标签。所以给元素添加孩⼦标签可以就讲包含孩⼦标签的html代码直接赋值给⽗标签的innerHTML。
10、HTML的DOM中⼀种有多少种类型，它们的基类是什么？
解答：⼀共定义了12种节点类型，⽽这些类型⼜都继承⾃Node类型。⽐如HTML元素通过元素节点表⽰，注释通过注释节点表⽰，⽂档类型通过⽂档类型节点表⽰等。
11、Node是所有节点的基类型么？
解答：是的
12、Node节点中不仅包括元素节点，还包括⽂本节点点，这句话对么？
解答：对
13、Node节点的常⽤属性是什么？
解答：hasChildNodes()  如果包含⼦节点就返回true，⽐查询childNodes的length来的简单。
14、如何返回⼀个⽂档节点document的引⽤？
解答：ownerDocument返回⽂档节点的引⽤（在html⾥⾯也就是document对象）
15、cloneNode()⽅法是什么，怎么使⽤？
解答：cloneNode()；复制节点，接受⼀个参数 true或者false。如果true就是复制那个节点和它的⼦节点。如果是false，就是复制节点本⾝（复制出来的节点就会没有任何⼦元素）。这个⽅法返回复制的节点，如果需要操作它，那么需要借助前⾯讲的4个⽅法来把这个节点放⼊到html中去。
16、html中所有东西都是节点，这句话对么？
解答：应该是对的
17、document的write()和writeln()的区别是什么？
解答：write和writeln，它们都是向页⾯写⼊东西，区别就是后者会多加⼊⼀个换⾏符。注意的是：在页⾯加载的过程中，可以使⽤这两个⽅法向页⾯添加内容。如果页⾯已经加载完了，再调⽤write，会重写整个页⾯。
18、如果页⾯已经加载完了，再调⽤write会发⽣什么？
解答：会重写整个页⾯
19、Text节点有⼦元素么？
解答：它没有⼦元素（不过这个仔细想想也知道= =）
20、如何我们想访问Text的节点的⽂本内容，我们怎么访问？（两种⽅法）
解答：nodeValue或者data属性
21、Comment、DocumentType和DocumentFragment，这三种节点分别是什么？
解答：Comment是注释节点，DocumentType就是doctype节点，通过docment.doctype来访问，DocumentFragment这个节点是⼀个⽂档⽚段，偶尔会⽤到。
22、html⽂档中插⼊⼤量html代码，⽤什么快？
解答：插⼊⼤量的html代码，⽤innerHTML是⾮常快的，建议使⽤
⼆、简介
DOM是所有前端开发每天打交道的东西，但是随着jQuery等库的出现，⼤⼤简化了DOM操作，导致⼤家慢慢的“遗忘”了它的本来⾯貌。不过，要想深⼊学习前端知识，对DOM的了解是不可或缺的，所以本⽂⼒图系统的讲解下DOM的相关知识，如有遗漏或错误，还请⼤家指出⼀起讨论^ ^。
1、DOM是什么？
  DOM（⽂档对象模型）是针对HTML和XML⽂档的⼀个API，通过DOM可以去改变⽂档。
  这个说法很官⽅，⼤家肯定还是不明⽩。
  举个例⼦：我们有⼀段HTML，那么如何访问第⼆层第⼀个节点呢，如何把最后⼀个节点移动到第⼀个节点上⾯去呢？
  DOM就是定义了如果做类似操作，那么应该怎么做的标准。⽐如⽤getElementById来访问节点，⽤insertBefore来插⼊节点。
  当浏览器载⼊HTML时，会⽣成相应的DOM树。
  简⽽⾔之，DOM可以理解为⼀个访问或操作HTML各种标签的实现标准。
  对于⼀个HTML来说，⽂档节点Document（看不到的）是它的根节点，对应的对象便是document对象（严格讲是⼦类HTMLDocument对象，下⾯单独介绍Document类型时会指出）。
  换句话说存在⼀个⽂档节点Document，然后它有⼦节点，⽐如通过ElementsByTagName("html")，得到类型为元素节点的Element html。
  每⼀段HTML标记都可以⽤相应的节点表⽰，例如：
  HTML元素通过元素节点表⽰，注释通过注释节点表⽰，⽂档类型通过⽂档类型节点表⽰等。
  ⼀共定义了12种节点类型，⽽这些类型⼜都继承⾃Node类型。
  所以我们⾸先讲Node类型，因为这个类型的⽅法是所有节点都会继承的。
网页设计html代码大全继承关系2、Node类型（基类，所有节点都继承了它的⽅法）
  Node是所有节点的基类型，所有节点都继承⾃它，所以所有节点都有⼀些共同的⽅法和属性。
  先讲Node类型的属性
  ⾸先是nodeType属性，⽤来表明节点类型的，例如：
  这⾥⾯，9代表的就是DOCUMENT_NODE节点的意思，可以通过Node.DOCUMENT_NODE查看节点对应的数字
  ⾄于⼀共有哪些节点，每个节点对应的数字⼜是多少，这个可以问⾕歌就知道了。反正常⽤的就是元素节点Element(对应数字为1)和⽂本节点Text(对应数字为3)
  然后常⽤的还有nodeName和nodeValue
  对于元素节点nodeName就是标签名，nodeValue就是null
  对于⽂本节点nodeName为"#text"(chrome⾥⾯测试的),nodeValue就是实际的值
  每个节点还有childNodes属性，这是个⼗分重要的属性，它保存了这个节点所有直接⼦元素
  调⽤childNodes返回的是⼀个NodeList对象，它极其像数组，但是有⼀个最关键的地⽅，它是动态查询的，也就是说每次调⽤它都会对DOM结构查询，所以对它的使⽤需要慎重，注意性能。
  访问childNodes可以使⽤数组下表或者item⽅法
  然后各个节点还存在各种属性让它们可以相互访问，下图很好的总结了
  ⽐较有⽤的⽅法和属性：
  1、hasChildNodes()
  如果包含⼦节点就返回true，⽐查询childNodes的length来的简单。
  2、ownerDocument
  返回⽂档节点的引⽤（在html⾥⾯也就是document对象）
  再介绍下Node类型常⽤的⽅法
  appendChild()⽅法可以在节点的childNodes的末尾增加⼀个节点，值得注意的是如果这个节点是已经存在在⽂档中的，那么便会删除原节点，感觉上就像是移动节点⼀样。
  insertBefore()⽅法接受两个参数，⼀个是插⼊的节点，另外⼀个是参照的节点。如果第⼆个参数为null，则insertBefore和appendChild效果⼀样。否则便会把节点插⼊到参照节点之前。这⾥要注意的是，如果第⼆个参数不为null，那么插⼊的节点不能是已经存在的节点。
  replaceChild()⽅法可以替换节点，接受两个参数，需要插⼊的节点和需要替换的节点。返回被替换掉的节点。
  removeChild()移除节点。这⾥有个常见需求，⽐如我有⼀个节点 #waste-node ，那么如何移除它呢？
var wasteNode =  ElementById("waste-node");
veClhid(wasteNode);    // 先拿到⽗节点，再调⽤removeClild删除⾃⼰
  这⾥先暂停⼀下，不知道⼤家注意到没有，以上的⼏个⽅法都是操作某个节点的⼦节点，也就是说，操作前必须到⽗节点（通过parentNode来）
  接下来说下复制节点的⽅法：
  cloneNode()；复制节点，接受⼀个参数 true或者false。如果true就是复制那个节点和它的⼦节点。如果是false，就是复制节点本⾝（复制出来的节点就会没有任何⼦元素）。这个⽅法返回复制的节点，如果需要操作它，那么需要借助前⾯讲的4个⽅法来把这个节点放⼊到html中去。
  ⾄此，Node类型的常见属性和⽅法都介绍完了。结合开头讲的，所有节点类型都继承⾃Node类型，所以这些⽅法是所有节点都有的。
3、Document类型
  最开始讲DOM是什么的时候提到了Document类型。其实关于这个类型最重要的是它的⼀个⼦类HTMLDocument有⼀个实例对象document。⽽这个document对象是我们最常⽤的⼀个对象了。
  document对象⼜挂载在window对象上，所以在浏览器就可以直接访问document了。
  ⽼规矩，先讲讲document对象的属性，等会讲讲它的⽅法。
  document对象上的⼀些属性
  document.childNodes 继承⾃上⾯讲的Node类型，可以返回⽂档的直接⼦节点（通常包括⽂档声明和html节点）
  document.documentElement 可以直接拿到html节点的引⽤（等价于ElementsByTagName("html")[0]）。
  document.body body节点的引⽤
  document.title  页⾯的title，可以修改，会改变浏览器标签上的名字
  document.URL 页⾯的url
  ferrer 取得referrer，也就是打开这个页⾯的那个页⾯的地址，做来源统计时候⽐较有⽤
  document.domain 取得域名，可以设置，但是通常只能设置为不包含⼦域名的情况，在⼀些⼦域名跨域情况下有效。
  接下来介绍两个熟悉的⽅法
  getElementById 和 getElementsByTagName
  getElementById，传⼊id，得到元素节点。⾥⾯的参数区分⼤⼩写（IE8-不区分）。注意：如果有多个id相同的元素，则返回第⼀个。IE7-⾥⾯表单元素的name也会被当做id来使⽤。
  getElementsByTagName 根据标签取得元素，得到的是HTMLCollection类型。如果传⼊的是 "*" ，则可以取得全部元素。
  还有⼀个是只有HTMLDocument类型（也就是document对象）才有的⽅法 getElementsByName 顾名思义，根据name返回元素。
  document对象还有⼀些集合，例如document.forms 可以返回所有的form表单。类型也是HTMLCollection。
  说到HTMLCollection，就再说说它
  HTMLCollection就是⼀个包含⼀个或多个元素的集合，和上⾯讲的NodeList还挺像的。HTMLCollection这个类型有两个⽅法，⼀个是通过下标（或者.item()）得到具体元素，还有就是通过['name']（或者.namedItem()）获得具体元素。
  最后，关于document对象还有⼀套重要的⽅法，那便是
  write() writeln() open() close()
  open和close分别是打开和关闭⽹页的输出流，在页⾯加载过程中，就相当于open状态。这两个⽅法⼀般不会去⽤它。
  然后重要的⽅法就是write和writeln，它们都是向页⾯写⼊东西，区别就是后者会多加⼊⼀个换⾏符。
  注意的是：在页⾯加载的过程中，可以使⽤这两个⽅法向页⾯添加内容。如果页⾯已经加载完了，再调⽤write，会重写整个页⾯。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。