dom是js实现的吗（JavaScriptDOM编程艺术一）

dom是js实现的吗（JavaScriptDOM编程艺术一）(1)

语句

可以以分号（；）结束语句，也可以不要

如：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.nodeValue
node.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属性fontFamily
element.style.font-family --> element.style.fontFamily 前者是错误的，需变为后者才行
background-color -->backgroundColor
DOM在表示样式属性时采用的单位并不总是与它们在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）
,

dom是js实现的吗（JavaScriptDOM编程艺术一）

最新推荐

热门推荐