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