- 浏览: 761636 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (573)
- Java基础 (76)
- C++基础 (5)
- hibernate (5)
- struts (4)
- spring (1)
- webservice (7)
- AjaX基础 (0)
- JS脚本 (53)
- 正则表达式 (5)
- html脚本 (30)
- 数据库基础 (54)
- 工作相关 (49)
- 其他 (30)
- Linux (9)
- web服务器 (17)
- JSP (13)
- eclipse (6)
- 面试题相关 (20)
- XML (3)
- Apache common (2)
- 生活 (35)
- VMware (1)
- log4j (9)
- BeanUtils (2)
- 设计模式 (3)
- UML (1)
- UNIX (1)
- ibats (5)
- GT-Grid (17)
- ABAP学习 (17)
- ABAP (35)
- ABAP--ALV (11)
- ABAP--WEBDIMPRO (0)
- abap-sample (1)
- BEMS (2)
- flex (33)
- GIS技术 (3)
最新评论
1、创建节点
createElement()
var node = document.createElement(“div”);
没什么可说的,创建一个元素节点,但注意,这个节点不会被自动添加到文档(document)里。
2、创建文本节点
createTextNode()
var value = document.createTextNode(“text”);
创建一个文本节点,常用来往元素节点里添加内容,也不会自动添加到文档里。
很多人知道innerHTML,不知道这个方法,这个添加的是静态文本,如果插入的内容不带HTML格式,用createTextNode比innerHTML安全,而innerText又有浏览器不兼容的问题,因此用createTextNode很好使。
3、插入节点到最后
appendChild()
node.appendChild(value);
将节点插入到最后,上面两个创建的节点不会自动添加到文档里,所以就要使appendChild来插入了。
如果是新的节点是插入到最后,而如果是已经存在的节点则是移动到最后,这点很多人注意不到,理解了这点,再和下面的方法结合,可以方便的移动操作节点。
4、插入节点到目标节点的前面
insertBefore()
var node = document.createElement(“div”);
var _p = document.createElement(“p”);
var _span = document.createElement(“span”);
node.appendChild(_p);
node.insertBefore(_span, _p);
<span>节点在<p>节点前面插入,其中第二个参数是可选,如果第二个参数不写,将默认添加到文档的最后,相当于appendChild。
同样,appendChild和insertBefore,如果是已存在节点,他们都会自动先删除原节点,然后移动到你指定的地方。
将节点移动到最前面的技巧:
if (node.parentNode.firstChild) node.parentNode.insertBefore(node, node.parentNode.firstChild);
else node.parentNode.appendChild(node);
5、复制节点
cloneNode(boolean)
node.cloneNode(true);
node.cloneNode(false);
复制上面的div节点,参数true,复制整个节点和里面的内容;false,只复制节点不要里面的内容,复制后的新节点,也不会被自动插入到文档,需要用到3和4的方法去插入。
6、删除节点
removeChild()
node.removeChild(_p);
把上面的<p>节点从<div>里删除。不过一般情况下,不知道要删除的节点的父节点是什么,因此一般这么使:node.parentNode.removeChild(node);
7、替换节点
repalceChild(newNode, oldNode)
node.repalceChild(_p, _span);
把上面的<span>节点替换成<p>节点,注意无论是<span>还是<p>,都必须是<div>的子节点,或是一个新的节点。
8、设置节点属性
setAttribute()
node.setAttribute("title","abc");
不解释了,很容易明白。就说一句,用这个方法设置节点属性兼容好,但class属性不能这么设置。
9、获取节点属性
getAttribute()
node.getAttribute("title");
同8,获取节点属性。
10、判断元素是否有子节点
hasChildNodes
node.hasChildNodes;
返回boolean类型,因此将新节点插入到最前面的技巧:
var node = document.createElement(“div”);
var newNode = document.createElement(“p”);
if (node.hasChildNodes) node.insertBefore(newNode, node.firstChild);
else node.appendChild(node);
最后是DOM的属性:
nodeName - 节点的名字;
nodeType - 返回一个整数,代表这个节点的类型,1-元素节点,2-属性节点,3-文本节点;
nodeValue - 返回一个字符串,这个节点的值;
childNodes - 返回一个数组,数组由元素节点的子节点构成;
firstChild - 返回第一个子节点;
lastChild - 返回最后一个子节点;
nextSibling - 返回目标节点的下一个兄弟节点,如果目标节点后面没有同属于一个父节点的节点,返回null;
previousSibling - 返回目标节点的前一个兄弟节点,如果目标节点前面没有同属于一个父节点的节点,返回null;
parentNode - 返回的节点永远是一个元素节点,因为只有元素节点才有可能有子节点,document节点将返回null;
发表评论
-
JavaScript事件
2010-05-13 14:37 1233事件(上) JavaScript事件列表 事件 解说 一般 ... -
flex学习
2010-05-06 20:17 772flex学习例子, -
JSON法创建JavaScript对象
2010-01-14 21:33 880<!DOCTYPE html PUBLIC " ... -
JavaScript Math 对象与函数
2010-01-14 21:16 1152Math函数 Math.abs() -- 返回 ... -
JavaScript Date 对象与函数
2010-01-14 21:14 904JavaScript_Date对象说明 Date对象构造函数 ... -
日历控件
2010-01-13 16:03 746日历控件 编辑控件 -
访问iframe里面的javascript函数、对象,兼容IE、Firefox
2009-12-29 23:16 1521假如你当前主页面中嵌入了一个iframe,ID为:iframe ... -
document.createElement("A")的相关属性
2009-12-18 17:03 1915<html> <BODY> ... -
removeChild 使用注意事项
2009-12-18 16:55 852Java代码 var giftBody = document ... -
获取HTML DOM节点元素的方法
2009-12-18 16:47 1048在Web应用程序特别是Web2.0程序开发中,经常要获取页面 ... -
js 按钮交互 元素属性获取
2009-12-18 16:44 1013<html xmlns="http://www ... -
HTML DOM selectedIndex 属性
2009-12-18 16:34 1285定义和用法 selectedIndex 属性可设置或返回下拉 ... -
hyperlink 控制
2009-12-18 16:09 914<html> <head> ... -
onchange()和onblur()
2009-12-18 15:54 1396<html> <head> ... -
js动态显示时间
2009-12-18 15:48 2759<html> <head> ... -
JS时间对象
2009-12-17 18:09 1393时间对象用来操作日期和时间。 Examples 举例 Ret ... -
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)
2009-12-16 17:40 7551判断select选项中 是否存在Value="pa ... -
javascript 暂定执行一段时间
2009-12-16 17:31 2104有人说window.setTimeout("func ... -
JS常用对象介绍
2009-12-16 17:22 848click() 对象.click() ------------ ... -
JS事件对象
2009-12-16 17:20 1153事件源对象 event.srcElement.tagName ...
相关推荐
html和svg函数将字符串模板具体化为DOM。 如果字符串模板具有多个顶级节点,则函数将返回DocumentFragment 。 // Create a DIV element. const div = html ` < div> </ div> ` ; // similar to html`<div>` // ...
28.创建一个文档元素:document.createElement(),document.createTextNode() 29.得到元素的方法:document.getElementById() 30.设置表单中所有文本型的成员的值为空: var form = window.document.forms[0] for (var i...
使用JSX构建常规DOM元素使用dom-chef,您可以使用Babel或TypeScript将JSX转换为普通的旧DOM元素,而无需使用不安全的innerHTML或笨拙的document.createElement调用。 它支持使用JSX构建常规DOM元素借助dom-chef,您...
如果你也想这么做,那么你还需要我的getElementByTagNames()函数。 代码如下:function createTOC() { var y = document.createElement(‘div’); y.id = ‘innertoc’; var a = y.appendChild(document....
本文实例讲述了jQuery获取DOM节点。分享给大家供大家参考,具体如下: jQuery中包裹后的DOM对象实际上是一个数组,...var div = document.createElement("DIV"); div.innerText = "TEST IS OK!"; document.body.appendC
var element = document.createElement('div'); 或者: var element = document.getElementById('potato'); 然后将其作为 deemitter 的构造函数参数传入: var emitter = new DOMEventEmitter(element); 此时,...
第4章 DOM基础及高级DOM技术 柳州龙腾.xml XML-无限数据传输 Test4Document.htm 访问DOM对象的相关节点 Test4Document.htm 检测节点类型 Test4Attribute.htm 节点的属性解析 get&setAttribute.htm 节点的...
节点DOM 节点的可扩展版本背景在传统的 UI 编程中,我们习惯于使用面向对象的编程来扩展组件。 例如,我们可以创建一个窗口组件,... 使用 xnode,我们可以使用构造函数而不是document.createElement函数来创建元素。 h
• 6.1.htm 对象创建与属性调用 • 6.4.htm this关键字的使用 • 6.5.htm 数组的length属性 • 6.6.htm 数组元素遍历 • 6.7.htm 数组元素遍历 • 6.8.htm 数组...
本文实例讲述了DOM节点的替换或修改函数replaceChild()用法。分享给大家供大家参考。具体分析如下: DOM节点的替换过程: (1)创建新的节点; (2)找到旧的节点;... var newli = document.createElement(‘l
DifferenceOfIE&DOM.htm IE与DOM中event对象的共性 Test4EventType.htm 获取按键代码 CheckAlt&Shift&Ctrl.htm 检测Shift、Ctrl、Alt按键 CheckScreenX&Y.htm 获取客户端鼠标指针屏幕坐标 StopContextMenu....
• 6.1.htm 对象创建与属性调用 • 6.4.htm this关键字的使用 • 6.5.htm 数组的length属性 • 6.6.htm 数组元素遍历 • 6.7.htm 数组元素遍历 • 6.8.htm 数组...
1、字符串———->jQuery对象 ...待添加列表 2、jQuery对象———->DOM对象 下标选取法(原理:jQuery是DOM的数组形式):$(“h2”)... var objE = document.createElement(div); objE[removed] = nodelist; return objE.chi
DifferenceOfIE&DOM.htm IE与DOM中event对象的共性 Test4EventType.htm 获取按键代码 CheckAlt&Shift&Ctrl.htm 检测Shift、Ctrl、Alt按键 CheckScreenX&Y.htm 获取客户端鼠标指针屏幕坐标 StopContextMenu.htm IE...
let test = document.createElement('div'); test.id = 'test'; test[removed] = '测试事件'; document.body.appendChild(test); test.addEventListener('mousedown', function(){ console.log('hello
var buttonContainerDiv = document.createElement("div"); DragZoomUtil.style([buttonContainerDiv], {cursor: 'pointer', zIndex: 150}); // create and init the zoom button //DOM:button var buttonDiv...
var form = document.createElement('form'), file = this.file; //设置属性 $$.extend(form, { target: this._iframe.name, method: "post", encoding: "multipart/form-data" }); //设置样式 ...
28.创建一个文档元素:document.createElement(),document.createTextNode() 29.得到元素的方法:document.getElementById() 30.设置表单中所有文本型的成员的值为空: var form = window.document.forms[0] for (var i...
代码如下: 代码如下: var $alertPanel = $( document.createElement(“div”) ); $alertPanel.css(“width”,”120px”).css(“height”,”50px”).text(“Hello CssRain!”); $(‘body’,parent.document).append...
在这个函数的内部,是通过临时创建一个元素,并将这个元素的 innerHTML 属性设置为给定的标记字符串,来实现标记到 DOM 元素转换的。所以,这个函数既有灵活性,也有局限性。 jQuery 代码: $("<div><p>Hello</p></...