方法  描述
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. TFS二次开发的数据统计以PBI、Bug、Sprint等为例（一）

    TFS二次开发的数据统计以PBI.Bug.Sprint等为例(一) 在TFS二次开发中,我们可能会根据某一些情况对各个项目的PBI.BUG等工作项进行统计.在本文中将大略讲解如果进行这些数据统计. 一 ...

  2. [原]MobileSubstrate 工作流程

    [附-腾讯安全管家替换 MobileSubstrate 的流程] com.qq.mqqsecure.deb-postinst--->QSCommand--->QSTempRunner

  3. 使用元组Tuple，返回多个不同类型的值

    记得我在不知道Tuple时,如果想实现调用某个函数时,返回多个值,则需要使用ref或者out了. string name = ""; int result= GetInfo(ref ...

  4. RTB撕开黑盒子 Part 3: Beyond Surplus

    在本文中,我将解释如果要对整个推广计划最大化利润,决定是否应该出价的应该是期望回本率(ROI),而不是期望利润,这与我们以前介绍的有所不同.在Datacratic,我们已经在2012年底切到了基于RO ...

  5. 广告基本知识-ROI分解

    任何一个在线广告系统,都面临ROI的问题,对于Invest,我们先不考虑,因为对于流量有多种方式可以买回,也无法优化(当然在RTB的时候是可以优化的).Return是主要优化的方向,Return=点击 ...

  6. 关于JS函数的bind

    昨天被人问到js的bind的作用是什么? 这个倒还能回答出来,bind 之后返回一个新的函数,这个函数可以保持传递的this上下文. 接着又问了,那么bind两次不同的上下文会怎样? 这个一下子就蒙了 ...

  7. bin文件和elf文件

    ELF文件格式是一个开放标准,各种UNIX系统的可执行文件都采用ELF格式,它有三种不同的类型: 可重定位的目标文件(Relocatable,或者Object File) 可执行文件(Executab ...

  8. linux 网络编程：客户端与服务器通过TCP协议相互通信 + UDP

    1.TCP编程的客户端一般步骤: 1.创建一个socket,用函数socket(): 2.设置socket属性,用函数setsockopt():* 可选: 3.绑定IP地址.端口等信息到socket上 ...

  9. tampermonkey，采用js解析自定义脚本，实现网页列表数据采集分析

    最近一直在做数据采集的事情,目的是使用java开发一套分析指定采集规则,模拟用户动作做数据提取.因此定义了一套动作脚本,open,click,get,list,opentab,closetab...j ...

  10. SR-IOV简介

    转载:http://docs.oracle.com/cd/E38902_01/html/E38873/glbzi.html SR-IOV 技术是一种基于硬件的虚拟化解决方案,可提高性能和可伸缩性.SR ...