dom是js实现的吗（JavaScriptDOM编程艺术一）
-
语句
可以以分号（；）结束语句，也可以不要
如：first statememt; second statememt;
first statememt
获取元素三种方式
getElementById 返回元素节点对应的对象document.getElementById(id);如 document.getElementById(“purchases”);getElementsByTagName 返回一个对象数组，每个对象对应文档里给定标签的一个元素element.getElementsByTagName(tag);如 document.getElementsByTagName("li");getElementsByClassName 返回一个对象数组，每个对象对应文档里给定标签的一个元素document. getElementsByClassName(class);如 document. getElementsByClassName("sale");typeof 返回对象的类型
获取与设置属性
getAttribute 获取属性 此方法不属性document对象，只能通过元素节点对象调用object.getAttribute(attribute)如 item=document.getElementsByTagName("li");for (var i=0;i<item.length;i ){alert(item[i].getAttribute("title"));}setAttribute 修改属性值object.setAttribute(attribute,value)如 item = document.getElementById("purchases");item.setAttribute("title"," a list of good");Childnodes属性：元素下的子元素nodeType属性：元素类型取值(1为元素节点，2为属性节点，3 文本节点)firstchild和lastchild属性nodeValue属性：获取/改变一个文本节点的值 (节点直接调用将得到null，需处理才行)如 node.childNodes[0].nodeValue == node.firstchild.nodeValuenode.childNodes[node.childNodes.length-1].nodeValue == node.lastchild.nodeValue事件处理函数事件处理函数的作用是，在特定事件发生时调用特定的JavaScript代码
语法： event = "JavaScript statement(s)"
如：onclick = "showPic(this)"
JavaScript代码包含在一对引号之间。可以把做任意数量的JavaScript语句放在这对引号之间，只要把各条语句用分号隔开即可
如：onclick = "showPic(this)；return false;"
事件处理函数工作机制：在给某个元素添加了事件处理函数后，一旦事件发生，相应的JavaScript代码就会得到执行。被调用的JavaScript代码可以返回一个值，这个值被传递给那个事件处理函数。
如：在当前页面显示图片
<a href="images/1.jpg" title="one" onclick="ShowImage(this);return false;">One1</a>
<img id="showImgArea" src="http://img.studyofnet.comimages/defaults.jpg" alt="ImgArea"/>
function ShowImage(items) {var scrValue = items.getAttribute("href");var showImgArea = document.getElementById("showImgArea");showImgArea.setAttribute("src", scrValue);}如果没有return false,效果将是新建一个窗口展示图片，而不会在下方显示图片
创建新的浏览窗口
window.open(url,name,features)
url:新窗口里打开的网页URL地址，省略则为空白窗口
name:新窗口名称
features:以逗号分隔的字符串，其内容为新窗口的各种属性（宽度，高度，工具条，菜单条，初始化位置等）
如：window.open(winURL,"popup","width=320,height=480");
"javascript:" 伪协议
如 <a herf="javascript:popUp('http://www.example.com/');">Example</a>
<a herf="#" onclick="popUp('http://www.example.com/');">Example</a>
herf="#" 代表创建一个空链接
分离JavaScrip
element.event = action....
如：getElementbyId(id).event = action
function popUp(winURL) {
window.open(winURL, "popup", "width=320,height=480");
}
function pLinks() {
var links = document.getElementsByTagName("a");
for (var i = 0; i < links.length; i ) {
if (links[i].getAttribute("class")=="popup"){
links[i].onclick = function() {
popUp(this.getAttribute("href"));
return false;
}
}
}
}
window.onload = pLinks;
window.onload=funtionName HTML文档全部加载完毕时将触发这一事件
对象检测: 在使用时，一定要删掉方法名后面的圆括号，如不，将会导致检测结果是方法的结果，无论方法是否存在。
if(method){
statements
}
如：if (!getElementById) return false;
合并，放置，压缩脚本
<script type="text/javascript" src="http://img.studyofnet.comjs/ui.js"></script>
脚本引用传统方式是放置<head>区域，这样有可能会导致无法并行加载其它文件。
建议放在</body>之前，可以让页面变得更快
合并多脚本在一起，可以有效减少加载页面时发送的请求数量，从而达到性能优化
压缩工具：JSMin
共享onload事件
如 两个函数需要同时执行
window.onload = firstFuntion
window.onload = secondFuntion
这样的结果将只有最后那个才会被实际执行
解决此问题，转换如下即可 匿名函数
window.onload = function(){
firstFuntion();
secondFuntion();
}
onkeypress事件,建议少使用此事件，容易出问题
如：links[i].onkeypress = function(){
.......
}
也可以：
links[i].onkeypress = links[i].onclick;
改变其文档的结构，把标签文本写入文档 两种传统方法：
1.document.write 不建议使用，有些浏览器不支持
如： document.write("<p>This is inserted.</p>")
2.docuument.innerHTML 此属性既可用来读，也可以用来写入
如：var testdiv=document.getElementById("testdiv");
alert(testdiv.innerHTML); --读
testdiv.innerHTML= "<p>I inserted contest.</p>"; --写
现流行方法：
createElement方法：创建一个新的元素
document. createElement(nodeName)
如：var para = document. createElement("p");
appendChild方法：把新创建的节点插入某文件的节点树，作为一个子节点
parent.appendChild(child)
如：testdiv.appendChild(para);
createTextNode方法： 创建一个文本节点
document.createTextNode(text)
如：txt = document.createTextNode("Hello world");
para.appendChild(txt);
insertBefore()方法：把一个新元素插入到一个现有元素的前面
parentElement.insertBefore(newElement,targetElement);parentElement目标元素的父元素targetElement 目标元素newElement 新元素如：var = gallery = document.getElementById("imagegallery");gallery.parentNode.insertBefore(placeholder,gallery);
insertAfter方法：DoM没有提供这个方法，不过可以自己编写一个函数代替
function insertAfter(newElement,targetElement){var parent = targetElement.parentNode;if (parent.lastChild == targetElement) {parent.appendChild(newElement);} else {parent.insertBefore(newElement,targetElement.nextSibling);}}nextSibling 属性：目标元素和目标元素的下一个兄弟元素之间
一般创建顺序如下：
1.创建一个元素节点(createElement)
2.把此元素节点追加到文档中的一个元素节点上(appendChild)
3.创建一个文本节点(createTextNode)
4.把此文本节点追加至刚创建的元素节点上(appendChild)
function creatediv() {
//创建一个p元素 并插入
var div = document.getElementById("testdiv");
var div_p = document.createElement("p");
div.appendChild(div_p);
var div_txt = document.createTextNode("this is my");
div_p.appendChild(div_txt);
//在其原先p元素前面插入一个元素
var before_p = document.createElement("p");
var before_txt = document.createTextNode("this is beforeNode");
before_p.appendChild(before_txt);
div.insertBefore(before_p, div_p);
//在其原先p元素后面插入一个元素
var after_p = document.createElement("p");
var after_txt = document.createTextNode("this is afterNode");
after_p.appendChild(after_txt);
insertAfter(after_p, div_p);
}
window.onload = creatediv;Ajax :对页面的请求以异步方式发送到服务器,只更新页面中的一小部分
核心对象为XMLHttpRequest
网页构成：
结构层 --html
表示层 --css
行为层 --javascript
style属性
是一个对象
获取样式：element.style.color
当引用一个中间带减号的CSS属性时，Dom要求用驼峰命名法
如：CSS属性font-family变为DOM属性fontFamilyelement.style.font-family --> element.style.fontFamily 前者是错误的，需变为后者才行background-color -->backgroundColorDOM在表示样式属性时采用的单位并不总是与它们在CSS样式表里的设置相同如：CSS属性Color的设置值是"grey" 或#999999，但有些某些浏览器就会显示为RGB(红，绿，蓝) rgb(153,153,153)CSS font-size属性的值单位是em或px DOM的单位也是一样em或px设置样式
style对象的属性值永远是一个字符串,style对象的属性的值必须放在引号里，单引号与双引号均可,如无引号，Js将会解释为一个变量
element.style.property=value如：para.style.color='black'根据元素在节点树里的位置来设置样式第一种：为标签元素统一地声明样式如：p {font-size:1em;}第二种：为有特定class属性的所有元素统一声明样式如： .fineprint {font-size:8em;}第三种：为有独一无二的ID属性的元素单独声明样式如：#intro {font-size:8em;}CSS提供的:hover，:focus等伪Class属性允许我们根据HTML元素的状态来改变样式
className属性：可以通过动态设置元素的这个属性，从而统一改变样式
element.classname=value如： elem.classname="intro" (覆盖class属性) （或elem.setAttribut("class","intro")）elem.className ="intro" （追加class属性）.intro {font-weight:bold;font-size:2em;}位置 position
规定元素的定位类型 有五种值
abslute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
fiexed 生成绝对定位的元素，相对于浏览器窗口进行定位
relative 生成相对定位的元素，相对于其正常位置进行定位
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
inherit 规定应该从父元素继承 position 属性的值
如 h2
{
position:absolute;
left:100px;
top:150px;
}
时间 setTimeout
让某个函数在经过一段预定的时间之后才开始执行
setTimeout("function",interval)
第一个参数：通常是一个字符串，其内容是将要执行的那个函数的名字
第二个参数：是一个数值，以毫秒为单位，设定了需要经过多长时间后才开始第一个参数所给出的函数
clearTimeout(variable) 取消某个正在排队等待执行的函数 参数为全局变量
如：movement = setTimeout("moveMessage()",5000);
clearTimeout(movement);
overflow属性
处理一个元素的尺寸超出容器尺寸的情况 有三种值
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
如：div{width:150px;height:150px;overflow:scroll;}平稳退化：
欢迎关注公众号（hongji8410）和加入QQ群一起交流（522342554）
,
免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
