HTML DOM Element(元素)
文档本身是文档节点 .
所有 HTML 元素是元素节点 .
所有 HTML 属性是属性节点
HTML 元素内的文本是文本节点 .
注释是注释节点 .

NODE的用法

1.如需向 HTML DOM 添加新元素,您首先必须创建该元素,然后把它追加到已有的元素上。
创建新的 HTML 元素 使用appendChild()

appendChild()实例如下:

<div id="div1">
<p id="p1">我是一</p>
<p id="p2">我不二</p>
</div>Html代码

JS代码:
var para=document.createElement("p");
这段代码创建了一个新的 <p> 元素:

var node=document.createTextNode("我是三");
向p元素添加文本,必须创建文本节点。这段代码创建文本节点

para.appendChild(node);
向已有元素追加这个新元素

var element=document.getElementById("div1");
查找已有的元素

element.appendChild(para);
向已存在的元素增加新元素

2.删除已有的节点:removeChild()
实例如下:
<dl id="dl1">
<dd id="dl4">我</dd>
<dd id="dl3">要</dd>
<dd id="dl2">加</dd>
</dl>
首先要找到要被删除节点的父节点
var ul=document.getElementById("dl1");

然后选中要被删除的节点
var li=document.getElementById("dl4")

最后就是执行删除
ul.removeChild(li)

上述代码就会删除dd标签。

3.替换元素:replaceChild(新节点,旧节点)
实例如下:
<div id="div1">
<p id="p1">诸葛</p>
<p id="p2">孔明</p>
<p id="p3">关羽</p>
<p id="p4">云长</p>
</div>
var para=document.createElement("p");
var node=document.createTextNode("卧龙");
para.appendChild(node);
var parent=document.getElementById("div1");
var child=document.getElementById("p2");
parent.replaceChild(para,child);
替换指定元素首先还是要建立新的节点
然后再找到它的父节点
最后执行转换replaceChild(para,child)括号里面的值一次是新建的节点和需要替换的节点

HTML DOM Element的更多相关文章

  1. 《转载》使用org.w3c.dom.Element的setTextContent()、getTextContent()方法时出现编译错误

    今天在更新项目后进行编译时,出现如下错误一堆: 编译错误 Google之,在stackoverflow上看到如下的解决方法: I came here with the same problem. Ev ...

  2. D3中数据与DOM element绑定之data() enter() exit()浅析

    几个非常有用的links: [1] three little circles. http://bost.ocks.org/mike/circles/ [2] How selection works.  ...

  3. JQuery Object vs. DOM element

    JQuery Object 和 DOM的区别 HTML DOM 定义了访问和操作HTML文档的标准方法.其中 document 是DOM 树的根对象 ,在浏览器宿主环境中,可以通过JS操作HTML D ...

  4. ExtJS学习之路第二步:Ext.Component 和 Ext.dom.Element 的区别

    让我们来初步的探讨下Ext.Component和Ext.Element的区别. jQuery偏重于DOM元素的操作 1.每一个HTML页面都有一个层次分明的DOM树模型,浏览器中的所有内容都有相应的D ...

  5. highlight a DOM element on mouse over, like inspect does

    highlight a DOM element on mouse over, like inspect does highlight a DOM element on mouse over, like ...

  6. Is it possible to implement a Firebug-like “inspect element” DOM element highlighter with client-side JavaScript?

    Is it possible to implement a Firebug-like "inspect element" DOM element highlighter with ...

  7. How do I pull a native DOM element from a jQuery object? | jQuery Learning Center

    How do I pull a native DOM element from a jQuery object? | jQuery Learning Center How do I pull a na ...

  8. org.w3c.dom.Element 缺少 setTextContent 步骤

    org.w3c.dom.Element 缺少 setTextContent 方法 今天将项目环境由jdk5改为jdk6,eclipse重新编译工程后,却突然出现org.w3c.dom.Element没 ...

  9. JavaScript -- 时光流逝(十二):DOM -- Element 对象

    JavaScript -- 知识点回顾篇(十二):DOM -- Element 对象 (1) element.accessKey: 设置或返回accesskey一个元素,使用 Alt + 指定快捷键 ...

随机推荐

  1. Dual Number

    http://ncatlab.org/nlab/show/dual+number http://mathworld.wolfram.com/DualNumber.html https://en.wik ...

  2. Java使用poi操作cexel

    Java操作excel比较简单,但是时间长了就会忘记,因此基本的简单操作做个记录. 依赖poi的jar包,pom.xml配置如下: <project xmlns="http://mav ...

  3. Oracle补习班第三天

    In every triumph, there's a lot of try. 每个胜利背后都有许多尝试 Oracle管理实例组件 主要组件分为两部分例程,与数据库: 例程分为两部分SGA跟进程: S ...

  4. 评论Final版本发布

    1.  新蜂:俄罗斯方块 产品方面:俄罗斯方块在Beta版本基础上新增了许多功能,其中游戏中按A键可以开启瞄准,这个功能在市面上是具有先发优势的,算是一个较大的亮点:在改进了文字ui和方块的贴图以及游 ...

  5. CSS第二章

    1. 文本与字体属性: text-decoration:文本修饰线  none(去除修饰线).underline(下划线).overline(上划线).line-through(删除线) color: ...

  6. 第二周:If判断语句程序当中的作用简介

    1.If语句的作用: 在我们编写程序时经常会遇到内容判断的问题,比如判断内容的真假或者值的大小分别输出内容的问题 这时就会用到我们的If判断语句了,顾名思义,if在英文单词中意思为如果,在Java中他 ...

  7. Esfog_UnityShader教程_前言

    很多人在学习Unity的时候对Shader都是一知半解,作为刚入职半年的新人接触Shader的时间也并不长,正因为是新人才能体会到学习Shader时候所遇到的困难和迷茫,无奈于资料不好找,网上难得的几 ...

  8. UIViewContentMode各类型效果

    UIViewContentMode   typedef enum {    UIViewContentModeScaleToFill,    UIViewContentModeScaleAspectF ...

  9. IIS7下ajax报未定义错误

    项目之前在iis6环境下运行的很好,今天在WIN7下发布,结果居然报对象未定义错误,经过个把小时折腾,终于弄清楚原委. 在web.config中关于AjaxPro的设置,在IIS7.0(WIN7中使用 ...

  10. window.frame

    定义和用法 frames 属性返回窗口中所有命名的框架. 该集合是 Window 对象的数组,每个 Window 对象在窗口中含有一个框架或 <iframe>.属性 frames.leng ...