Dom元素中的元素应用

1.创建与修改table元素:

创建表格:var a=document.createElement("table");

创建表格中的tbody,并且添加入表格a中:var b=document.createElemrnt("tbody");a.appendChild(b);

同理即可以创建添加出 行tr 列td;

另一种方法:

b.insertRow(0); //创建第一行

b.rows[0].insertCell(0); //在第一行中创建第一列

b.rows[0].cells[0].appendChild(document.createTextNode("单元格 1,1"));//在第一行第一列中添加单元格内容;

删除中示例 parentNode的使用:

<script type="text/javascript">
function a(r) {
var as = r.parentNode.parentNode.rowIndex;
document.getElementById("mytable").deleteRow(as);
}
</script>

<table id="mytable" border="1">
<tr>
<td>row 1</td>
<td><input type="button" value="删除" onclick="a(this)" /></td>
</tr>

</table>

2.innerHTML属性:

相对于DOM中的添加方法,innerHTML中更加简化;

var el=document.createElemrnt("div");

el.innerHTML=‘What are you looking at? <img src="imagename.gif" alt="I\‘m wearing glasses." height="200" width="200">‘;

一次性的插入,更DOM元素中重复添加不一样;

3.标准DOM元素修改方法:

1》创建新节点:一般create开头,具体不作列举,常用的有 createTextNode(text);

2》添加节点:appendChild();

3》删除节点:removeChild();

4》替换节点:replaceChild(new,old);

5》在特定节点之前插入:insertBefore(new,old);

6》创建一个文档碎片:createDocumentFragment();

var a=document.createDocumentFragment();

a.appendChild(op);//op代表元素,若for了很多个op元素出来,可以添加到a这个文档碎片中

document.body.appendChild(a);//添加文档碎片a

作用:若使用for添加元素op到body中,则每添加一次就会刷新一次页面,降低效率,过程缓慢,所以将添加的for全部添加到文档碎片a中,最后再一次添加入页面body,就会加快效率;

4.在DOM元素间移动:

1》通过父节点获取:
parentObj.firstChild:如果节点为已知节点parentObj的第一个子节点,就可以使用这个方法。可以递归;

parentObj.lastChild:这个属性是获取已知节点parentObj的最后一个子节点。可以递归使用;

parentObj.childNodes:获取已知节点的子节点数组,然后可以通过循环或者索引找到需要的节点;

parentObj.getElementsByTagName():它返回已知节点的所有子节点中类型为指定值的子节点数组。

2》通过邻居节点获取:

neighbourNode.previousSibling:获取已知节点(neiwghbourNode)同一级别的前一个节点,可以使用递归;

3》通过子节点获取:

childNode.parentNode:获取已知节点的父节点,并对父节点进行操作,增删查改之类的;

时间: 2024-08-02 07:00:17

Dom元素中的元素应用的相关文章

IE7中绝对定位元素之间的遮盖问题

由于页面复杂就不上现实例子,举例说明. 两个同层级<div>元素,都设置了 position: relative;相对定位. 他们的内部的元素(不管什么元素了)都设置了position: absolute; 而第一个<div>元素中的元素需要划过显示效果,要遮挡下方的<div>,可在这个时候,恰恰相反,居然被后者遮盖了(下方的<div>很不服气,有木有). 这里我需要截图演示: 这里有两个部落:一个红色框里面套着一个黄色板块 这里我们叫它小A 一个蓝色框里面

JQueryUI-拖动(Draggable)-在DOM 元素中约束运动

定义和用法 通过定义 draggable 区域的边界来约束每个 draggable 的运动,使用 containment 选项来指定一个父级的 DOM 元素或者一 个 jQuery 选择器 示例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge&

在DOM中搜索元素

方法 现代浏览器中使用XPath document.getElementById document/node.getElementsByTagName Limit search by parent element document.getElementsByName document/node.getElementsByClassName document/node.querySelector, querySelectorAll 实践 标签链接 显示子节点数量 更多 总结 大部分时间里,为了与用

DOM:文档对象模型 --树模型 文档:标签文档,对象:文档中每个元素对象,模型:抽象化的东西

DOM:文档对象模型 --树模型文档:标签文档,对象:文档中每个元素对象,模型:抽象化的东西 一:window: 属性(值或者子对象):opener:打开当前窗口的源窗口,如果当前窗口是首次启动浏览器打开的,则opener是null,可以利用这个属性来关闭源窗口. 方法(函数):事件(事先设置好的程序,被触发): 1.window.open("第一部分","第二部分","第三部分","第四部分"): 特征参数: 第一部分:写要

jQuery1.9&amp;2.0及其以上版本中动态元素 on绑定事件无效的解决方案

jQuery 1.9/2.0/2.1及其以上版本无法使用live函数了,然而jQuery 1.9及其以上版本提供了on函数来代替.本文讲解了jQuery on函数的使用方法,以及在使用jQuery函数中遇到的一些问题. $(selector).on(event,childSelector,data,function,map) 各个参数说明如下: 参数 描述 event 必需.规定要从被选元素移除的一个或多个事件或命名空间.由空格分隔多个事件值.必须是有效的事件. childSelector 可选

AngularJs中,如何在父元素中调用子元素为自定义Directive中定义的函数?

最近一段时间准备使用AngularJs中的自定义Directive重构一下代码. 在这里说明一下,把自定义控件封装成Directive并不一定是要复用,而是要让代码结构更加清晰.就好像你将一个长方法拆分成多个独立的小方法,也未必要复用它们一样.职责独立等一票好处,会让后期维护更加轻松. 在重构的过程中,我遇到了这样一个问题,先上图: 图一: 这就是我要重构的界面,由于之前时间紧,将这三个Filter和两个button都写在了一个页面中.当时我已经预感到,如果将这里面的状态都写到一个scope上,

jQuery中兄弟元素、子元素和父元素的获取

我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行获取和操作. jQuery提供的方法 上来就把jQuery提供的方法摆在这里是不是有点不好呀,不过,我们从jQuery的方法名称上就能知道这些方法是干嘛的了. parent(selector) 查找父元素,可传入selector进行过滤(下同) parents(selector) 查找所有的祖先节点

jQuery中获取特定顺序子元素(子元素种类不定)的方法

提出问题:只已知父元素和父元素中子元素的次序,怎么通过jQuery方法获得该元素? 1 <p>第一部分:</p> 2 <ul> 3 <li>1</li> 4 <li>2</li> // 选择这个子元素 5 <li>3</li> 6 </ul> 7 <p>第二部分:</p> 8 <ul> 9 <li>4</li> 10 <l

【原】谈谈css中关于元素定位的属性(positon&z-index)

position position主要是4种设定: static(默认)如果不设置,默认就是staitc元素.其实就是没有position设定,DOM流安排在哪里就是哪里.所有的相关于位置的设定均无效,意味着left, right, z-index等属性设置了也是白设. relative如果只是设置postion: relative; 和static并没有视觉上的区别,但是,一旦设定了,就指定了对应DOM元素"被定位"了,之后就可以设置一些诸如right,left之类的属性. abso