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开发UI篇—Button基础
iOS开发UI篇—Button基础 一.简单说明 一般情况下,点击某个控件后,会做出相应反应的都是按钮 按钮的功能比较多,既能显示文字,又能显示图片,还能随时调整内部图片和文字的位置 二.按钮的三种状 ...
- 用Handler图片轮播练习
XML代码 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:andr ...
- IntelliJ IDEA 使用总结
IntelliJ IDEA 使用总结 http://my.oschina.net/xianggao/blog/97539 IntelliJ IDEA 问题解决:1.乱码,主要是快捷键的字样显示乱码 中 ...
- ubuntu下minicom和USB转串口(转)
ubuntu下minicom和USB转串口(转) minicom是linux下串口通信的软件,它的使用完全依靠键盘的操作,虽然没有“超级终端”那么易用,但是使用习惯之后读者将会体会到它的高效与便利 ...
- Ubuntu下Speedtest的安装
要安装Speedtest,需要先安装apache,参见<Ubuntu下Apache的安装>一文:*(再安装LAMP server,参见<Ubuntu下快速安装LAMP server& ...
- 链式编程中的next()和end()
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 2016 - 1 - 23 xml解析 -- 语法简介
一: XML的概念 1. 一种可拓展标记语言 2. 与json一样,也是一种常用的数据交互格式 3. 一般也叫XML文档---XML Document 二: XML语法 1.一个完整的XML文档一 ...
- 第十三周学习笔记(编辑器选错了重发了这一个 原博客的确周天晚上提交了orz)
并发:逻辑控制流在时间上的重叠. 构造并发程序的方法: 进程 I/O多路复用 线程 基于进程的并发编程 假设我们有两个客户端和一个服务器,服务器正在监听一个监听表述符上的请求.现在假设服务器接受了客户 ...
- Socket编程基础——面向连接TCP
WinSock是Windows环境下的网络编程接口,它最初是基于Unix环境下的BSD Socket,是一个与网络协议无关的编程接口.WinSock包含两个主要版本,即WinSock1和WinSock ...
- Sublime Text 快捷键及插件安装
Sublime Text是一款跨平台的编辑器,它小巧绿色且速度非常快,支持各种流行编程语言的语法高亮.代码补全等,插件非常丰富!editplus.notepad++也都是不错的工具,体积轻巧,启动迅速 ...