DOM节点的修改
首先,我们将最后段落赋值给变量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节点的修改的更多相关文章
- JS 操作Dom节点之CURD
许多优秀的Javascript库,已经封装好了丰富的Dom操作函数,这可以加快项目开发效率.但是对于非常注重网页性能的项目来说,使用Dom的原生操作方法还是必要的. 1. 查找节点 document. ...
- (转载)html dom节点操作(获取/修改/添加或删除)
DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准,下面为大家介绍下html dom节点操作,感兴趣的朋友可以参考下 HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素 ...
- 深入理解DOM节点操作
× 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...
- DOM 节点的克隆与删除
无奈的开头 关于DOM节点操作,如果仅仅是根据标准API来操作,那是最简单不过的了.但是现实中却哪有这么容易的问题让我们解决,其实不仅仅是节点的克隆与删除,节点的添加也是如此,而且添加节点需要考虑的情 ...
- jQuery学习-css、class操作、动画方法的运用、jQ操作Dom节点
css操作(设置单个/多个样式.获取样式) //修改单个属性:括号之中直接是需要修改的样式名,值 css(name,value) //例:$("#one").css("b ...
- JS 操作Dom节点之样式
为了提高用户体验,我们经常会动态修改Dom节点的样式,各种浏览器差异比较大,我们如何应对?不断尝试,不断总结~! 1. style.getComputedStyle.currentStyle 内嵌样式 ...
- JavaScript操作DOM节点
DOM (文档对象模型(Document Object Model)) 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网 ...
- JavaScript函数使用和DOM节点
一.函数的声明与调用 1.函数声明的格式: function 函数名(参数1, 参数2,....){ 函数体代码 return 返回值:} 2.函数的调用:①直接调用:函数名(参数1的值,参数2的值, ...
- jacascript DOM节点——节点关系与操作
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 节点关系 DOM可以将任何HTML描绘成一个由多层节点构成的结构.每个节点都拥有各自的特点.数据和方法,也 ...
随机推荐
- iOS开发拓展篇—xib中关于拖拽手势的潜在错误
iOS开发拓展篇—xib中关于拖拽手势的潜在错误 一.错误说明 自定义一个用来封装工具条的类 搭建xib,并添加一个拖拽的手势. 主控制器的代码:加载工具条 封装工具条以及手势拖拽的监听事件 此时运行 ...
- bzoj 3170: [Tjoi 2013]松鼠聚会
#include<cstdio> #include<iostream> #include<algorithm> #define M 100008 using nam ...
- 记录一次fat32格式U盘不识别问题
升级了4.1.15内核发现U盘不识别了,考虑到内核编译前的配置是通过localmodconfig完成的,所以大略是缺模块导致. 于是开始查配置,USB控制器,EHCI,mass storeage de ...
- Python操作文件文档
需要帮老师将44G的图书分类一下,人工当然累死了.所以用Python大法处理一下. 思路是读取文件目录下的书名,然后去百度百科查分类,如果还没有就去豆瓣,当当查.哪一个先找到其余的就不用找了.如果没有 ...
- reverse-daily(1)-audio_visual_receiver_code
本人第一篇随笔,就以一篇CTF逆向分析的文章开始吧! 链接:http://pan.baidu.com/s/1eS6xFIa 密码:u14d 因为re的分析比较琐碎,所以主要就挑一些重点东西来说. 据说 ...
- Win10/UWP新特性系列—电池报告
UWP中,新增了当节电模式开启时,App能获取到通知的API,通过响应电源条件的更改,比如咨询用户是否使用黑色背景等来帮助延长电池使用时间. 通过Windows.Devices.Power命名空间中的 ...
- Smart210学习记录-----SD/MMC/SDIO驱动
转自:http://jingpin.jikexueyuan.com/article/23369.html http://blog.csdn.net/evilcode/article/details/7 ...
- iOS开发之Objective-C与JavaScript的交互(转载)
UIWebView是iOS最常用的SDK之一,它有一个stringByEvaluatingJavaScriptFromString方法可以将javascript嵌入页面中,通过这个方法我们可以在iOS ...
- 初次学习c语言
#include<stdio.h> main(){ int o,p,q; scanf("%d%d",&o,&p); q=o+p; printf ...
- mm/vmalloc.c
/* * linux/mm/vmalloc.c * * Copyright (C) 1993 Linus Torvalds */ #include <asm/system.h>#in ...