js 获取多层元素中的子元素的问题

js 获取多层元素中的子元素的问题,第1张

使用元素对象的getElementsByTagName('tagName')方法可以获得一个元素对象内所有的指定tagName标签的对象, 其返回值为一个数组, 然后遍历此数组即可 例如:

var ary = piecegetElementsByTagName("span"), i, spanObj;

for (i = 0; i < arylength; i++) {

spanObj = ary[i];

// 进行处理

}

当然, 前提是你的piece对象为一个有效的页面元素对象(如div对象)

<iframe id="iframeview1" name="iframeview1" src="LLnputjspisNew=0>"

frameborder="0" marginwidth="-10" scrolling="no">

</iframe>

你给iframe加个id和name使用起来不就方便了吗

jquery直接就$("#iframeview1")height(pageHeight);可以做相关设置了

1、新建一个html文件,命名为testhtml,用于讲解Jquery如何获得div下的元素。

2、在testhtml文件内,使用div标签创建一个模块,在div内,使用p标签,span标签创建测试的内容。

3、在testhtml文件内,设置div的id属性为divcon,主要用于下面通过该id获得div对象。

4、在testhtml文件内,使用button标签创建一个按钮,按钮名称为“获得div下的元素”。

5、在testhtml文件中,给button按钮绑定onclick点击事件,当按钮被点击时,执行divfun()函数。

6、在js标签中,创建divfun()函数,在函数内,通过id(divcon)获得div对象,使用html()方法便可以获得div对象下面的元素了。最后,使用alert()方法输出元素。

7、在浏览器打开testhtml文件,点击按钮,查看结果。

总结

1、创建一个testhtml文件。

2、在文件内,在div标签内,使用p标签创建一行文字,同时创建一个button按钮,用于触发执行js函数。

3、在js标签内,创建函数,在函数内,使用getElementById()方法通过id(mydiv)获是div对象,再使用getElementsByTagName()方法获得div下面的p元素对象,最后,使用alert()方法输出p元素的内容。

DOM: Document Object Model,文档对象模型;js提供了丰富的api来 *** 作文档内容。

DOM树: html文档中的内容是以树形结构排布,html是DOM树根,html下只有两个子标签head、body

节点: DOM将所有的分支端都成为节点。节点有很多类型,常见的节点类型有:文本节点、元素节点。

可以通过 nodeType查看节点类型 : 1元素节点、3文本节点

特殊的元素节点:

1、html元素

2、body元素

3、head元素

节点 *** 作的api(属性和方法)

1、nodeName:只读属性,可以读取节点名称

2、nodeType:只读属性,读取节点类型

3、 hasChildNodes():判断调用方法的节点是否存在子节点,存在返回true,不存在返回false。

主流浏览器会将换行符、制表符、空格当做文本节点处理,IE9以下会忽略它们。

4、childNodes:只读属性,获得节点的子节点集合,子节点集合是一个类数组结构,有数组特点无数组方法

5、firstChild:获得节点的第一个子节点

6、lastChild:获得节点的最后一个子节点

7、querySelector():

参数:string类型,css选择器

作用:获得文档中第一个符合选择器条件的节点

兼容:在IE9以下不支持

8、 querySelectorAll(): // 获得的都是静态集合

参数:string类型,css选择器

作用:获得文档中所有符合选择器条件的节点集合(类数组结构)

兼容:在IE9以下不支持

注意: querySelector() 和 querySelectorAll() 得到的都是元素节点。

9、previousSibling:获取节点的前一个兄弟节点

10、nextSibling:获取节点的后一个兄弟节点

11、parentNode:获得节点的父节点(父节点一定是元素节点)

12、removeChild():节点删除它的指定子节点

DOM *** 作元素:暂时不用的隐藏、一定不用的删除。

13、cloneNode():克隆一个节点

参数:boolean类型,true深克隆,false浅克隆,默认浅克隆

深克隆:不仅克隆节点和节点的属性,还会克隆节点的子节点

浅克隆:只克隆节点和节点的属性,不会克隆节点的子节点

14、areplaceChild(b,c):用b替换c

其中a是c的父节点,c是文档上已经存在的节点,b可以是节点也可以是已存在节点,被替换的节点会从文档结构中删除。

15、areplaceWith(b):用b替换a

a已存在的节点,b可以是新节点也可以是已存在节点,被替换的节点从DOM树删除。

16、ainsertBefore(b,c):在c前面插入b

其中,a是c的父节点,c是已经存在的节点,b是新节点

17、aappendChild(b):在a末尾追加b

a是父节点,b是a的子节点, c是子节点

元素节点的相关api

1、getElementsByTagName():根据标签名获得元素集合(类数组结构)

区别:HTMLCollection 是动态集合,NodeList 是静态集合。

2、createElement():根据标签名创建新元素

3、id:读写属性,可以读取或设置元素的id值

4、className:读写属性,可以读取或设置元素的class值

5、classList:读取标签的类名集合(类数组结构)

add():为元素新增类名,如果类名已存在不会重复添加

remove():删除元素指定类名,如果类名不存在不会执行 *** 作

元素的属性分为两类:

一类是元素本里就拥有的属性,例如:id、class、style、src、herf、target、alt、title、type、value等等,这些属性可以在js中直接通过语法读取或设置。

再一类是我们为了解决问题给元素添加的自定义属性,这些属性在js中无法直接通过语法读取,需要通过 *** 作方法访问。

6、setAttribute(name,value)

参数:name表示要设置的属性名,value要为属性设置的值

无返回值

7、getAttribute(name)

参数:name表示要读取的属性名

返回值:返回属性的值,如果属性不存在会返回null

8、removeAttribute(name)

参数:name表示要删除的属性名

无返回值

说明:setAttribute()、getAttribute()、removeAttribute()都可以 *** 作元素的本地属性和自定义属性。

element拓展:

兼容:以下属性、方法在IE9以下不支持。

1、children:读取元素的所有元素子节点集合(类数组)

2、parentElement:读取元素的父元素节点

3、previousElementSibling:读取前一个元素兄弟节点

4、nextElementSibling:读取后一个元素兄弟节点

5、firstElementChild:读取第一个元素子节点

6、lastElementChild:读取最后一个元素子节点

7、remove(): 将调用方法的元素从DOM结构中删除

1、var a = documentgetElementById("test")getElementsByTagName("div");

代码的test的父标签id的值,div为标签的名字。getElementsByTagName是一个方法。返回的是一个数组。在访问的时候要按数组的形式访问。

2、var b =documentgetElementById("test")childNodes;

使用childNodes获取子节点的时候,childNodes返回的是子节点的集合,是一个数组的格式。他会把换行和空格也当成是节点信息。

扩展资料:

js获取父节点的方式:

1、parentNode获取父节点

获取的是当前元素的直接父元素。parentNode是w3c的标准。

var p  = documentgetElementById("test")parentNode

2、parentElement获取父节点

parentElement和parentNode一样,只是parentElement是ie的标准。

var p1 = documentgetElementById("test")parentElement;

3、offsetParent获取所有父节点

一看offset我们就知道是偏移量 其实这个是于位置有关的上下级 ,直接能够获取到所有父亲节点, 这个对应的值是body下的所有节点信息。

var p2 = documentgetElementById("test")offsetParent;

这是因为ID是具有全局唯一性的,也就是说同一个页面是不允许出现相同ID的元素的(当然你在html中可以设定相同的id,但js只能定位到第一个),所以要想通过id来获取页面元素,只需要全局定位(即documentgetElementById)即可,不需要在子元素中再来进一步定位。事实上,正是因为上述原因,getElementById是document对象的特有方法,其他对象是没有这个方法的,这就是为什么listgetElementById会提示说不是函数的原因!

以上就是关于js 获取多层元素中的子元素的问题全部的内容,包括:js 获取多层元素中的子元素的问题、重赏!!js如何获取子元素的object HTMLIFrameElement 对象、JS如何获取某个DIV下的元素等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/9641565.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-30
下一篇2023-04-30

发表评论

登录后才能评论

评论列表(0条)

    保存