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. union和union all的区别

    UNION 写一篇联合查询(把前后两个表的查询结果集合在前表中)首先有个为什么需要 相同记录数?? 记错了.应该是union两张表的查询字段数目要一致,字段类型要相似相同的数据类型,至少是相似,可转化 ...

  2. 手把手教你ARC——iOS/Mac开发ARC入门和使用

    转载自:http://www.onevcat.com/2012/06/arc-hand-by-hand/ 本文部分实例取自iOS 5 Toturail一书中关于ARC的教程和公开内容,仅用于技术交流和 ...

  3. ASP.NET在IIS7.5(IIS7)配置伪静态

    http://jingyan.baidu.com/article/67508eb4ff92c69cca1ce49a.html 我相信不少站长都遇到个头疼的问题..NET如何在IIS7或者IIS7.5下 ...

  4. 开源共享一个训练好的中文词向量(语料是维基百科的内容,大概1G多一点)

    使用gensim的word2vec训练了一个词向量. 语料是1G多的维基百科,感觉词向量的质量还不错,共享出来,希望对大家有用. 下载地址是: http://pan.baidu.com/s/1boPm ...

  5. sql server 去除(替换)空格,回车,换行 函数

    --create-- SQL去除回车符,换行符,空格和水平制表符create function RepSymbolChar(@str nvarchar(max))returns nvarchar(ma ...

  6. 每天一个 Linux 命令(19):find 命令概览

    Linux下find命令在目录结构中搜索文件,并执行指定的操作.Linux下find命令提供了相当多的查找条件,功能很强大.由于find具有强大的功能,所以它的选项也很多,其中大部分选项都值得我们花时 ...

  7. Drools mvel方言drl断点调试方法

    开发环境:myeclipse2014,  jdk1.8.0.91,drools6.4.0.Final, drools-eclipse-plugin,mvel2-2.2.6.Final问题描述:drl使 ...

  8. Tree:加载列表数据

    Tree控件,需要提供一个树形的JSON数据,才能正常显示. 通常,开发者在后台可以这样做: 1)从数据库查询出一个列表数据 2)在后台,将列表数据转换为树形数据 3)通过JSON方式返回 在前台页面 ...

  9. MVC中使用内建的HTML辅助方法产生表单元素提交表单与button按钮事件的陷阱

    网站模板页有个登陆的退出按钮,当点击时跳转到登陆页面. <button onclick="logout()" >退出</button> $("#l ...

  10. 使用Servlet上传文件

    使用浏览器向服务器上传文件其本质是打开了一个长连接并通过TCP方式传输数据.而需要的动作是客户端在表单中使用file域,并指定该file域的name值,然后在form中设定enctype的值为mult ...