js中如何获取a标签这个DOM对象

<div id='div1'><a></a></div>

var div1=documentgetElementById('div1');

var a1=div1getElementByTagName('a');

首选假设有一个DOM结构

<div id="content">

<ul><li>1</li></ul>

<ul><li>2</li></ul>

</div>

现在我取content元素下的第二个ul元素下的li元素的个数,代码如下

$(function(){

$("#content ul:nth-child(2)")children("li")length;

});

W3C DOM和JavaScript很容易混淆不清。DOM是面向HTML和XML文档的API，为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。JavaScript则是用于访问和处理DOM的语言。如果没有DOM，JavaScript根本没有Web页面和构成页面元素的概念。文档中的每个元素都是DOM的一部分，这就使得JavaScript可以访问元素的属性和方法。

DOM独立于具体的编程语言，通常通过JavaScript访问DOM，不过并不严格要求这样。可以使用任何脚本语言来访问DOM，这要归功于其一致的API。表3-1列出了DOM元素的一些有用的属性，表3-2列出了一些有用的方法。

documentquerySelector(domSelector)getBoundingClientRect();

//获取dom元素的top,left,width,height,x,y,right,bottom

1:JS中大量的DOM *** 作也会导致事件响应缓慢甚至真正卡死浏览器，如在IE6下一次插入大量的HTML。而如果真的d出了“脚本运行时间过长“的提示框则说明你的JS脚本肯定有死循环或者进行过深的递归 *** 作了。

2:这时候需要对脚本进行优化，其步骤如下：

第一步，优化循环，循环体中包含太多的 *** 作和循环的次数过多都会导致循环执行时间过长，并直接导致锁死浏览器。如果循环之后没有其他 *** 作，每次循环只处理一个数值，而且不依赖于上一次循环的结果则可以对循环进行拆解，看下面的chunk的函数：

function chunk(array, process, context){

setTimeout(function(){

var item = arrayshift();

processcall(context, item);

if(arraylength >0){

setTimeout(argumentscallee,100);

}),100);

}

chunk()函数的用途就是将一个数组分成小块处理，它接受三个参数：要处理的数组，处理函数以及可选的上下文环境。每次函数都会将数组中第一个对象取出交给process函数处理，如果数组中还有对象没有被处理则启动下一个timer，直到数组处理完。这样可保证脚本不会长时间占用处理机，使浏览器出一个高响应的流畅状态。

其实看来，借助JS强大的闭包机制任何循环都是可拆分的，下面的版本增加了callback机制，使可再循环处理完毕之后进行其他的 *** 作。

function chunk(array,process,cbfun){

var i=0,len = arraylength; //这里要注意在执行过程中数组最好是不变的

setTimeout(function(){

process( array[i], i++); //循环体要做的 *** 作

if( i < len ){

setTimeout(argumentscallee,100)

}else{

cbfun() //循环结束之后要做的 *** 作

}

}

}

第二步，优化函数，如果函数体内有太多不相干但又要一起执行的 *** 作则可以进行拆分，考虑下面的函数：

function dosomething(){

dosomething1();

dosomething2();

}

dosomething1和dosomething2互不相干，执行没有先后次序，可用前面提到的chunk函数进行拆分：

function dosomething(){

chunk([dosomething1,dosomething2],function(item){item();})

}

或者直接交给浏览器去调度

function dosome(){

setTimeout(dosomething1,0);

setTimeout(dosomething2,0);

}

第三步，优化递归 *** 作，函数递归虽然简单直接但是过深的递归 *** 作不但影响性能而且稍不注意就会导致浏览器d出脚本失控对话框，必须小心处理。

看以下斐波那契数列的递归算法：

function fibonacci(n){

return n <2 n: fibonacci(n -1)+ fibonacci(n -2);

};

fibonacci(40)这条语句将重复调用自身331160280次,在浏览器中执行必然导致脚本失控，而采用下面的算法则只需要调用40次

fibonacci =function(n){

var memo ={0:0,1:0}; //计算结果缓存

var shell =function(n){

var result = memo[n];

if(typeof result !='number') //如果值没有被计算则进行计算

memo[n]= shell(n-1)+ shell(n -2)

return memo[n];

}

return shell(n);

}

这项技术被称为memoization,他的原理很简单就是同样的结果没必要计算两次。另一种消除递归的办法就是利用迭代，递归和迭代经常会被作为互相弥补的方法。

第四步，减少DOM *** 作，DOM *** 作的代价是相当昂贵的，大多数DOM *** 作都会触发浏览器的回流(reflow) *** 作。例如添加删除节点，修改元素样式，获取需要经过计算的元素样式等。我们要做的就是尽量少的触发回流 *** 作。

elstylewidth ='300px' elstyleheight ='300px' elstylebackgroundColor ='red'

上面的 *** 作会触发浏览器的三次回流 *** 作，再看下面的方式：

elclassName ='newStyle'

通过设置改元素的className一次设置多个样式属性，将样式写再CSS文件中，只触发一次回流，达到了同样是效果而且效率更高。因为浏览器最擅长的就是根据class设置样式。

还有很多可以减少DOM *** 作的方法，在此就不多说了，但是一个基本的原则就是让浏览器去做它自己擅长的事情，例如通过class来改变元素的属性。

相信经过上面的优化的过程必定可以大大提高用户体验，不会出现浏览器被锁死和d出脚本失控的对话框，使你的浏览器从繁重的任务中解放出来。需要指出的是上面这些优化并不是必须的，只有当一段脚本的执行时间真的影响到了用户体验才需要进行。虽然让用户觉得脚本的执行变快了，但其实完成同一个 *** 作的时间可能被延长了，这些技术只是让浏览器处于一个快速响应的状态，使浏览更流畅。

（1）domstylewidth/height 获取dom元素内联样式中设定的width，height

（2）domcurrentStylewidth/height 获取dom元素渲染后的width，height，只支持IE

（3）windowgetComputedStyle(dom)width/height 浏览器渲染后的元素宽,兼容性更好

（4）domgetBoundingClientRect()width/height/left/top/right/ 计算一个元素的绝对位置（相对于视窗左上角），它能拿到元素的left、top、right、bottom、width、height

ElementgetBoundingClientRect() - Web API 接口参考 | MDN

a页面和b页面必须是有关系的，不然是没办法的。

比如首先a页面，在a页面上的链接打开了b页面。可以

var obj = windowopenerdocumentgetElementById('objid');//objid是b页面上的控件id

以上就是关于js中如何获取a标签这个DOM对象全部的内容，包括:js中如何获取a标签这个DOM对象、怎么用js获取id为content元素下的第二个ul元素下的li元素的个数、JS *** 作DOM的几个属性与方法等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！