标签:很多 targe 的区别 ima 基础上 选择器 pen 代码 没有
在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);
字面意思上:追加子元素
追加,是再原有的基础上,在后面添加
子元素,是表示当前元素的下一级元素,这种关系非常像生活中的父子关系,所以就采用子元素这一称呼
与追加子元素相反,该方法则是在最前面添加子元素
移除一个子元素,也就是说,如果你需要删除一个元素,那么
你需要先找到他的父元素。听起来挺怪的
替换子元素,这一系列的操作方法都必须以父元素为基础,才能操作
<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数组,因为结构相似
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的数组要求长度是固定且数据类型一致的
NodeList 对象是一个从文档中获取的节点列表 (集合) 。
NodeList 对象类似 HTMLCollection 对象。【那是不是就是一样的呢?】
var myNodeList = document.querySelectorAll("p");
NodeList 中的元素可以通过索引(以 0 为起始位置)来访问。
访问第二个 <p> 元素可以是以下代码:
y = myNodeList[1];
这个看起来没有什么区别啊,都可以索引获取
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.html