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

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

  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;
}

平稳退化:

dom是js实现的吗(JavaScriptDOM编程艺术一)(2)

欢迎关注公众号(hongji8410)和加入QQ群一起交流(522342554)

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页