DOM相关知识点
内容待补充。。。
DOM相关注意题目: DOM的最小组成单位叫做 //节点 Node DOM 有自己的国际标准,目前的通用版本是 //DOM 3 DOM 树的根节点 //HTML 元素 Element 的 NodeType 值为 //1 和Node. ELEMENT_NODE <div id=x></div> x的值 //就是这个 id 为 x 的 div 对应的 Element 对象
document.body.nodeName //"BODY" <div id=parent></div> parent的值 //如果有父窗口,就是父窗口。如果没有,就是当前窗口(不要用全局属性)
//如果想用,可声明一个函数,并立即调用.call(),或者直接()
<div id=x></div> <div id=y></div> x.nextSibling 的值是 //回车构成的文本节点 <div id=parent1> <div id=child1> </div> </div> parent1.childNodes 的值是 //{0:child1, length:1} 伪数组 var parent = document.getElementById('parent'); parent.childNodes.length // 2 parent.appendChild(document.createElement('div')); parent.childNodes.length // 请问现在 length 是多少 //3 因为最后有用childNodes重新看子节点 var allDiv = document.querySelectorAll('div> allDiv.length // 假设是 2 document.body.appendChild( document.createElement('div') ) allDiv.length // 请问现在 length 的值是多少??? //2 因为alldiv是在第一步就取出来了,后面也没有重新取所以一直都是2 //以上题目为什么一个 length 会动态变化,另一个 length 却不会动态变化?
2 document.querySelectorAll方法返回的是一个静态集合。DOM内部的变化,并不会实时反映在该方法的返回结果之中。
ChildNode接口用于处理子节点(包含但不限于Element子节点)。Element节点、DocumentType节点和CharacterData接口,部署了ChildNode接口。凡是这三类节点(接口),都可以使用 // remove()、before()、after()、replaceWith() 节点的类型有七种,分别是 //Document、DocumentType、Element、Attribute、Text、Comment、DocumentFragment //(这三种不是:Doctype、Tag、TextElement)
HTMLCollection和NodeList的区别
在用原生javascript选择器获取dom元素的时候。能直接返回
元素的也仅仅只有以下两条
var dom1=document.getElementById("a"); var dom2=document.querySelector("#a");
这两种选择器返回的是a元素。
而其他的选择器,大部分返回的结果是HTMLCollection,或者NodeList。
NodeList 对象是节点的集合,返回的是 Node 集合与 Node(取索引)。由 Node.childNodes 和 document.querySelectorAll 所返回的。
HTMLCollection 对象是元素的集合,返回是 Element 集合与 Element(取索引)。由node.children 和 node.getElementsByXXX
唯一要注意的是 querySelectorAll 返回的虽然是 NodeList ,但是实际上是元素集合,并且是静态的(其他接口返回的HTMLCollection和NodeList都是live的)
HTMLCollection与NodeList的区别有:
1 HTMLCollection实例对象的成员只能是Element节点,NodeList实例对象的成员可以包含其他节点。
2 HTMLCollection实例对象可以用id属性或name属性引用节点元素,NodeList只能使用数字索引引用。