JavaScript 由 DOM(Document Object Model): 文本对象模型与 BOM(Browser Object Model): 浏览器对象模型组成, 下面就让我们来了解一下这两种模型.
一, DOM(Document Object Model): 文本对象模型
- // 通过标签名获取 DOM 对象. 返回的是一个集合, 需通过具体下标获取某个具体的 DOM 对象.
- var oDiv=document.getElementsByTagName("div");
- // 通过 ID 获取 DOM 对象.
- var oBox=document.getElementById("box");
- // 通过 className 来获取 DOM 对象, 返回的是一个集合, 需通过具体下标获取某个具体的 DOM 对象.
- var oBox=document.getElementsClassName("box");
1, 节点 Node
children: 非标准属性, 返回指定元素的所有子元素, 是一个 htmlCollection.
var o=oDiv.children;
childNodes: 标准属性, 返回指定元素的所有子元素和文本节点, 是一个 NodeList.(折行就有一个文本节点)
var oo=oDiv.childNodes;//IE6,7,8 会出现异常 (无闭合, 返回 text;<a > 返回路径.)
节点属性
(1) 节点类型 nodeType:console.log(oo[0].nodeType);// 返回值: 元素节点 --1; 属性节点 --2; 文本节点 --3;
(2) 节点名称 nodeName:console.log(oo[0].nodeName);// 即标签名称, 文本节点为 #text.
(3) 节点内容 nodeValue:console.log(oo[0].nodeValue);//node 实际上是指针, 其本身无值, 故该属性的返回值始终为 null.
获取节点
(1) 获取所有节点
var allNode=document.getElementsByTagName("*");
(2) 获取父元素
- oLi.parentNode.style.background="red";
- oDiv.offsetParent;// 获取定过位的父元素, 若没有则返回 body.
(3) 获取第一个孩子
- oUl.firstChild;// 适用 IE6,7,8
- oUl.firstElementChild;// 适用标准浏览器, IE6,7,8 不兼容.
- // 兼容处理:
- var first=obj.firstChild ? obj.firstChild : obj.firstElementChild ;
(4) 获取最后一个孩子
- oUl.lastChild;
- oUl.lastElementChild;/
/ 兼容性及兼容处理同上.
(5) 获取兄弟节点
- oLi.nextSibling;
- oLi.nextElementSibling;
- oLi.previousSibling;
- oLi.previousElementSibling;
操作节点
(1) 添加子节点 appendChild
- var li=document.createElement("li");// 创建子节点
- oUl.appendChild(li);// 往父元素追加子节点 (同一节点只能添加一次)
- var text=document.createTextNode("xxx");// 创建文本节点
- li.appendChild(text);// 将文本节点追加到元素中.
- //li.innerHTML="xxx";
- //li.nodeValue;// 错误.
- //li.childNodes[0].nodeValue;// 正确, 有返回值.
- li.childNode[0].nodeValue="<p></p>";// 不能识别标签, innerHTNML 能够识别标签.
(2) 插入节点 insertBefore
父元素. insertBefore(newNode,someNode);//someNode 表示插入节点的参考位置.
如果插入一个已有的子元素, 会先删除自己原来的, 然后插入到指定位置.(appendChild 也一样.)
(3) 删除节点 removeChild
父元素. removeChild(要删除的子节点);// 返回被删除的节点.
(4) 替换节点 replaceChild
父元素. replaceChild(newNode, 被替换的节点);
(5) 复制节点 (克隆节点)cloneNode
被克隆节点. cloneNode(false/true);//false: 浅复制 (只复制标签);true: 深复制 (整个结构都被复制, 包括标签里的内容).
2. 表格 Table
- tab.tBodies[0].rows[0].cells[0];
- tab.tHead.rows[0].cells[0];
- tab.tFood.rows[0].cells[0];
3. 表单 From
表单获取元素
name 可以标识一个元素: from1.nameValue. 属性.
表单提交 / 重置事件
- from1.onsubmit/onreset=function(){
- //return true;// 提交 (默认值)
- //return false;// 不提交
- }
表单改变事件
from1.onchange=function(){}
表单获取 / 失去焦点事件
form1.text.onfocus/onblur=function(){}
表单方法
- from1.submit();
- from1.reset();
二, BOM(Browser Object Model): 浏览器对象模型
用于访问浏览器对象, 没有规范. 其核心是 Windows(窗口).
1. 对话框与窗口
对话框
- alert("输入错误");// 提示对话框
- confirm("是否关闭");// 带 "确定","取消" 按钮的对话框 点击 "确认" 返回 true, 点击 "取消" 返回 false.
- prompt("请输入一个数字",0);// 带输入框的对话框, 返回输入的数据.
- print();// 打印 (快捷键: ctrl+P)
- <button onclick="print()"> 打印 </button>
- find(str);// 查找 (快捷键: ctrl+F)// 按回车键继续查找下一个
- <button onclick="find('abc')"> 查找 </button><p>abcdefghijklmn</p>
- btn.onclick=function(){
- var p=prompt("请输入要查找的内容");
- find(p);
- }
打开窗口
open(打开窗口 URL, 打开方式, 打开窗口的样式, 新窗口是否取代浏览器记录中当前加载的页面); 打开方式默认值为_blank.
- Windows.open ("http://www.baidu.com","_blank/_self", "width:100px;height:100px;",true/false);
- //Windows. 可去掉, 但在行间就不能去掉. 如:
- <button onclick="window.open('http://www.baidu.com')">
- var iNew=Windows.open("about:blank","_blank");// 打开一个空白的页面 iNew.document.write("abc");
- open("1.rar");// 如果不能以窗口方式打开的会运行下载.
关闭窗口 close();
- Windows.location; // 当前窗口的路径 (读)
- Windows.location="http://www.baidu.com";//(写) 可利用为刷新.
2. 相关属性
- document.body.scrollTop;// 滚动条滑动的距离.
- document.body.scrollLeft;// 火狐, IE 不兼容, 取值都为 0.
- document.documentElement.scrollTop;
- document.documentElement.scrollLeft;// 火狐, IE 适用, 但谷歌不兼容.
- // 兼容处理:
- var sTop=document.body.scrollTop==0?document.documentElement.scrollTop:document.body.scrollTop;
- box[0].scrollHeight;// 滚动条可滑动的高度, 即元素的可视高, 包括 padding, 不包括 margin,border;
- box[0].scrollWidth;// 滚动条可滑动的宽度, 即元素的可视高, 包括 padding, 不包括 margin,border;
- oDiv.offsetWidth;//div 的占位宽, 包括 padding,border.oDiv.offsetHeight;
- oDiv.offsetTop;// 距页面顶部的距离, 若父元素定位, 则是与父元素的距离.
- oDiv.offsetLeft;
- oDiv.clientWidth;//div 的可视宽, 包括 padding.
- oDiv.clientHeight;
- oDiv.clientTop;//div 的上边宽 border-top.
- oDiv.clientLeft;//div 的左边宽 border-left.
- Windows.onscroll=function(){
- };
- Windows.onresize=function(){
- };
- document.documentElement.clientHeight;// 窗口可视高
来源: http://www.css88.com/web/javascript/11114.html