js增加、删除、替换DOM对象 |
您所在的位置：网站首页 › js删除dom › js增加、删除、替换DOM对象 |
js增加、删除、替换DOM对象
|
当网页被加载时，浏览器会创建页面的文档对象模型DOM，即Document Object Model 整个文档为一个文档节点(document对象) 每个html元素为一个元素节点(element对象) html元素内的文本为文本节点(textNode对象) html元素的属性为属性节点(attribute对象) html注释为注释节点(comment对象)
节点自身属性： nodeType：节点类型 nodeName：节点名称 nodeValue：节点值 attributes：节点的属性节点 innerHTML：节点的所有内容，包含节点下的文本，子标签等 innerText：节点的文本内容，不包含子标签
导航属性： parentElement / parentNode：父节点标签 children：所有子标签 firstElementChild：节点的第一个子元素标签 lastElementChild：节点的最后一个子元素标签 nextElementSibling：下一个兄弟元素标签 previousElementSibling：上一个兄弟元素标签
添加元素 parent.appendChild(child) ：用于向parent父元素中添加新元素，添加到尾部 parent.insertBefore(newchild,oldchild)：用于向parent父元素中添加新元素newchild，且添加到oldchild元素的前面。 这是一个段落。 这是另外一个段落。 var para1 = document.createElement("p"); //创建段落p元素 var node1 = document.createTextNode("这是一个新的段落，添加到尾部。"); //创建文本节点 para1.appendChild(node1); //将文本节点添加到p元素，这两步可直接使用para1.innerHTML='这是一个新的段落，添加到尾部。' var para2 = document.createElement("p"); var node2 = document.createTextNode("这是一个新的段落，添加到开头。"); para2.appendChild(node2); var element1 = document.getElementById("div"); //获取父元素div var element2 = document.getElementById("p1"); //获取第一个段落元素 element1.appendChild(para1); //向父元素中添加创建的子元素，默认放在最后面 element1.insertBefore(para2,element2); //向父元素中添加创建的子元素，位置在element2元素前面以上，document.createElement("p")为创建段落，document.createTextNode("*")为创建文本节点。 element1.appendChild(para1)为添加子元素到末尾，element1.insertBefore(para2,element2)为添加子元素到指定元素前面。
删除元素parent.removeChild(child)，删除元素必须知道其父元素 这是一个段落。 这是另外一个段落。 var parent = document.getElementById("div1"); var child = document.getElementById("p1"); parent.removeChild(child);
替换元素parent.replaceChild(newchild,oldchild)，使用newchild元素替换oldchild元素 这是一个段落。 这是另外一个段落。 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);
|
【本文地址】
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |