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)括号里面的值一次是新建的节点和需要替换的节点

时间: 2024-10-24 13:15:08

HTML DOM Element的相关文章

Ext.dom.Element 常用方法解析

Ext.Element,Ext.core.Elemen,Ext.dom.Element 这几个类都是一个类,在EXT当中给起了别名而已,这个类到作用主要是针对DOM元素操作的封装,使我们操作针对DOM操作更加方便了,而且底层屏蔽了浏览器到差异. 那么如何返回一个Ext.Element对象呢?通过Ext.get(el)就可以了. 参数 el : String/HTMLElement/Ext.Element(The id of the node, a DOM Node or an existing

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

今天在更新项目后进行编译时,出现如下错误一堆: Google之,在stackoverflow上看到如下的解决方法: I came here with the same problem. Even worse: I had two projects side by side, both targetting the same JRE (1.6), and one was able to resolve Node.getTextContent() while the other wasn't. I

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

org.w3c.dom.Element 缺少 setTextContent 方法 今天将项目环境由jdk5改为jdk6,eclipse重新编译工程后,却突然出现org.w3c.dom.Element没有setTextContent方法 的编译错. 放狗搜后,发现主要是 xercesImpl.jar 和 xml-apis.jar的Element版本太老造成的,setTextContent是DOM3中的方法. 但在pom文件中,未发现有直接引用这两个jar包的地方.好在eclipse maven插件

webpacck打包完react后引入到html文件中报错:Target container is not a DOM element...

手动写了一个react程序,用webpack打包后生成了一个bundle,js文件,然后引入到index.html文件夹后,在浏览器打开该html文件,报错Target container is not a DOM element,一直找原因发现是引入bundle.js的顺序不对,应该放在div元素的下方,下面具体看代码 react相关js内容 var React = require('react');var ReactDom = require('react-dom');const eleme

DOM Element节点类型详解

1.概况 Element 类型用于表现 HTML 或 XML 元素,提供了对元素标签名.子节点及特性的访问. Element 节点具有以下特征: nodeType 的值为 1 nodeName 的值为元素的标签名 nodeValue 的值为null parentNode 可能是 Document 或者 Element 其子节点可能是 Element.Text.Comment.ProcessingInstruction.CDATASection 或者 EntityReference 要访问元素的标

angularJS DOM element() $compile()

我们可以使用angularJS来动态地添加和删除节点 与jQuery不同的是,html字符串需要经过$compile()方法的编译才能产生html的DOM的node 注意element()方法的使用 //通过$compile动态编译html var html="<div ng-click='test()'>}</div>"; var template = angular.element(html); var mobileDialogElement = $comp

DOM - Element 对象

http://www.runoob.com/dom/dom-element.html Element 对象 Element 对象代表 XML 文档中的一个元素.元素可以包含属性.其他元素或文本.如果一个元素包含文本,则在文本节点中表示该文本. 重要事项:文本永远存储在文本节点中.在 DOM 处理过程中的一个常见的错误是,导航到元素节点,并认为此节点含有文本.不过,即使最简单的元素节点之下也拥有文本节点.举例,在 <year>2005</year> 中,有一个元素节点(year),同

js dom element 属性整理(原创)

最近去几家公司面试,发现大多数时候面试的内容考的都是原生的js语法和属性,所以我决心整理一下原生的dom元素的属性. 首先,我我们需要获取一个element元素 <li id="2">菜单B</li> 下面列举出在 google chrome 下的属性.(图片) 1.第一块 2.第二块 3.第三块 4.第四块 5.第五块 6.第六块 7.第七块 -----------------------------------------------------     华

THML DOM / Element 对象操作

随着Vue等MVVM框架流行,操作DOM已经不想之前那么频繁,因此很多DOM的操作已经陌生,特此回顾HTML中DOM操作 获取Element节点 熟悉的有 通过ID获取,返回element对象            document.getElementById(elementId) 通过Name获取,返回element对象数组       document.getElementsByName(elementName) 通过TagName获取,返回element对象数组  document.ge