`
lwj0212
  • 浏览: 49543 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

DOM常用操作

阅读更多
1、获取对象
document.getElementById(ID)      
//获得指定ID值的对象
document.getElementsByName(Name) 
//获得指定Name值的对象数组,常用获取radio,checkbox

2、坐标
var oRect=obj.getBoundingClientRect(); 
x=oRect.left 
y=oRect.top

3、获取窗口大小,分辨率
document.body.clientWidth  
document.body.clientHeight  
  获得窗口大小(包含Border、Scroll等元素)  
  document.body.offsetWidth  
  document.body.offsetHeight

分辨率
creen.width,creen.height.
具体解释如下:

scrollWidth是对象的实际内容的宽,不包边线宽度,会随对象中内容的多少改变(内容多了可能会改变对象的实际宽度) 
clientWidth是对象可见的宽度,不包滚动条等边线,会随窗口的显示大小改变。
offsetWidth是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变。
scrollHeight: 获取对象的滚动高度。
offsetHeight:获取对象相对于版面或由父坐标  
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
offsetLeft:获取对象相对于版面或由
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
offsetTop 属性指定的父坐标的计算顶端位置
offsetParent 属性指定的父坐标的高度
offsetParent 属性指定的父坐标的计算左侧位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值 event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量   
以上主要指IE之中,FireFox差异如下:
IE6.0、FF1.06+:
clientWidth = width + padding clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5:
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height 

例:如页面过长,想让id="view1"的节点显示出来。
var currentDom=document.getElementById("view1").getBoundingClientRect();
	 		if(currentDom.top>window.document.body.clientHeight){
	 			window.document.body.scrollTop=currentDom.top;
	 		}

4、dom加载顺序

1.HTML解析完毕
2.外部脚本和样式表加载完毕
3.脚本在文档内解析并执行
4.HTML DOM完全构造起来
5.图片和外部内容加载
6.网页完成加载
监听DOM加载状态



这项技术在不堵塞浏览器加载的情况下尽可能快地检查HTML DOM文档是否已经加载了执行所必须的属性。

document

document.getElementById

document.getElementsByTagName

document.body

检查这几个对象可以获知DOM的加载状态



以下代码监听DOM何时加载完毕(来自《精通JavaScript》)

function domReady(func) {
    // 假如DOM已经加载,马上执行函数
    if (domReady.done) return func();
    
    // 假如我们已经增加了一个函数
    if (domReady.timer) {
        // 把它加入到待执行函数清单中
        domReady.ready.push(func);
    }
    else {
        // 为页面加载完毕绑定一个事件以防止它最先完成。使用addEvent函数
        // addEvent函数为由Dean Edwards编写的著名函数
        addEvent(window, "load", isDOMReady );
        
        // 初始化待执行函数的数组
        domReady.ready[ func ];
        
        // 尽可能快地检查DOM是否已可用
        domReady.timer = setInterval(isDOMReady, 13);
    }
};

//检查DOM是否已可操作
function isDOMReady() {
    // 如果我们能判断出DOM已可用,忽略
    if (domReady.done) return false;
    
    // 检查若干函数和元素是否可用
    if (document && document.getElementsByTagName && document.getElementById && document.body) {
        // 如果可用,我们可以停止检查
        clearInterval(douReady.timer);
        domReady.timer = null;
        
        // 执行所有正等待的函数
        for (var i = 0; i < domReady.ready.length; i++)
            domReady.ready[i]();
            
        // 记录我们在此已经完成
        domReady.ready = null;
        domReady.done = true;
    }
}

5、增加对象
/*创建新层*/
var div_view=document.createElement("div");
也可这样创建 document.createElement("<div></div>");
设置样式:div_view.className="";
设置ID:div_view.id="div1";
设置div显示内容:div_view.innerHTML="test";
innerHTML即div里的内容。例<div id="div1">test1</div>,div1.innerHTML则是"test1"
outerHTML则是整个div。例div1.outerHTMl是"<div id=div1>test1</div>".
注意,innerHTML和outerHTML均会把",'去掉。
/*创建table,插入行,列*/
var table=document.createElement("table");
var trow=table.insertRow();插入行到最后。
var trow=table.insertRow(1);插入到第2行。
var rowLength=table.rows.length;获取table的总行数
var tcell=row.insertCell();插入一列
tcell.innerHTML="insert row";设置列内容
其他的创建方式类似。
document.body.appendChild(div_view);把层添加到body中,这样才会在页面中显示增加的层。

6、frame
window.frames["frameName"]获取frame的window对象
7、select
当前选中的option:select.options[select.selectedIndex]
所有options:select.options.返回的是option[]数组
增加option
方法1:option1=new Option(text,value);
      select.add(option1);
方法2:option2=document.createElement("option");
       option2.value=value;
       option2.text=text;
      select.add(option2);
删除option
      select.remove(option1);
删除所有option
      select.options.length=0;

  • DHTML_手册.rar (3.7 MB)
  • 描述: dhtml帮助手册,可以查找所有的dom操作,并附带例子。
  • 下载次数: 28
分享到:
评论

相关推荐

    DOM常用属性和方法

    ### DOM常用属性和方法 #### 一、DOM与HTML文档结构理解 在DOM(Document Object Model,文档对象模型)的世界里,HTML文档被视作一种树状结构,其中`&lt;html&gt;`作为根节点,而其他诸如`&lt;head&gt;`、`&lt;title&gt;`、`&lt;body&gt;`...

    JavaScript DOM常用操作代码汇总

    JavaScript通过DOM编程接口可以对这些节点进行查找、修改、添加和删除等操作。 1. DOM的理解: - DOM是一种标准,它定义了如何访问和操作XML或HTML文档的结构。 - 对于JavaScript,DOM提供了API,允许JavaScript...

    HTML DOM 常用的属性和方法

    DOM对象提供了一系列方法来操作这些节点: 1. `createAttribute(name)`:创建一个新的属性节点。 2. `createComment(text)`:创建一个新的注释节点。 3. `createElement(tagName)`:创建指定标签名的新元素节点。 4...

    dom4j常用操作实例

    此文档包含了Dom4J常用的操作(对于一般的应用足够了)和实例,可模仿开发

    dom4j_例子,包括所有常用用法

    本文将通过一个具体的示例代码来深入探讨DOM4j的使用方法,涵盖创建、修改XML文档的常用操作。 #### 创建XML文档 在DOM4j中,创建XML文档非常直观。首先,需要导入DOM4j相关的包: ```java import org.dom4j....

    Dom4j常用jar包

    总的来说,Dom4j作为一个强大的XML处理工具,为开发者提供了便捷的接口和丰富的功能,无论是在简单的XML数据操作还是复杂的XML文档处理场景中,都能发挥出其优势。了解并熟练掌握Dom4j,对于提升Java开发中的XML处理...

    js_HTML_Dom操作练习

    1. **获取元素**:在DOM中,`document.getElementById()`是最常用的获取元素的方法,通过元素的ID属性来定位。除此之外,还有`document.querySelector()`和`document.querySelectorAll()`,它们分别返回匹配CSS选择...

    Dom操作与常用JS

    学习DOM操作和JavaScript的常用知识点,能帮助开发者更好地实现网页动态效果,提高用户体验,并且是深入学习前端框架如React、Vue的基础。通过半小时的学习,你可以快速掌握这些基础知识,为后续的Web开发打下坚实的...

    常用手册 DOM文档对象模型.chm

    通过阅读《常用手册 DOM文档对象模型》,开发者不仅可以深入理解DOM的基本概念,还能掌握实际操作DOM的技巧,从而提高网页和应用程序的交互性和动态性。此外,对于学习前端开发和Web应用的人员来说,这是一份非常...

    javascript 常用DomAPI总结

    本文将对原生 JavaScript 中常用的 DOM 节点相关 API 进行详细总结。 #### 二、节点属性与方法 ##### 1. Node 节点属性 - **Node.nodeName**: 返回节点名称,只读。 - **Node.nodeType**: 返回节点类型的常数值,...

    javascript 操作 dom 的常用方法

    在JavaScript中,DOM(文档对象模型)操作是网页动态交互的核心。...以上就是JavaScript操作DOM的一些常用方法,它们构成了JavaScript与网页交互的基础,让开发者能够动态地创建、修改和操作网页内容。

    基于JavaScript操作DOM常用的API小结

    DOM(Document Object Model)即文档对象模型,针对 HTML 和 XML 文档的 API(应用程序接口)。本篇文章给大家介绍javascript操作dom常用的api小结,对javascript dom api相关知识感兴趣的朋友一起学习吧

    c#操作浏览器dom对象

    标题中的“C#操作浏览器DOM对象”指的是使用C#编程语言与Web页面的Document Object Model(DOM)进行交互。DOM是HTML和XML文档的一种结构化表示,它允许程序和脚本动态更新、添加或删除页面元素。在C#中,这通常通过...

    第06章 DOM节点操作(上)

    DOM是一种标准,它允许编程语言与网页内容进行交互,而JavaScript是Web开发中最常用的与DOM交互的语言。 首先,DOM将整个HTML或XML文档视为一个由节点构成的树形结构,每个元素、属性、文本等都有其对应的节点类型...

    DOM — DOM对象继承关系1

    除此之外,DOM 中还提供了一些常用的方法,例如 appendChild、createElement、createTextNode、focus、click 和 blur 等,可以用来创建和操作文档中的节点。 DOM 对象继承关系是 DOM 编程的基础,了解这些继承关系...

    整理JavaScript对DOM中各种类型的元素的常用操作_.docx

    "JavaScript对DOM中各种类型的元素的常用操作" JavaScript 对 DOM 中各种类型的元素的常用操作是 JavaScript 编程中的一大根本任务。DOM 操作涉及到对不同类型的元素的操作,包括元素、属性、文本、注释、文档等。...

    java操作xml dom dom4j sax jdom

    为了处理XML文档,Java提供了多种API,其中最常用的包括DOM、SAX、DOM4J和JDOM。以下是对这些方法的详细介绍: 1. DOM(Document Object Model) DOM是一种树形结构的API,它将整个XML文档加载到内存中,形成一个...

Global site tag (gtag.js) - Google Analytics