HTML DOM Element
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的更多相关文章
- 《转载》使用org.w3c.dom.Element的setTextContent()、getTextContent()方法时出现编译错误
今天在更新项目后进行编译时,出现如下错误一堆: 编译错误 Google之,在stackoverflow上看到如下的解决方法: I came here with the same problem. Ev ...
- D3中数据与DOM element绑定之data() enter() exit()浅析
几个非常有用的links: [1] three little circles. http://bost.ocks.org/mike/circles/ [2] How selection works. ...
- JQuery Object vs. DOM element
JQuery Object 和 DOM的区别 HTML DOM 定义了访问和操作HTML文档的标准方法.其中 document 是DOM 树的根对象 ,在浏览器宿主环境中,可以通过JS操作HTML D ...
- ExtJS学习之路第二步:Ext.Component 和 Ext.dom.Element 的区别
让我们来初步的探讨下Ext.Component和Ext.Element的区别. jQuery偏重于DOM元素的操作 1.每一个HTML页面都有一个层次分明的DOM树模型,浏览器中的所有内容都有相应的D ...
- 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 ...
- 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 ...
- 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 ...
- org.w3c.dom.Element 缺少 setTextContent 步骤
org.w3c.dom.Element 缺少 setTextContent 方法 今天将项目环境由jdk5改为jdk6,eclipse重新编译工程后,却突然出现org.w3c.dom.Element没 ...
- JavaScript -- 时光流逝(十二):DOM -- Element 对象
JavaScript -- 知识点回顾篇(十二):DOM -- Element 对象 (1) element.accessKey: 设置或返回accesskey一个元素,使用 Alt + 指定快捷键 ...
随机推荐
- PHP网页显示乱码问题总结
其实,乱码,都是因为编码不统一的问题导致的. 以UTF-8编码为例: 第一步,确定数据库字段的编码,字符集:urt8 第二部,PHP脚本设置编码:header('Content-Type: text/ ...
- 64位Windows2008下插入Oracle中文乱码问题解决
最近迁移一个.net应用系统从32位Windows2003升级到64位的Windows2008中,发现所有涉及中文的内容插入到Oracle数据库中都变为?,最开始以为是2008系统的字符集与Oracl ...
- NSOperationQueue与GCD的使用原则和场景
首先,我们要明确NSOperationQueue与GCD之间的关系: NSOpertaionQueue用GCD构建封装的,是GCD的高级抽象. 其次,我们要区别两者的不同: GCD仅仅支持FIFO队列 ...
- 家里蹲大学数学杂志 Charleton University Mathematics Journal 官方目录[共七卷493期,6055页]
家里蹲大学数学杂志[官方网站]从由赣南师范大学张祖锦老师于2010年创刊;每年一卷, 自己有空则出版, 没空则搁置, 所以一卷有多期.本杂志至2016年12月31日共7卷493期, 6055页.既然做 ...
- 本地新建项目提交到github
1.在github上创建项目(可以添加README.md),创建后的地址为 https://github.com/xxx/xxx-demo.git 2.在eclipse上新建个quick-start的 ...
- win10开机自动启动小键盘
打开注册表 展开到HKEY_USERS\.DEFAULT\Control Panel\Keyboard 再选择InitialKeyboardIndicators, 将其数值数据修改为2(Win7)/8 ...
- Disconf
通常我们会做如下配置:(disconf 2.6.21) <!-- 一次扫描 --> <bean id="disconfMgrBean" class="c ...
- SQL判断某列中是否包含中文字符、英文字符、纯数字 (转)
一.包含中文字符 select * from 表名 where 列名 like '%[吖-座]%' 二.包含英文字符 select * from 表名 where 列名 like '%[a-z]%' ...
- 跨平台编程:关于VS和QT那些事
1.Win平台 Qt5.7 for Win32 (VS2013) 编辑器:Qt Creator 4.0 编译器:MSVC12 for X86 (cl.exe&link.exe) 调试器:CDB ...
- MySQL中tinytext、text、mediumtext和longtext详解
一.数字类型 类型 范围 说明 Char(N) [binary] N=1~255 个字元binary :分辨大小写 固定长度 std_name cahr(32) not null VarChar( ...