首先,我们将最后段落赋值给变量my:

var my = document.getElementById('closer');

接下来,我们就能够轻松地通过修改对象的innerHTML值来修改段落中的文本:

由于innerHTML可以接受任何HTML代码串,所以我们也可以用它在当前的DOM树中再新建一个em节点:

除此之外,我们还可以通过修改既定文本类节点的nodeValue属性来实现相关的文本修改。

修改样式

元素对象中有个style属性,这是一个用来反映当前CSS样式的属性。

另外,CSS属性中的短线在JavaScript中是不可用的。对于这种情况,我们只需要直接跳过并将下一个单纯的首字母大写即可。例如,padding-top可以写成paddingTop、margin-left可以写成marginLeft等,以此类推。

新建节点

通常情况下,我们可以用createElement()和createTextNode()这两个方法来创建新节点。而appendChild()方法则可以用来将新节点添加到DOM树结构中。

如果你想将下面的HTML代码加入body元素后端:

<p>one mor paragraph<strong>bold</strong></p>

让我们来看看完成这个代码应该怎么写

//新建一个节点p
var myp = document.createElement('p');
//创建一个文本节点
var myt = document.createTextNode('one more paragraph');
myp.appendChild(myt);
//创建一个strong和另外一个文本节点
var str = document.createElement('strong');
str.appendChild(document.createTextNode('bold'));
myp.appendChild(str);
//添加到body中
document.body.appendChild(myp);

cloneNode()

另外,拷贝现有节点也是一种创建节点的方法。这需要用到cloneNode()方法,该方法有一个布尔类型的参数(true=深拷贝,包括所有子节点;false=浅拷贝,只针对当前节点)。

这时候,我们在页面上不会看出有什么变化,因为浅拷贝只复制了p节点,并没有包含它的任何子节点。这意味着该段落中文本并没有复制过来。但如果我们现在创建的是一份深拷贝,那么以P元素为首的整个DOM子树都将会被拷贝过来。

insertBefore()

通过appendChild()方法,我们只能将新节点添加到指定节点的末端。如果想更精确地控制插入节点的位置,我们还可以使用insertBefore()方法。该方法与appendChild()基本相同,只不过它多了一个额外参数,该参数可以用于指定将新节点插入哪一个元素的前面。

document.body.insertBefore(document.createTextNode('boo!'),document.body.firstChild);

移除节点

想从DOM树中移除一个节点,我们可以调用removeChild()。下面,我们移除第二段落,如果我们稍后还需用到被移除的节点的话,可以保存该方法的返回值。

除此之外,还有一个replaceChild()方法,该方法可以在移除一个节点的同时将另一个节点放在该位置。

删除某个指定节点所有子节点的函数:

function removeAll(n){
while(n.firstChild){
n.removeChild(n.firstChild);
}
}

DOM节点的修改的更多相关文章

  1. JS 操作Dom节点之CURD

    许多优秀的Javascript库,已经封装好了丰富的Dom操作函数,这可以加快项目开发效率.但是对于非常注重网页性能的项目来说,使用Dom的原生操作方法还是必要的. 1. 查找节点 document. ...

  2. (转载)html dom节点操作(获取/修改/添加或删除)

    DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准,下面为大家介绍下html dom节点操作,感兴趣的朋友可以参考下   HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素 ...

  3. 深入理解DOM节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...

  4. DOM 节点的克隆与删除

    无奈的开头 关于DOM节点操作,如果仅仅是根据标准API来操作,那是最简单不过的了.但是现实中却哪有这么容易的问题让我们解决,其实不仅仅是节点的克隆与删除,节点的添加也是如此,而且添加节点需要考虑的情 ...

  5. jQuery学习-css、class操作、动画方法的运用、jQ操作Dom节点

    css操作(设置单个/多个样式.获取样式) //修改单个属性:括号之中直接是需要修改的样式名,值 css(name,value) //例:$("#one").css("b ...

  6. JS 操作Dom节点之样式

    为了提高用户体验,我们经常会动态修改Dom节点的样式,各种浏览器差异比较大,我们如何应对?不断尝试,不断总结~! 1. style.getComputedStyle.currentStyle 内嵌样式 ...

  7. JavaScript操作DOM节点

    DOM (文档对象模型(Document Object Model)) 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网 ...

  8. JavaScript函数使用和DOM节点

    一.函数的声明与调用 1.函数声明的格式: function 函数名(参数1, 参数2,....){ 函数体代码 return 返回值:} 2.函数的调用:①直接调用:函数名(参数1的值,参数2的值, ...

  9. jacascript DOM节点——节点关系与操作

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 节点关系 DOM可以将任何HTML描绘成一个由多层节点构成的结构.每个节点都拥有各自的特点.数据和方法,也 ...

随机推荐

  1. 跨域资源共享 CORS

    CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing). 它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从 ...

  2. 【59测试】【树】【dp】

    第一题 A : 这棵树由n个节点以及n - 1条有向边构成,每条边都从父亲节点指向儿子节点,保证除了根节点以外的每个节点都有一个唯一的父亲.树上的节点从1到n标号.该树的一棵子树的定义为某个节点以及从 ...

  3. Rhel6-pacemaker+drbd配置文档

    系统环境: rhel6 x86_64 iptables and selinux disabled 主机: 192.168.122.119 server19.example.com 192.168.12 ...

  4. Windows Server 2003 Sp2 下无法安装SQL Server 2008 Management Studio Express问题

    Windows Server 2003 Sp2 下无法安装SQL Server 2008 Management Studio Express问题钉子 发表于 2010-5-22 1:42:51问题描述 ...

  5. ajax对象属性withCredentials

    默认情况下,ajax跨源请求不提供凭据(cookie.HTTP认证及客户端SSL证明等).通过将设置ajax的withCredentials属性设置为true,可以指定某个请求应该发送凭据.如果服务器 ...

  6. this面试题

    // 考题1 /*function Fn() { console.log(this);//window } Fn(); new Fn();//Fn实例 Fn.apply(Fn); //将this指向F ...

  7. SVG 2D入门10 - 滤镜

    滤镜称得上是SVG最强大的功能了,它允许你给图形(图形元素和容器元素)添加各种专业软件中才有的滤镜特效.这样你就很容易在客户端生成和修改图像了.而且滤镜并没有破坏原有文档的结构,所以维护性也很好.   ...

  8. [GodLove]Wine93 Tarining Round #2

    比赛链接: http://acm.hust.edu.cn/vjudge/contest/view.action?cid=44704#overview 题目来源: ZOJ Monthly, June 2 ...

  9. mybatis 注意问题

    <insert id="insertSelective" parameterType="com.hengxin.qianee.model.TalentUser&qu ...

  10. Python 利用pytesser模块识别图像文字

    使用的是python的pytesser模块,原先想做的是图片中文识别,搞了一段时间了,在中文的识别上还是有很多问题,这里做记录分享. pytesser,OCR in Python using the ...