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
分享到:
相关推荐
主要介绍了JavaScript DOM常用操作代码汇总,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
此文档包含了Dom4J常用的操作(对于一般的应用足够了)和实例,可模仿开发
asp.net javascript dom 操作 的常用方法
Dom操作与常用JS,很不错哦,让你在半个小时内学会!
Jquery的常用方法,各种对Demo的操作。
DOM(Document Object Model)即文档对象模型,针对 HTML 和 XML 文档的 API(应用程序接口)。本篇文章给大家介绍javascript操作dom常用的api小结,对javascript dom api相关知识感兴趣的朋友一起学习吧
这是一个微型的库,包含最常用的dom操作,压缩后只有2KB。
XML&DOM节点属性、方法参考,是搞AJAX DOM操作必备文档。
08_文件和目录常用命令.html
Jquery对dom的操作也是很总要的。 1.三个简单实用的用于 DOM 操作的 jQuery 方法: · text() – 设置或返回所选元素的文本内容 · html() – 设置或返回所选元素的内容(包括 HTML 标记) · val() – 设置或返回...
jQuery 一个非常流行的操作Dom的 JavaScript 库
[实验目的]: 理解应用程序访问与操作XML文档的过程; 掌握用DOM创建XML文档的步骤; 掌握DOM常用类的使用方法 [实验内容] 利用DOM创建如下结构的XML文档(文件名定为:new.xml)
整理JavaScript对DOM中各种类型的元素的常用操作_.docx
主要介绍了jQuery中DOM常见操作,结合实例形式总结分析了jQuery针对dom属性操作、文档操作等常用方法与操作技巧,需要的朋友可以参考下
2.DOM的一些常用的属性 2.1 通过ID获取元素 (1)语法: 代码如下: document.getElementById(“id”); (2)作用:id就向一个人的身份证,我们可以通过寻找标签的id来寻找标签,然后进行相应的操作。 (3...
DOM操作的分类:DOM CORE(核心)、HTML-DOM和CSS-DOM 1. DOM Core DOM Core并不专属于javascript,任何一种支持DOM的程序设计语言都可以使用它。 它的用途并非仅限于处理网页,也可以用来处理任何一种使用标记语言...
引用 jquery ,只是用一些 DOM 操作函数, 还是觉得 jQuery 的体积有点大,抽取其中常用的 DOM 操作函数,形成了 gQuery,去除空格后,只有不到 4k
感谢“雪飘寒”原创与分享 目录 dom4j实例详解 1 ...五、常用方法 8 1.Element元素API 8 2. Attribute属性API 8 2. 字符串转化 8 3. 命名空间(Namespace)操作 8 六、Qname介绍 10 七、Visitor模式 11