javascript程序设计-DOM的应用技巧

2023-05-27 0 280

DOM特性:

1、firstChild firstElementChild

1.1、firstChild : 在IE9+和其它国际标准应用领域程序中,div与p间的盲点地区被指出是第二个子结点为盲点结点(即文件格式结点),div表明位数3

1.2、firstElementChild 能把盲点部份移走,加载恰当的结点边线值

2、nodeName、nodeValue、nodeType

2.1、在文件格式第一类数学模型 (DOM) 中,每一结点都是两个第一类。DOM 结点有四个关键的特性 :

nodeName : 结点的中文名称

nodeValue :结点的值

nodeType :结点的类别

一、nodeName 特性: 结点的中文名称,是黎贞的。

1. 原素结点的 nodeName 与条码名完全相同

2. 特性结点的 nodeName 是特性的中文名称

3. 文件格式结点的 nodeName 总有一天是 #text

4. 文件格式结点的 nodeName 总有一天是 #document

二、nodeValue 特性:结点的值

1. 原素结点的 nodeValue 是 undefined 或 null

2. 文件格式结点的 nodeValue 是文件格式另一方面

3. 特性结点的 nodeValue 是特性的值

三、nodeType 特性: 结点的类别,是黎贞的。以下常用的几种结点类别:

原素类别 结点类别

原素 1

特性 2

文件格式 3

注释 8

文件格式 9

3、getAttribute()方法 和getAttributeNode() 方法

定义: 通过原素结点的特性中文名称。如:title、id、class等值;

3.1、 var text=con[i].getAttribute(“title”)与var text=con[i].title 有什么区别吗?

4、setAttribute()方法

定义:增加两个指定中文名称和值的新特性,或者把两个现有的特性设定为指定的值 ,elementNode.setAttribute(name,value)

如:var Lists=

document.getElementsByTagName(“li”); ///条码名可能有多个,返回数组;

Lists[i].setAttribute(“title”,”Web前端技术”);

注1:在增加属的“事件响应”时必须用setAttribute方法,直接采用 elementNode.type=”XXX”创建事务响应无效;

注2:通过setAttribute创建样式:

firefox等能使用

var dom=document.getElementById(“name”);

dom.setAttribute(“style”,”width:10px;height:10px;border:solid 1px red;”) ;

IE中则必须使用style.cssText

var dom=document.getElementById(“name”);

dom1.style.cssText = “width:10px;height:10px;border:solid 1px red;”;

补充一下,目前style.cssText类似innerHTML了,已经成为两个web开发的事实国际标准。因此测试表明firefox应用领域程序也支持这种方式。

5、innerHTML和innerText 的应用领域和区别

innerHTML返回的是条码内的 html内容,包含html条码。

innerText返回的是条码内的文件格式值,不包含html条码。

6、innerHTML和createTextNode的区别:

都能把一段内容添加到两个结点中,区别是如果这段内容中有html条码(如例子中的<strong></strong>)时表现就不同了,在createTextNode中会当作文件格式处理,不会被应用领域程序解析,但用innerHTML就会被当作HTML代码处理(如你的例子中Hello会被加粗表明)。

7、innerHTML和createTextNode的区别

varbody =document.body;

varpment=document.createElement(“p”);

pment.className=“message”;

pment.innerHTML=“I Love you!”;

body.appendChild(pment);

var textNode =document.createTextNode(“I Love you!”);

pment.appendChild(textNode);

注:createTextNode 需要appendChild配合插入;

而innerHTML 直接赋值;

8、窗口与滚动条的边线:

scrollLeft:div1横向滚动条滚动的距离

scrollTop:于第一类最顶端与窗口中可见内容的最顶端间的距离 ,即上边灰色的内容。(如:div1纵向滚动条滚动的距离

offsetLeft:算左侧边线 。(如:div距离屏幕左部的距离) 。

offsetTop:div距离屏幕顶部的距离) 。

9、for里的XX[i]与this为什么不能混用:

主要还从执行顺序来看:

for循环先执行,为每两个原素第一类绑定事件;//每一原素绑定了事件,并未执行

for循环结束后,i的值变为length;//所以this不能替换为trs[i],此时的trs[i]为trs[length],不存在,undefined

触发事件,执行方法体.//因为此时的原素第一类才都绑定了事件,所以能执行.

注:this若在某个为windows下的函数内时,其实是指向windows而不是当时第一类; 如setTimerout,是windows下的函数内时。

10、setTimeout 和 setInterval 定时器的区别:

10.1、setTimeout: 此为超时调用,即时间到后才调用里面的函数方法;

格式: XX=setTimeout(function(){},时间毫秒);

或 setTimeout(function(){});

10.2、setInterval() 方法会不停地调用函数,直到clearInterval()被调用或窗口被关闭;

由setInterval()返回的ID值,可用作clearInterval()方法的参数;

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务