DOM相关操作

(一)childNodes兼容性问题较多

1、元素节点:1

2、文本节点:3

3、属性节点:2

元素.childNodes:只读  属性  子节点列表集合

    标准下:包含了文本和元素类型的节点,并且也会包含非法嵌套的子节点

    非标准下:只包含元素类型的节点,IE7以下不会包含非法嵌套的子节点

    childNodes只包含一级子节点,不包含后辈节点

DOM节点的类型有很多种  12种

元素.nodeType:只读  属性  当前元素的节点类型

元素.attributes:只读  属性 属性列表集合

(二)children

元素.children:只读  属性  子节点列表集合

    标准下:只包含元素类型的节点

    非标准下:只包含元素类型的节点

元素.fristChild:只读  属性  第一个子节点

    标准下:firstChild会包含文本年类型的节点

    非标准下:只包含元素节点

元素.firstElementChild:只读  属性  标准下获取第一个元素类型的子节点

元素.lastChild||元素.lastElementChild 最后一个子节点

元素.nextSibling||元素.nextElementSibling下一个兄弟节点

元素.previousSibling||元素.previousElementSibling上一个兄弟节点

(三)父节点操作

元素.parentNode:只读 属性  当前节点的父级节点——没有兼容问题

元素.offsetParent:只读  属性  离当前元素最近的有定位的父节点;

               如果没有定位父级,默认是body

               ie7以下,如果当前元素没有定位,默认是body;如果有定位,则是HTML

               ie7以下,如果当前元素的某个父级触发了layout,那么offsetParent就会被指向到这个触发了layout特性的父节点

元素.offsetLeft:只读  属性  当前元素到定位父级的距离(偏移值)/(到当前元素的offsetParent的距离)

             如果没有定位父级,

               offsetParent指向body

               offsetLeft指向html

如果有定位父级

    ie7下:如果自己没有定位,那么offsetLeft(Top)是到body的距离

其他:到定位父级的距离

(四)节点宽度操作

1、style.width:样式宽               //100

2、clientWidth:可视宽              //样式宽+padding

3、offsetWidth:占位宽             //样式宽+padding+border

(五)创建节点操作

document.createElement(标签名称)                         //创建元素

父级.appendChild(要添加的元素)方法                         //追加子元素:

父级.insertBefore (新的元素,被插入的元素)                //在指定的某个元素前面插入一个新元素

    在IE下如果第二个参数的节点不存在,会报错

    在其他标准浏览器下如果第二个参数的节点不存在,则会以appendChild的形式替代

父级.removerChild(要删除的元素);                           //删除元素

父级.replaceChild(新节点,被替换节点)                         //替换元素

时间: 2024-10-23 10:07:17

DOM相关操作的相关文章

HTML5 DOM元素类名相关操作API classList简介(转载自张鑫旭大神)

一.其实事情的发展就像切水果 如果我们把元素的类名操作比作“切水果”游戏的话,其中一个单独的类名就好比“水果”或“炸弹”! DOM Level 2时代,类名的获取与设置,多半使用className属性,className的生效近似切水果的“一刀切”.在web的初期,交互什么的其实很简单的来:就像切水果刚开始的时候,一次就一个水果飞上来,一刀“咔嚓”切了就好,就像使用className赋个类名值,就算偶尔冒出2个水果,className也可以一刀切搞定的. 但是,随着web的发展,交互的逐渐复杂,

WebView中的视频全屏的相关操作

最近工作中,基本一直在用WebView,今天就把它整理下: WebView 顾名思义,就是放一个网页,一个看起来十分简单,但是用起来不是那么简单的控件. 首先你肯定要定义,初始化一个webview,其实网上的例子很多,我这里就简单的把一些WebView 中可能会用到的的很重要的属性以及支持全屏播放视频该怎么实现的代码粘出来,直接放到项目中去就行了 <span style="white-space:pre"></span><pre name="co

Jsoup代码解读之二-DOM相关对象

Jsoup代码解读之二-DOM相关对象 之前在文章中说到,Jsoup使用了一套自己的DOM对象体系,和Java XML API互不兼容.这样做的好处是从XML的API里解脱出来,使得代码精炼了很多.这篇文章会说明Jsoup的DOM结构,DOM的遍历方式.在下一篇文章,我会并结合这两个基础,分析一下Jsoup的HTML输出功能. DOM结构相关类 我们先来看看nodes包的类图: 这里可以看到,核心无疑是Node类. Node类是一个抽象类,它代表DOM树中的一个节点,它包含: 父节点parent

JqGrid相关操作备忘 方法列表

JqGrid相关操作备忘 方法列表 1.获得当前列表行数:$("#gridid").getGridParam("reccount"); 2.获取选中行数据(json):$("#gridid").jqGrid('getRowData', id); 3.刷新列表:$(refreshSelector).jqGrid('setGridParam', { url: ''), postData: ''}).trigger('reloadGrid'); 4.选

JQuery总结:选择器归纳、DOM遍历和事件处理、DOM完全操作和动画

JQuery总结一:选择器归纳 1.基本选择器 选择符 匹配元素 * 所有元素 id 给定ID的元素 element 给定类型的所有元素 .class 给定类的所有元素 a,b 与a或b匹配的元素 a b a的后代元素中与b匹配的元素 a>b a的直接子元素中与b匹配的元素 a+b a的直接同辈元素中与b匹配的元素 a~b a的同辈元素中与b匹配的元素 2.位置选择器 选择符 匹配元素 a b:nth-child(index) a的子元素中,第index个与b匹配的元素(从1开始计数) a b:

jQuery DOM节点操作 - 父节点、子节点、兄弟节点

------------------------------------------------------------------- 源文地址: http://www.cnblogs.com/yunlei0821/p/7577400.html ,转载请务必保留此出处. 子(/孙)节点: .children([selector]). 获得匹配元素集合中每个元素的所有直接子元素(选择器可选). 实例: <div> <a href="#"><span>w

java 使用xom对象数据序列化为xml、反序列化、Preferences相关操作小案例

package org.rui.io.xml; import java.io.BufferedOutputStream; import java.io.FileOutputStream; import java.io.OutputStream; import java.io.UnsupportedEncodingException; import java.util.Arrays; import java.util.List; import nu.xom.Document; import nu.

二叉树的相关操作

#include<stdio.h> #include<malloc.h> #define MAXSIZE 20 typedef char TEelemtype; typedef struct BiTNode{ TEelemtype data; struct BiTNode *lchild,*rchild; }BiTNode,*BiTree; //队列的方式 typedef struct queueelem { BiTNode* b[MAXSIZE]; int front,rear;

(二十四)linux新定时器:timefd及相关操作函数

timerfd是Linux为用户程序提供的一个定时器接口.这个接口基于文件描述符,通过文件描述符的可读事件进行超时通知,所以能够被用于select/poll的应用场景. 一,相关操作函数 #include <sys/timerfd.h> int timerfd_create(int clockid, int flags); int timerfd_settime(int fd, int flags, const struct itimerspec *new_value, struct itim