【JS】05 DOM 文档对象模型 P2 元素的CRUD、Dom集合对象
Element & Node 元素，或者称为节点
在JS中创建一个HTML元素，但是因为没有指定在Dom对象中的节点位置，所以页面不会发生改变
var para = document.createElement("p");
在JS中创建一个HTML的文本节点，似乎在JS中文本也被Dom对象描述成了一个对象节点
var node = document.createTextNode("这是一个新的段落。");
把这个文本节点对象装入上面的元素对象
para.appendChild(node);
如果要显示这个在JS中创建的元素，就需要从已存在的元素中装入
首先，需要查找到存在HTML元素
var element = document.getElementById("div1");
然后再装入
element.appendChild(para);
appendChild()方法
字面意思上：追加子元素
追加，是再原有的基础上，在后面添加
子元素，是表示当前元素的下一级元素，这种关系非常像生活中的父子关系，所以就采用子元素这一称呼
insertBefore()方法
与追加子元素相反，该方法则是在最前面添加子元素
removeChild()方法
移除一个子元素，也就是说，如果你需要删除一个元素，那么
你需要先找到他的父元素。听起来挺怪的
replaceChild()方法
替换子元素，这一系列的操作方法都必须以父元素为基础，才能操作
<div id="div1"> <p id="p1">这是一个段落。</p> <p id="p2">这是另外一个段落。</p> </div> <script> var para = document.createElement("p"); var node = document.createTextNode("这是一个新的段落。"); para.appendChild(node); var parent = document.getElementById("div1"); var child = document.getElementById("p1"); parent.replaceChild(para, child); </script>
这个JS片段是想把js中创建的一个p元素，替换掉已经存在的id为p1的p标签
DOM 集合(Collection)
我更愿意称为dom数组，因为结构相似
getElementsByTagName() 方法返回 HTMLCollection 对象。
例如，一个dom对象，可能具备多个同名的标签元素，所以JS会找到这些元素，并统一装进这个集合对象中
我们可以通过索引的位置来获取
Length属性
和Java一样，表示了这个集合中的元素个数
可以使用遍历对所有这个同名标签元素进行样式上的修改
var myCollection = document.getElementsByTagName("p"); var i; for (i = 0; i < myCollection.length; i++) { myCollection[i].style.backgroundColor = "red"; }
我想说，这用CSS标签选择器不好吗？
但是这个遍历可以不完全修改【就是选择一部分修改】，在这点上CSS的标签选择器要部分不选择可就太难了
但是这操作跟数组没有区别啊。。。只不过Java的数组要求长度是固定且数据类型一致的
DOM 节点列表
NodeList 对象是一个从文档中获取的节点列表 (集合) 。
NodeList 对象类似 HTMLCollection 对象。【那是不是就是一样的呢？】
var myNodeList = document.querySelectorAll("p");
NodeList 中的元素可以通过索引(以 0 为起始位置)来访问。
访问第二个 <p> 元素可以是以下代码:
y = myNodeList[1];
这个看起来没有什么区别啊，都可以索引获取
HTMLCollection 与 NodeList 的区别 ？
HTMLCollection 是 HTML 元素的集合。
NodeList 是一个文档节点的集合。
NodeList 与 HTMLCollection 有很多类似的地方。
NodeList 与 HTMLCollection 都与数组对象有点类似，可以使用索引 (0, 1, 2, 3, 4, ...) 来获取元素。
NodeList 与 HTMLCollection 都有 length 属性。
HTMLCollection 元素可以通过 name，id 或索引来获取。
NodeList 只能通过索引来获取。
只有 NodeList 对象有包含属性节点和文本节点。
