DOM_04之常用对象及BOM

1、添加:①var a=document.createElement(“a”);②设置关键属性;③将元素添加到DOM树:a、parent.appendChild(a);b、parent.insertBefore(a,old);c、parent.replaceChlid(a,old);

2、优化:尽量少的操作DOM树,①如果同时添加父元素与子元素,应在内存中先将子元素拼到父元素下,再将父元素添加到DOM树;②如果添加多个平级子元素,应先将所有子元素放入文档片段,再将文档片段一次性添加到DOM树;

3、文档片段:①var frag=document.createDocumentFragment();②frag.appendChild(child);③parent.appendChild(frag);

4、删除:①parent.removeChild(child);②child.parentNode.removeChild(child);

5、HTML DOM常用对象:①Image:var img=new Image();②Select:a、属性:selectedIndex,options,value;b、方法:add(opt),remove(i);c、事件:onchange;③Option:创建:var opt=new Option(text,value);

6、HTML DOM常用对象之Table:①tHead:a、var thead=table.createThead();table.deleteThead();b、rows:var tr=thead.insertRow(i);//省略i表示末尾追加;thead.deleteRow(i);//i不可省略;c、cells:var td=tr.insertCell(i);//省略i表示末尾追加;tr.deleteCell(i);②tBodies:a、tBody:var tbody=table.createTBody();//没有delete;b、tFoot:同tHead;③Table.rows:a、table.insertRow(i);b、table.deleteRow(i);④row.rowIndex:标识row在整个表中的下标位置;

7、HTML DOM常用对象之Form:①获取:var form=document.forms【i/id/name】;②属性:a、length:表单中表单元素的个数;b、elements【i/id/name】:获得表单中的元素:form.elements【“name”】;③方法:submit();手动提交表单;

8、BOM:Browser Object Model,浏览器对象模型;①window:a、代替global充当全局变量;b、封装操作浏览器窗口的API;②history:保存当前窗口打开后成功访问过的url历史记录;③navigator:保存浏览器配置信息;④location:保存当前窗口正在打开的url对象;⑤screen:保存当前显示器或桌面分辨率信息;⑥event:事件发生时自动保存时间相关信息的对象;

9、打开和关闭窗口:①打开:window.open();②关闭当前窗口:window.close();

10、打开超连接方式总结:①当前窗口打开新链接,可后退:html:<a href=”url”></a>;js:open(“url”,“_self”);②在当前窗口打开新链接,不可后退:js:location.replace(“url”);③在新窗口打开新链接,可打开多个:html:<a href=”url” target=”_blank”></a>;js:open(“url”);④在新窗口打开新链接,只能打开一个窗口:*(* 内存中,每个窗口有唯一标识,name属性,相同name的窗口只能打开一个,后打开的会刷新先打开的;);打开新窗口时自定义name属性,html:<a href=”url” target=”name”></a>;js:open(“url”,“name”);

11、窗口大小:①获取窗口大小:a、获取完整窗口大小:outerWidth/outerHeight;b、或的文档显示区大小:innerWidth/innerHeight;②修改窗口大小:a、在打开窗口时定义窗口大小和位置:定义配置字符串:var config=“top=?,left=?,width=?,height=?”;打开窗口时,传入配置字符串:open(“url”,“name”,config);b、通过API调整窗口大小:resizeTo(width,height);*(窗口的大小);或resizeBy(width的增量,height的增量);*(* 修改的是要打开的窗口大小,当前窗口无法修改;);

12、窗口定位:①获取窗口左上角定位:window.screenLeft或者window.screenX;window.screenTop或者window.screenY;②修改窗口位置:moveTo(x,y);或者moveBy(x的增量,y的增量);

13、屏幕完整大小:screen.height以及screen.width;去掉任务栏后的剩余大小:screen.availHeight以及screen.availWidth;

14、事件发生时,鼠标的位置:e.screenX:相对于屏幕左上角的x坐标;e.screenY:相对于屏幕左上角的y坐标;

时间: 2024-10-12 10:50:20

DOM_04之常用对象及BOM的相关文章

BOM常用对象

1.BOM的常用对象: window  navigator history location dicument screen event navigator:保存浏览器配置信息的对象 cookicEnablcd:判断是否启用cookic userAgent:判断浏览器的名称和版本号 plugins:保存浏览器中所有插件信息的集合 screen:保存显示屏幕的对象信息 history:保存当前的历史记录栈 history.go(-1):后退 history.go(1):前进一次 history.g

BOM模型中常用对象 定义计数器 网页跳转 网页前进后退

今天上午学了的BOM模型中常用对象,了解了一部分的属性 For循环的规律 外层循环控制行 内层循环控制列 <!doctype html> <html> <head> <meta charset="utf-8"> <title>BOM模型中常用对象</title> <script type="text/javascript"> function testalert(){ // 有wid

常用对象之Application

对象就是我们Excel和程序的操作对象.比如单元格.工作簿.我们对于Excel的每个操作其实都是对相应对象的操作.比如选中单元格.保存工作表. 对象存放在对象模型里,2013以上版本似乎已经没有离线文档,只有在线的:https://msdn.microsoft.com/ZH-CN/library/ff194068.aspx 每个对象又有自己的属性和方法,最后构成完整的事件. 记住常用对象: Application对象: 代表的是Excel的整个程序,所以是最上层. ScreenUpdating属

DOM_03之元素及常用对象

1.修改样式:访问内联样式:elem.style.css属性名:获得其他:var style=getComputerStyle(elem):*(* 获得焦点onfocus:失去焦点onblur:): 2.修改内外部样式属性:①获得样式表对象:var sheet=document.styleSheets[i]:②获得cssRule对象:var rule=sheet.cssRules[i]:③修改cssRule属性:rule.style.css属性名=值: 3.添加:①创建空元素对象:var a=d

Js基础之常用对象

今天来总结一下js中的常用对象: 1.string对象 常用方法: charAt():返回在指定位置的字符. charCodeAt():返回在指定的位置的字符的 Unicode 编码. concat():连接字符串. fromCharCode():从字符编码创建一个字符串. String indexOf():检索字符串,返回字符串出现的位置,如果没有找到,返回-1. lastIndexOf():从后向前搜索字符串,返回字符串出现的位置,如果没有找到,返回-1 . split():把字符串分割为字

[独孤九剑]Oracle知识点梳理(七)数据库常用对象之Cursor

本系列链接导航: [独孤九剑]Oracle知识点梳理(一)表空间.用户 [独孤九剑]Oracle知识点梳理(二)数据库的连接 [独孤九剑]Oracle知识点梳理(三)导入.导出 [独孤九剑]Oracle知识点梳理(四)SQL语句之DML和DDL [独孤九剑]Oracle知识点梳理(五)数据库常用对象之Table.View [独孤九剑]Oracle知识点梳理(六)数据库常用对象之Procedure.function.Sequence [独孤九剑]Oracle知识点梳理(八)常见Exception

[独孤九剑]Oracle知识点梳理(九)数据库常用对象之常见package

本系列链接导航: [独孤九剑]Oracle知识点梳理(一)表空间.用户 [独孤九剑]Oracle知识点梳理(二)数据库的连接 [独孤九剑]Oracle知识点梳理(三)导入.导出 [独孤九剑]Oracle知识点梳理(四)SQL语句之DML和DDL [独孤九剑]Oracle知识点梳理(五)数据库常用对象之Table.View [独孤九剑]Oracle知识点梳理(六)数据库常用对象之Procedure.function.Sequence [独孤九剑]Oracle知识点梳理(七)数据库常用对象之Curs

[独孤九剑]Oracle知识点梳理(六)数据库常用对象之Procedure、function、Sequence

本系列链接导航: [独孤九剑]Oracle知识点梳理(一)表空间.用户 [独孤九剑]Oracle知识点梳理(二)数据库的连接 [独孤九剑]Oracle知识点梳理(三)导入.导出 [独孤九剑]Oracle知识点梳理(四)SQL语句之DML和DDL [独孤九剑]Oracle知识点梳理(五)数据库常用对象之Table.View [独孤九剑]Oracle知识点梳理(七)数据库常用对象之Cursor [独孤九剑]Oracle知识点梳理(八)常见Exception [独孤九剑]Oracle知识点梳理(九)数

HTML-DOM常用对象的用法(select/option/form/table)

HTML DOM 常用对象: 它对常用HTML元素操作的简化. Select对象 它代表页面上的一个select元素,常用属性有: select.value --当前选中项的value ,没有value,就返回选中项的内容. select.options --保存select下所有option元素对象,相当于: select.getElementsByTagName("option"): select.options.length --保存select下option的个数,清空sele