方法  描述
var newP=createElement("p"); 创建了一个p标签，p也可替换为div，span等

var oldTxt=createTextNode("this is old text");

 创建文本节点，创建了内容为“this is old text”的文本
newP.appendChild(newTxt); 向p标签中插入定义好的newTxt变量
newP.removeChild(newTxt); 删除刚刚插入的文本内容

var newTxt=createTextNode("this is new text");

newP.replaceChild(newTxt，oldTxt)

 替换节点，返回文本内容为”this is new text"的p元素

下面是一个初始页面：

这里是修改之后页面：

分析一下：

1.删除了标题元素

2.将图片替换成了文本

3.添加一个内容为The End的新元素

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    //删除标题，我们需要先找到标题元素
    window.onload=function(){
        var hdr1=document.getElementById("hdr1");
        //通过它自身找到它的父元素,进而删除它自身
        hdr1.parentNode.removeChild(hdr1);
        //下面我们需要把图片替换成文本
        //找到图片元素
        var img1=document.getElementById("img1");
        //创建一个文本节点
        var newTxt=document.createTextNode("new text node");
        //进行替换
        img1.parentNode.replaceChild(newTxt, img1);
        //添加新元素
        //首先要创建一个新元素
        var newDiv=document.createElement("div");
        //为其添加内容
        newDiv.innerHTML="<h1>The End</h1>";
        //向页面中添加div元素
        document.body.appendChild(newDiv);
    }
    </script>
</head>
<body>
    <div id="div1">
        <h1 id="hdr1">Header</h1>
        <p id="p1">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
    </div>
    <p id="p2">
        Second paragraph with image.     <img id="img1" src="wp_b0.jpg" alt="">
    </p>
</body>
</html>

document对象相关的几个常用的方法的更多相关文章

  1. document对象常用属性

    转载请注明来源:https://www.cnblogs.com/hookjc/ 注:页面上元素name属性和JavaScript引用的名称必须一致包括大小写    否则会提示你一个错误信息 " ...

  2. DOM中document对象的常用属性方法

    每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1  document.anchors  返 ...

  3. js基础之DOM中document对象的常用属性方法

    -----引入 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1  document.an ...

  4. Javascript学习8 - 脚本化文档(Document对象)

    原文:Javascript学习8 - 脚本化文档(Document对象) 每个Web浏览器窗口(或帧)显示一个HTML文档,表示这个窗口的Window对象有一个document属性,它引用了一个Doc ...

  5. BOM对象，math对象document对象的属性和操作和 事件的基本操作

    Math对象 //该对象中的属性方法 和数学有关. abs(x) 返回数的绝对值. exp(x) 返回 e 的指数. floor(x) 对数进行下舍入. log(x) 返回数的自然对数(底为e). m ...

  6. JavaScript (JS)基础：BOM 浅析 (含window对象相关基本方法、属性解析)

    ① window对象(Math方法也属于window对象): window对象是JavaScript中的顶级对象,所有定义在全局作用域中的变量.函数都会变成window对象的属性和方法,window对 ...

  7. 报表软件JS开发引用HTML DOM的location和document对象

    上一次提到,在报表软件FineReport的JavaScript开发中,可以访问并处理的HTML DOM对象有windows.location.document三种.这次就继续介绍后两种,locati ...

  8. Window.document对象

    1.Window.document对象 一.找到元素: docunment.getElementById("id"):根据id找,最多找一个:     var a =docunme ...

  9. HTML DOM Document 对象

    HTML DOM Document 对象 HTML DOM 节点 在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点: 文档是一个文档. 所有的HTML ...

随机推荐

  1. Load ContextCLR 探测

    目录 背景Load ContextCLR 探测过程弱签名程序集的探测过程强签名程序集的探测过程Default ContextLoad-From ContextNo ContextRelfection- ...

  2. highlight高亮

    玩转正则之highlight高亮 2013-10-07 05:16 by 靖鸣君, 584 阅读, 3 评论, 收藏, 编辑 程序员在编写代码的时候少不了和字符串以及“查询”打交道,两者的交集中有一个 ...

  3. Ionic.Zip.dll文件压缩和解压

    Ionic.Zip.dll文件压缩和解压 下载地址: http://download.csdn.net/detail/yfz19890410/5578515 1.下载Ionic.Zip.dll组件,添 ...

  4. 风萧萧兮易水寒 coding一去兮不复还

    这一年都在忙碌中渡过.没有看过日落没有享受过日常.希望可以在忙碌中有些收获.工作马上要三年了. 风萧萧兮易水寒 coding一去兮不复还 记的刚毕业的时候喜欢自己晚上更新下博客.那时候也很忙.但是后来 ...

  5. Arduino 不同Arduino衍生板子的问题

    arduino IDE装上的时候,要记得在windows平台安装驱动. 如果不安装驱动的话,烧写程序的时候也许会遇到下面的现象. 原因有如下几种: 1,arduino控制板或者COM口没有选对,这种问 ...

  6. [置顶] 如何高效使用和管理Bitmap--图片缓存管理模块的设计与实现

    传送门 ☞ 轮子的专栏 ☞ 转载请注明 ☞ http://blog.csdn.net/leverage_1229 上周为360全景项目引入了图片缓存模块.因为是在Android4.0平台以上运作,出于 ...

  7. HNCU1323：算法2-1：集合union (线性表)

    http://hncu.acmclub.com/index.php?app=problem_title&id=111&problem_id=1323 题目描述 假设利用两个线性表LA和 ...

  8. Ubuntu 12.04(所有ubuntu发行版都适用)sudo免输入密码

    首先执行以下命令(该命令用来修改 /etc/sudoers 文件): $ sudo gedit /etc/sudoers 然后把  %sudo    ALL=(ALL:ALL) ALL  这行注释掉, ...

  9. vsftpd配置seccomp_sandbox=NO

    在ubuntu14.04 配置vsftp时如果不加上seccomp_sandbox=NO这一句会出现莫名的530错误

  10. c++内存对齐 转载

    转载自http://blog.csdn.net/chengonghao/article/details/51674166 例子举的特别好 很多文章大概都有像这样的结论: 1． 数据项只能存储在地址是数 ...