访问兄弟节点

1. nextSibling 属性可返回某个节点之后紧跟的节点(处于同一树层级中)。

语法:

nodeObject.nextSibling

说明:如果无此节点,则该属性返回 null。

2. previousSibling 属性可返回某个节点之前紧跟的节点(处于同一树层级中)。

语法:

nodeObject.previousSibling  

说明:如果无此节点,则该属性返回 null。

注意: 两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点(例如,换行符号),而其它浏览器不会忽略。

解决问题方法:

判断节点nodeType是否为1, 如是为元素节点,跳过。

插入节点appendChild()

在指定节点的最后一个子节点列表之后添加一个新的子节点。

语法:

appendChild(newnode)

参数:

newnode:指定追加的节点。

我们来看看,div标签内创建一个新的 P 标签,代码如下:

插入节点insertBefore()

insertBefore() 方法可在已有的子节点前插入一个新的子节点。

语法:

insertBefore(newnode,node);

参数:

newnode: 要插入的新节点。

node: 指定此节点前插入节点。

我们在来看看下面代码,在指定节点前插入节点。

删除节点removeChild()

removeChild() 方法从子节点列表中删除某个节点。如删除成功,此方法可返回被删除的节点,如失败,则返回 NULL。

语法:

nodeObject.removeChild(node)

参数:

node :必需,指定需要删除的节点。

我们来看看下面代码,删除子点。

替换元素节点replaceChild()

replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。

语法:

node.replaceChild (newnode,oldnew ) 

参数:

newnode : 必需,用于替换 oldnew 的对象。 
oldnew : 必需,被 newnode 替换的对象。

我们来看看下面的代码:

创建元素节点createElement

createElement()方法可创建元素节点。此方法可返回一个 Element 对象。

语法:

document.createElement(tagName)

参数:

tagName:字符串值,这个字符串用来指明创建元素的类型。

注意:要与appendChild() 或 insertBefore()方法联合使用,将元素显示在页面中。

我们来创建一个按钮,代码如下:

<script type="text/javascript">
   var body = document.body;
   var input = document.createElement("input");
   input.type = "button";
   input.value = "创建一个按钮";
   body.appendChild(input);
 </script>  

效果:在HTML文档中,创建一个按钮。

我们也可以使用setAttribute来设置属性,代码如下:

<script type="text/javascript">
   var body= document.body;
   var btn = document.createElement("input");
   btn.setAttribute("type", "text");
   btn.setAttribute("name", "q");
   btn.setAttribute("value", "使用setAttribute");
   btn.setAttribute("onclick", "javascript:alert('This is a text!');");
   body.appendChild(btn);
</script>  

效果:在HTML文档中,创建一个文本框,使用setAttribute设置属性值。 当点击这个文本框时,会弹出对话框“This is a text!”。

创建文本节点createTextNode

createTextNode() 方法创建新的文本节点,返回新创建的 Text 节点。

语法:

document.createTextNode(data)

参数:

data : 字符串值,可规定此节点的文本。

我们来创建一个<div>元素并向其中添加一条消息,代码如下:

浏览器窗口可视区域大小

获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法:

一、对于IE9+、Chrome、Firefox、Opera 以及 Safari:

•  window.innerHeight - 浏览器窗口的内部高度

•  window.innerWidth - 浏览器窗口的内部宽度

二、对于 Internet Explorer 8、7、6、5:

•  document.documentElement.clientHeight表示HTML文档所在窗口的当前高度。

•  document.documentElement.clientWidth表示HTML文档所在窗口的当前宽度。

或者

Document对象的body属性对应HTML文档的<body>标签

•  document.body.clientHeight

•  document.body.clientWidth

在不同浏览器都实用的 JavaScript 方案:

var w= document.documentElement.clientWidth
      || document.body.clientWidth;
var h= document.documentElement.clientHeight
      || document.body.clientHeight;

网页尺寸scrollHeight

scrollHeight和scrollWidth,获取网页内容高度和宽度。

一、针对IE、Opera:

scrollHeight 是网页内容实际高度,可以小于 clientHeight。

二、针对NS、FF:

scrollHeight 是网页内容高度,不过最小值是 clientHeight。也就是说网页内容实际高度小于 clientHeight 时,scrollHeight 返回 clientHeight 。

三、浏览器兼容性

var w=document.documentElement.scrollWidth
   || document.body.scrollWidth;
var h=document.documentElement.scrollHeight
   || document.body.scrollHeight;

注意:区分大小写

scrollHeight和scrollWidth还可获取Dom元素中内容实际占用的高度和宽度。

网页尺寸offsetHeight

offsetHeight和offsetWidth,获取网页内容高度和宽度(包括滚动条等边线,会随窗口的显示大小改变)。

一、值

offsetHeight = clientHeight + 滚动条 + 边框。

二、浏览器兼容性

var w= document.documentElement.offsetWidth
    || document.body.offsetWidth;
var h= document.documentElement.offsetHeight
    || document.body.offsetHeight;

网页卷去的距离与偏移量

我们先来看看下面的图:

scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离 ,即左边灰色的内容。

scrollTop:设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离 ,即上边灰色的内容。

offsetLeft:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 。

offsetTop:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置 。

注意:

1. 区分大小写

2. offsetParent:布局中设置postion属性(Relative、Absolute、fixed)的父容器,从最近的父节点开始,一层层向上找,直到HTML的body。

javascript DOM对象(2)的更多相关文章

  1. JavaScript DOM对象和JQuery对象相互转换

    1.分析源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  2. javascript DOM对象转jquery对象

    首先,假设一种情形:要在HTML文件中为一个select对象添加一个函数,这个函数的名字叫dynamic_change(this),当select的option被改变的时候调用onchange事件来处 ...

  3. JavaScript DOM 对象

    JavaScript DOM 对象   什么叫DOM,DOM是文档对象模型(Document Object Model,是基于浏览器编程(在本教程中,可以说就是DHTML编程)的一套API接口,W3C ...

  4. 前端基础:JavaScript DOM对象

    JavaScript DOM对象 通过HTML DOM,可以访问JavaScript HTML文档的所有元素. 一.HTML DOM(文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(D ...

  5. javascript DOM对象

    DOM简介 1.html DOM:当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model) 2.DOM操作html JS能改变页面中的所有html元素 JS能改变页 ...

  6. 浏览器环境下的javascript DOM对象继承模型

    这张图是我直接在现代浏览器中通过prototype原型溯源绘制的一张浏览器宿主环境下的javascript DOM对象模型,对于有效学习和使用javascript DOM编程起到高屋建瓴的指导作用, ...

  7. javascript DOM对象(1)

    0.文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法. DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 将HTML代码分解为D ...

  8. javascript - DOM对象控制HTML元素详解

    1.方法   getElementsByName() -- 获取name getElementByTagName() -- 获取  getAttribute()         --获取元素属性 se ...

  9. web前端学习(四)JavaScript学习笔记部分(7)-- JavaScript DOM对象控制HTML元素详解

    1.方法 getElementsByName() 获取name 可以获取一个数组类型数据(参数加引号) getElementsByTagName() 获取元素   getAttribute() 获取元 ...

随机推荐

  1. CoreCRM 开发实录 —— 单元测试之 Mock UserManager 和 SignInManager

    单元测试的核心就是:只测试眼前的逻辑.这就要求所有的依赖项都要使用仿类来代替,也就是所谓的 Mock Object.在测试 ProfileRepository 和 AccountController ...

  2. ASP.NET Zero--7.控制器加权限

    上次已经实现了菜单权限的配置,达到了不同角色的用户显示不同的菜单.但这里还有BUG,如果你直接访问http://localhost:8019/Mpa/Test这个控制器时,并使用"Defau ...

  3. (二)Harbor WEB的使用

    接上一篇<安装Harbor>,安装好之后,接下来我们就进行Harbor  web界面的操作吧! 转载请标明出处:http://www.cnblogs.com/huangjc/p/62704 ...

  4. 批处理+组策略 实现规定时间段无法开机and定时关机

    某爱熬夜的人对付自己的东西 1.shutdown命令 shutdown -a #取消现有的shutdown计划 shutdown -s -t [time] #设定时间关机 shutdown -r -t ...

  5. C#中的系统时间获取问题

    C#获取当前系统时间 2010-01-02 16:24 --DateTime 数字型 System.DateTime currentTime=new System.DateTime(); 取当前年月日 ...

  6. Java 基础知识(一)

    Java基础知识篇: 一.关键字解释 1. final:修饰非抽象类,非抽象方法和属性, 以及修饰方法参数,代表“无法改变的”.出于对设计或者效率的考虑使用该关键字. final类无法被继承,fina ...

  7. springIOC

    从这段代码开始 ApplicationContext context = new ClassPathXmlApplicationContext("beans.xml"); Pers ...

  8. Tiny6410之NAND FLASH驱动

    一.NAND FLASH的特点 S3C6410的NAND FLASH控制器有如下特点 1.自导入模式:复位后,引导代码被送入到8KB的STEPPINGSTONE中,引导代码移动完毕,引导代码将在STE ...

  9. Unity启动事件-监听:InitializeOnLoad

    [InitializeOnLoad] :在启动Unity的时候运行编辑器脚本  官方案例: using UnityEngine; using UnityEditor; [InitializeOnLoa ...

  10. PHP检测文件能否下载

    用php代码检测一个文件是否可以下载,网上没有找到合适的代码,自己实现了一个还挺好用的,分享给有需要的朋友. 基本原理:使用http的HEAD方法,检测报文的头里httpcode是否为200. pub ...