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. git学习4:分支管理

    每次提交,Git都把它们串成一条时间线,这条时间线就是一个分支.截止到目前,只有一条时间线,这个分支叫主分支,即master分支,HEAD指向master,master指向提交,所以,HEAD指向的就 ...

  2. va_copy

    #include <stdio.h> #include <stdarg.h> void func(char* format, va_list ptr); void print( ...

  3. Android 组件类继承关系结构图

  4. [杂] BOSE QC15维修小记

    有一句话大概是这样说的“其他的耳机是靠嘴说的,BOSE是靠耳朵听的”,2010年就开始馋QC3,直到2012年在Vancouver的BOSE店里,在震耳欲聋的模拟噪音中带上QC15那一刻,下了决心. ...

  5. Unity3D人物头顶名称与血条更新与绘制

    using UnityEngine; using System.Collections; public class NPC : MonoBehaviour { //主摄像机对象 private Cam ...

  6. Django中提示TemplateDoesNotExist?

    用的是1.9版本.需要在settings.py文件中设置TEMPLATES下的DIRS如下: TEMPLATES = [ { 'BACKEND': 'django.template.backends. ...

  7. oracle中having的用法

    having的用法,having一般是用在group的后面,用在前面查询结果相同,但是语法上不通顺.答:having是对行组进行过滤.一般是先用where 过滤返回行,用group by 对过滤后的行 ...

  8. cordova + ionic 使用中碰到的一些问题

    cordova + ionic 使用中碰到的一些问题     No Content-Security-Policy meta tag found. Please add one when using ...

  9. Oracle诡异结果调查备忘 - A investigation memo of weird Oracle database search results

    最近需要维护一个差不多十多年前开发的ASP.Net程序,遇到了各种奇奇怪怪的问题,把其中比较难查明的问题记录如下: 问题一: 同样的SQL查询在不同服务器上查询结果不同.在QA环境下,结果完全正常,而 ...

  10. Spark Streaming源码解读之Driver容错安全性

    本期内容 : ReceivedBlockTracker容错安全性 DStreamGraph和JobGenerator容错安全性 Driver的安全性主要从Spark Streaming自己运行机制的角 ...