DOM&&BOM
DOM:DOM 全称是 Document Object Model,也就是文档对象模型。DOM 是 W3C(万维网联盟)的标准。
DOM 定义了访问 HTML 和 XML 文档的标准:“W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分:
核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型
1、DOM起源(recourse):在1998年,W3C发布了第一级的DOM规范。这个规范允许访问和操作HTML页面中的每一个单独的元素。所有的浏览器都执行了这个标准,因此,DOM的兼容性问题也难觅踪影了。
2、DOM方法:
可通过 JavaScript (以及其他编程语言)对 HTML DOM 进行访问。
所有 HTML 元素被定义为对象,而编程接口则是对象方法和对象属性。
方法是您能够执行的动作(比如添加或修改元素)。
属性是您能够获取或设置的值(比如节点的名称或内容)。
3、DOM内容:来自于w3school
1、通过 HTML DOM,JavaScript 能够访问 HTML 文档中的每个元素。
2、通过 HTML DOM,您能够访问 HTML 对象的样式对象。
3、HTML DOM 允许您在事件发生时执行代码。
当 HTML 元素”有事情发生“时,浏览器就会生成事件:
在元素上点击
加载页面
改变输入字段
4、DOM应用:
---------------------
作者:zhaoke_930325
来源:CSDN
原文:https://blog.csdn.net/zhaoke_930325/article/details/75635179
版权声明:本文为博主原创文章,转载请附上博文链接!
查找元素、改变HTML
样式、使用事件(在元素上点击、加载页面、改变输入字段)
1、子节点的删除可以用’javascript:;’来作为删除选项:
for (var i = 0; i < aA.length; i++) {
aA[i].onclick = function(){
oUl.removeChild(this.parentNode);
};
}
2、childNodes只支持IE6-8,且包括文本节点和元素节点,而children只包括元素,不包括文本节点。
3、子节点指的是只算第一层的节点,而内层节点不算。
4、parentNode:当前的父节点,是获取用来定位的父级。
5、setAttribute(名称,值)方法添加指定的属性,并为其赋指定的值。
如果这个指定的属性已存在,则仅设置/更改值。getAttribute用来获取属性。
document.getElementsByTagName("INPUT")[0].setAttribute("type","button");
6、获取元素属性的方法:
function getStyle(oParents,sClass)
{
var aEle = oParents.getElementsByTagName('*');
var aResult[];
for (var i = 0; i < aEle.length; i++) {
if(aEle[i].className=sClass)
{
aResult.push(aEle[i]);
}
}
return aResult;
};
7、父级调用的方法有:
.appendChild(子节点)增加子节点,过程是先把元素从原有的父级删掉,再添加到新的父级;.insertBefore(子节点,在谁之前);.removeChild(子节点)移除子节点。
8、在DOM文档中可以通过 document.createDocumentFragment();来创建表格,通过调用 .tBodies[i]取body,.rows[i]取行,.cells[i]取单元格,.toLowerCase()转为小写,用于搜索时不区分大小写,.search(‘str’)值为位置,当值等于 -1 时,为没有找到(模糊搜索),.split(‘str’)切分字符串。
9、.sort()是Arr数组特有的方法,输入时失去焦点时的验证,onkeyup onblur,
提交检查onsubmit。
BOM:
BOM 是 Browser Object Model,浏览器对象模型。简单地说,BOM和DOM一样,只不过DOM操作的是HTML中的元素,BOM是浏览器的API、操作的是浏览器(即控制浏览器的行为)
所有浏览器都支持 window 对象。它表示浏览器窗口。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。全局变量是 window 对象的属性。全局函数是 window 对象的方法。甚至文档对象(HTML DOM)也是window对象的属性: 一些常用的Window方法:可以使用两个属性来确定浏览器窗口的大小。两个属性都以像素为单位返回大小:
window.innerHeight - 浏览器窗口的内部高度(以像素为单位)
window.innerWidth - 浏览器窗口的内部宽度(以像素为单位)
其他一些方法:
window.open() - 打开一个新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 表示当前窗口
1、window.screen对象包含有关用户屏幕的信息
2、screen.width属性返回访问者屏幕的宽度(以像素为单位)。
3、screen.height属性返回访问者屏幕的高度(以像素为单位)
4、screen.availWidth属性返回访问者屏幕的宽度(以像素为单位),减去Windows任务栏等界面功能
5、screen.availHeight属性返回访问者屏幕的高度(以像素为单位),减去Windows任务栏等界面功能。
6、screen.colorDepth属性返回用于显示一种颜色的位数。所有现代计算机都使用24位或32位硬件进行颜色分辨。24位= 16,777,216种不同的“真彩色”。32位= 4,294,967,296种不同的“深色”
7、screen.pixelDepth属性返回屏幕的像素深度。
8、window.location对象可用于获取当前页面地址(URL)并将浏览器重定向到新页面。