【JS】05 DOM 文档对象模型 P2 元素的CRUD、Dom集合对象

Lophole 2020-06-14

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的标签选择器要部分不选择可就太难了

【JS】05 DOM 文档对象模型 P2 元素的CRUD、Dom集合对象

但是这操作跟数组没有区别啊。。。只不过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 对象有包含属性节点和文本节点。

相关推荐