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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值