javascript——DOM之replaceChild

父级.replaceChild(新节点,被替换节点) 替换子节点

HTML部分:

<body>
    <div id="div1">div1</div>
    <input type="button" value="按钮" id="btn" />
    <hr />
    <p id="p1">ppppp</p>
</body>

js部分:

window.onload = function() {

    var oDiv = document.getElementById(‘div1‘);
    var oBtn = document.getElementById(‘btn‘);
    var oP = document.getElementById(‘p1‘);

    oBtn.onclick = function() {

        // document.body.replaceChild( oDiv, oP );

        /*
            appendChild,insertBefore,replaceChild都可以操作动态创建出来的节点,也可以操作已有节点
        */
        //oP.appendChild( oDiv );

    };

};
时间: 2024-08-25 07:05:33

javascript——DOM之replaceChild的相关文章

【JavaScript】JavaScript DOM 编程

在开发的时候,最主要是对DOM进行操作.DOM:Document Object Model 文本对象模型.DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构. DOM是针对xml(HTML)的基于树的API. DOM树:表示的是节点的层次,如下图: DOM节点及其类型:HTML文档中的所有的内容都是节点. 元素节点:每一个HTML元素是一个元素节点. 属性节点:元素的属性,属性节点,可以直接通过属性的方式来操作. 文本节点:是元素节点的子节点,其内容为文本. 例:<li id

JavaScript Dom操作-增删改节点1

一.Dom操作 文档对象模型DOM:一套定义.规范.准则 为了能够让程序JavaScript去操作页面中的元素节点而定义的一套标准 DOM会把文档看作是一棵树,页面中的每个元素就是树上的一个一个节点:同时DOM定义了很多方法.属性等来操作这棵树中的每一个元素(节点)——每个节点称为DOM节点. 1.  节点.children      ——      (没有兼容性问题:只包含元素节点)   获取第一级子元素 childNodes    获取第一级子元素   有兼容性问题(标准浏览器文本和元素视为

javascript DOM 操作基础知识小结

经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的. DOM添加元素,使用节点属性 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.

JavaScript DOM(二)

HTML元素特性与DOM属性 Element类型节点 Text类型节点 HTML元素特性与DOM属性 HTML标签中的attribute和DOM对象的property是比较容易混淆的两个概念,实际上这二者对于理解"文档对象模型"是十分重要的.通常我们会把HTML标签的attribute译为"特性"而把DOM对象的property译为"属性". 文档对象模型(DOM)是针对HTML和XML文档的一个API.DOM描绘了一个层次化的节点树,它允许我们

javascript DOM 操作

在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Model(文本对象模型). D : 文档(html或xml文档) O : 对象(文档对象) M : 模型 1.2.DOM结构 DOM将文档以家谱树的形式来表现. 下面是一个简单的html文档,我们可以看出该文档的DOM结构如下 1 <!DOCTYPE html> 2 <html> 3 <

javaScript DOM编程常用的方法与属性

DOM是Document Object Model文档对象模型的缩写.根据W3C DOM规范,DOM是一种与浏览器,平台,语言无关的接口,使得你可以访问页面其他的标准组件. Node接口的特性和方法 特性/方法 类型/放回类型 说明 nodeName String 节点的名字:根据节点的类型而定义 nodeValue String 节点的值:根据节点的类型而定义 nodeType Number 节点的类型常量值之一 ownerDocument Document 指向这个节点所属的文档 first

javascript DOM操作HTML文档

文档对象模型(DOM)是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准.W3C将文档对象模型定义为:是一个能让程序和脚本动态 访问和更新文档内容.结构和样式的语言平台.提供了标准的HTML和XML对象集,并有一个标准接口来访问并操作他们,即任何一个 html 元素可以使用 JavaScript DOM 动态访问和控制. 1. DOM概述 文档对象模型定义了JavaScript可以进行操作的浏览器,描述了文档对象的逻辑结构及各个功能组件的标准接口.主要包括以下内容: 核心Jav

JavaScript : DOM文档解析详解

JavaScript DOM  文档解析 1.节点(node):来源于网络理论,代表网络中的一个连接点.网络是由节点构成的集合 <p title=“a gentle reminder”> Don’t forget to buy this stuff.</p> 节点及其类型 元素节点: 属性节点:元素的属性,可以直接通过属性的方式来操作 文本节点:元素节点的子节点,其内容通常为文本 2.Node接口的特性和方法 现在给出一个演示的HTML文件: html <!doctype h

Javascript Dom编程艺术(第2版)读书笔记

Javascript Dom编程艺术这本书我看的是第2版的,真心觉得这本书不错,它将DOM编程的一些基本原则,及如何让Javascript代码在浏览器不支持的情况下,或浏览器支持了Javascript但用户禁用它的情况下做到平衡退化,让最基本的操作仍能顺利完成,以及如何让结构与样式分享做到真正的渐近增强叙述得很清楚,也很容易理解接受.我也是看了这本书之后,才对代码优化,结构,行为,样式有了进一步的加深理解. Javascript Dom编程艺术(第2版)读书笔记,布布扣,bubuko.com