java dom添加节点_[Java教程]围绕DOM元素节点的增删改查

[Java教程]围绕DOM元素节点的增删改查

0 2018-06-05 03:04:01

HTML 文档中的所有内容都是节点：整个文档是一个文档节点 document

每个 HTML 元素是元素节点 element

HTML 元素内的文本是文本节点

每个 HTML 属性是属性节点

注释是注释节点

围绕DOM节点的操作可以概括为四种：增、删、改、查

一、增：

增加新元素

如需向 HTML DOM 添加新元素，您首先必须创建该元素，然后把它追加到已有的元素上。

document.createElement(“标签名”);  创建元素节点  并返回该元素  但此时  并没有添加到文档中

parent.appendChild(newChild) 方法，将新元素作为父元素的最后一个子元素进行添加 若将要插入的节点 在文档中已经存在  则相当于剪切功能

或

parentNode.insertBefore(a,b)在指定的子节点前面插入新的子节点。  在b之前插入a，a b 都是parentNode的子元素

除此之外也可以：

document.createTextNode(“文本内容”);  创建文本节点

document.createComment();  创建注释节点

document.createDocumentFragment();  创建文档片段

二、删：

parentNode.removeChild(子节点);  删除被选节点的子节点    返回的为被删除的节点  相当于剪切

node.remove();  删除被选节点本身  返回的为null  彻底销毁

三、改：

(1)改变元素

替换 HTML DOM 中的子节点 replaceChild()parent.replaceChild(newNode,originNode); 用newNode替换到parent中的originNode

改变元素内容

element.innerHTML="新内容";

(2)改变属性

setAttribute("prop","value")把指定属性设置或修改为指定的值。

(3)改变样式

element.style.prop="newValue";

(4)改变事件

element.onxxx=function(){

//函数体

}

xxx为事件类型 如：click、dbclick、mouseup等

四、 查：

element.innerHTML 会返回元素的内容

element.style.prop 会返回元素的样式 ，注意只能获得设置在行间的样式

window.getComputedStyle(element,null).prop 会返回元素的样式 ，注意只能获得设置在行间的样式,且该方法为只读的，IE9以下不兼容

elementNode.getAttribute("属性名");

查询DOM节点的方法，点这里

注意一点：DOM 根节点

有两个特殊的属性，可以访问全部文档：document.documentElement - 全部文档

document.body - 文档的主体

HTML DOM 对象参考手册 本文网址：http://www.shaoqun.com/a/343468.html

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：admin@shaoqun.com。

dom

0