【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];