如何获取父元素的id值

如何获取父元素的id值,第1张

var child=documentgetElementById('id');

var ele=childparentChild();//获取父节点对象

var id=elegetAttribute('id');//获取父节点的id值

这是Jquery UI官网上的一个例子,我改了一下,你直接复制就能用了。

<html lang="en">

<head>  

<meta charset="utf-8" />  

<title>jQuery UI Draggable + Sortable</title> 

<link rel="stylesheet" href=">

如果某个div设置了高度,你可以获取这个div的高度,然后可以把这个高度给任意一个div赋值。

var height_num=documentgetElementById("divID")height;

var object_div=documentgetElementById("childDiv");

object_divheight=height_num;

CSS ,全称叫作Cascading Style Sheets,即 层叠样式表 。“层叠”是指当在HTML中引用了数个样式文件,并且样式发生冲突时,浏览器能依据层叠顺序处理。“样式”指网页中文字大小、颜色、元素间距、排列等格式。HTML定义了网页的结构,但是只有HTML页面的布局并不美观,可能只是简单的节点元素的排列,为了 让网页看起来更好看一些 ,这里借助了CSS。CSS是 目前唯一的网页页面排版样式标准 ,有了它的帮助,页面才会变得更为美观。如下图的右侧,即为CSS。

就局部放大来看,下图所示就是一个CSS样式。 大括号前面 是一个CSS 选择器 ,此选择器的意思是 首先选中 id为head_wrapper且class为s-ps-islite的 节点 ,然后 再选中 其内部的class为s-p-top的 节点 。大括号内部写的就是一条条 样式规则 ,例如 position 指定了这个元素的布局方式为 绝对布局 ,bottom指定元素的 下边距 为40像素,width指定了 宽度 为100%占满父元素,height则指定了元素的 高度 。也就是说,我们将位置、宽度、高度等样式配置统一写成这样的形式,然后用大括号括起来,接着在开头再加上CSS选择器,这就代表 这个样式对CSS选择器选中的元素生效 ,元素就会根据此样式来展示了。在网页中,一般会统一定义整个网页的样式规则,并写入CSS文件中(其后缀为css)。在HTML中,只需要用link标签即可引入写好的CSS文件,这样整个页面就会变得美观、优雅。

在爬虫过程中都需要爬取目标的 节点 ,我们知道网页由一个个 节点 组成, CSS选择器会根据不同的节点 设置不同的样式规则, 那什么是节点 ?又 怎样来定位节点 呢?下面围绕这两个问题进行介绍。

在HTML中,所有 标签定义的内容都是节点 ,它们构成了一个HTML DOM树。我们先看下什么是DOM,DOM是W3C(万维网联盟)的标准,其英文全称Document Object Model,即 文档对象模型 。它定义了访问HTML和XML文档的标准:W3C文档对象模型(DOM)是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。W3C DOM标准被分为如下3个不同的部分:

核心DOM :针对任何结构化文档的标准模型。

XML DOM :针对XML文档的标准模型。

HTML DOM :针对HTML文档的标准模型。

根据W3C的HTML DOM标准,HTML文档中的所有内容都是节点。 整个文档 是一个文档节点; 每个HTML元素 是元素节点;HTML 元素内的文本 是文本节点;每个HTML 属性 是属性节点; 注释 是注释节点。HTML DOM将HTML文档视作树结构,这种结构被称为节点树,如下图所示。

节点树中的节点 彼此拥有层级关系 。我们常用父(parent)、子(child)和兄弟(sibling)等术语描述这些关系。父节点拥有子节点,同级的子节点被称为兄弟节点。在节点树中, 顶端节点称为根 (root)。除了根节点之外,每个 节点都有父节点 ,同时可拥有任意数量的子节点或兄弟节点。下图展示了节点树以及节点之间的关系。

在CSS中,我们使用 CSS选择器来定位节点 。例如,下图中div节点的id为container,那么就可以表示为#container,其中#开头代表选择id,其后紧跟id的名称。另外,如果我们想选择class为wrapper的节点,便可以使用wrapper,这里以点()开头代表选择class,其后紧跟class的名称。另外,还有一种选择方式,那就是 根据标签名筛选 ,例如想选择二级标题,直接用h2即可。这是最常用的3种表示,分别是 根据id、class、标签名筛选 ,请牢记它们的写法。

另外,CSS选择器还支持 嵌套选择 ,各个选择器之间加上空格分隔开便可以代表嵌套关系,如#container wrapper p则代表先选择id为container的节点,然后选中其内部的class为wrapper的节点,然后再进一步选中其内部的p节点。另外,如果不加空格,则代表并列关系,如div#container wrapper ptext代表先选择id为container的div节点,然后选中其内部的class为wrapper的节点,再进一步选中其内部的class为text的p节点。这就是CSS选择器,其筛选功能还是非常强大的。另外,CSS选择器还有一些其他语法规则,具体如下表所示。

但是,这样每次都要浪费部分时间去寻找定位点,这样既不很方便,也不高效,那么如何提高爬虫中这部分工作的效率呢?今天我给大家分享一个爬虫的利器,它就是:SelectorGadget 插件。

point and click CSS selectors,强大的谷歌插件 CSS生成器 ,有助于我们快速找到html的节点信息,它也支持Xpath表达式。Selector Gadget是一个开源的Chrome扩展程序,可以轻松地在复杂的网站上生成和选择CSS选择器。安装扩展程序后,转到任意页面并启动它。网站右下方会打开一个方框。 单击您希望选择器匹配的页面元素(它将变为绿色)。然后SelectorGadget将为该元素生成一个最小的CSS选择器,并突出显示(**)选择器匹配的所有内容。现在单击突出显示的元素将其从选择器中删除(红色),或单击未突出显示的元素将其添加到选择器。 通过这个选择和拒绝过程,SelectorGadget可以帮助您找到满足您需求的完美CSS选择器。

首先需要安装一下这个神器。在谷歌浏览器中的应用商店里,搜索到SelectorGadget插件,点击“添加至Chrome”即可。如果不能打开Chrome应用商店,可以通过网上的其他途径获取该插件,之后再手动添加至谷歌浏览器即可。手动添加方法是:打开谷歌浏览器扩展程序,并开启开发者模式,将该插件拖拽到浏览器里,如果不成功,可以选择“加载已解压的扩展程序”,将该文件夹先压缩再解压添加进去。

同时在页面栏上能看到红框处的SelectorGadget标志。

咱们以 >

dom访问元素节点的方法:1 getElementById(): 通过元素id访问元素;2 getElementsByTagName(): 通过标签名访问元素;3 getElementsByClassName(): 通过class名访问元素;4 querySelector(): 通过css选择器访问元素;5 querySelectorAll(): 通过css选择器访问元素,获取到的是一个NodeList;6 getAttribute(): 获取元素的属性;7 setAttribute(): 设置元素的属性;8 removeAttribute(): 删除元素的属性;9 hasAttribute(): 检查元素是否具有某个属性;10 createElement(): 创建元素;11 appendChild(): 向元素节点添加子节点;12 removeChild(): 从元素节点移除子节点;13 replaceChild(): 用新节点替换旧节点;14 insertBefore(): 在指定子节点前插入新节点;15 cloneNode(): 复制元素节点;16 parentNode(): 获取元素的父节点;17 nextSibling(): 获取下一个兄弟节点;18 previousSibling(): 获取上一个兄弟节点;19 firstChild(): 获取第一个子节点;20 lastChild(): 获取最后一个子节点。

拓展:HTML标签的换行可以使用

标签,这个标签是用来换行的,在HTML中使用

即可实现换行效果。

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;

1)一共12个节点类型

2)dom *** 作就是对节点进行 *** 作

3)节点的类型的获取方法notetype

4)ie9以上及chrome safari firefox 会将换行符当成节点

(1)静态获取

(2)返回带有指定ID的元素

var box1=documentgetElementById('box');

(1)根据标签名获取

(2)得到的是个数组

var div1=documentgetElementsByTagName('div')[0];

(1)根据类名获取元素

(2)动态获取

(3)得到的是一个数组

var box=documentgetElementsByClassName('box')[0];

(1)返回符合要求第一个元素

(2)通过css选择器来获取指定标签

(3)静态获取

(1)返回所有匹配元素

(2)根据css选择器来获取所有标签

(3)得到的是一个数组

获取兄弟节点

获取下一个兄弟标签

获取上一个兄弟节点

获取上一个兄弟标签

获取最后一个子节点

获取最后一个子标签

获取所有非标签类型的子节点

获取所有子标签节点

获取父节点

增加节点

var div=documentcreateElement('div');

在父元素的末尾,插入节点

在添加元素前,需要将元素先创建好

divappendChild(div);

修改指定子节点

删除指定子节点

在删除前需要先获取到被删除元素

divremoveChild(box);

删除当前节点

需要先获取到被删除的节点

divremove();

(1)设置ID

divid='box';

(2)设置class

divclassName='box';

(3)设置style

divstylewidth='10px';

(4)设置路径

imgsrc='/';

(5)自定义属性

以上就是关于如何获取父元素的id值全部的内容,包括:如何获取父元素的id值、怎么实现jQuery树(tree)的文件拖动功能还有获取父节点(getparent),子节点(getchilren)的功能、CSS 的设置 div子节点怎么自适应 父节点的高度呢 父节点没有设置高度值的等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

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

原文地址: http://outofmemory.cn/web/9487864.html

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

发表评论

登录后才能评论

评论列表(0条)

保存