(1) documentgetElementById(elementId):该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法。如果页面上含有多个相同id的节点,那么只返回第一个节点。
如今,已经出现了如prototype、Mootools等多个JavaScript库,它们提供了更简便的方法:$(id),参数仍然是节点的id。这个方法可以看作是documentgetElementById()的另外一种写法,不过$()的功能更为强大,具体用法可以参考它们各自的API文档。
(2)documentgetElementsByName(elementName):该方法是通过节点的name获取节点,从名字可以看出,这个方法返回的不是一个节点元素,而是具有同样名称的节点数组。然后,我们可以通过要获取节点的某个属性来循环判断是否为需要的节点。
例如:在HTML中checkbox和radio都是通过相同的name属性值,来标识一个组内的元素。如果我们现在要获取被选中的元素,首先获取该组元素,然后循环判断是节点的checked属性值是否为true即可。
(3)documentgetElementsByTagName(tagName):该方法是通过节点的Tag获取节点,同样该方法也是返回一个数组,例如:documentgetElementsByTagName('A')将会返回页面上所有超链接节点。在获取节点之前,一般都是知道节点的类型的,所以使用该方法比较简单。但是缺点也是显而易见,那就是返回的数组可能十分庞大,这样就会浪费很多时间。那么,这个方法是不是就没有用处了呢?当然不是,这个方法和上面的两个不同,它不是document节点的专有方法,还可以应用其他的节点,下面将会提到。
(1)parentObjfirstChild:如果节点为已知节点(parentObj)的第一个子节点就可以使用这个方法。这个属性是可以递归使用的,也就是支持parentObjfirstChildfirstChildfirstChild的形式,如此就可以获得更深层次的节点。
(2)parentObjlastChild:很显然,这个属性是获取已知节点(parentObj)的最后一个子节点。与firstChild一样,它也可以递归使用。
在使用中,如果我们把二者结合起来,那么将会达到更加令人兴奋的效果,即:parentObjfirstChildlastChildlastChild
(3)parentObjchildNodes:获取已知节点的子节点数组,然后可以通过循环或者索引找到需要的节点。
注意:经测试发现,在IE7上获取的是直接子节点的数组,而在Firefox20011上获取的是所有子节点即包括子节点的子节点。
(4)parentObjchildren:获取已知节点的直接子节点数组。
注意:经测试,在IE7上,和childNodes效果一样,而Firefox20011不支持。这也是为什么我要使用和其他方法不同样式的原因。因此不建议使用。
(5)parentObjgetElementsByTagName(tagName):使用方法不再赘述,它返回已知节点的所有子节点中类型为指定值的子节点数组。例如:parentObjgetElementsByTagName('A')返回已知的子节点中的所有超链接。
(1)neighbourNodepreviousSibling:获取已知节点(neighbourNode)的前一个节点,这个属性和前面的firstChild、lastChild一样都似乎可以递归使用的。
(2)neighbourNodenextSibling:获取已知节点(neighbourNode)的下一个节点,同样支持递归。
(1)childNodeparentNode:获取已知节点的父节点。
上面提到的方法,只是一些基本的方法,如果使用了Prototype等JavaScript库,可能还获得其他不同的方法,例如通过节点的class获取等等。不过,如果能够灵活运用上面的各种方法,相信应该可以应付大部分的程序。
DOM全拼为DocumentObjectModel(文档对象模型)
是一种用于HTML和XML文档的编程接口,它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来。DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。
jsp中
<tr>
<th align="left" width="20%" style="width: 170px; ">分享文案编辑:</th>
</tr>
<tr>
<td class="form_table_content" ><input name="wshopshare"
id="wshopshare_1" type="text" style="width: 440px; ">
</td>
<td><input type="button" onclick="componentaddshare();" id="addshare" value="添加">
</td>
</tr>
点击一次添加按钮页面多一个文本框
————————————————————————————————————————
JS中
$("#content1")
append(
'<table id="1_'//id=1_type
+ type
+ '"><tr><td>分享语句'
+ type
+ '</td></tr><tr>'
+ '<td><div id="wshopshare"></div></td>'
+ '<td><input name="wshopshare" id="wshopshare" type="text" style="width: 440px; "></td>'
+ '<td></td>'
+ '<td><button type="button" id="del1" onclick="componentdeleteAll(\'1\');">删除</button></td>'
+ '</tr></table>');
一、react中获取dom有以下提供三种方法:
2react原生函数findDOMNode获取dom
3通过ref来定位一个组件,切记ref要全局唯一(类似id)
ref Callback 属性
React支持一种非常特殊的属性,你可以附加到任何的组件上。 ref 属性可以是一个回调函数,这个回调函数会在组件被挂载后立即执行。被引用的组件会被作为参数传递,回调函数可以用立即使用这个组件,或者保存引用以后使用(或者二者皆是)。
二、转发 Refs
通过这种方式,使用 FancyButton 的组件可以获得底层 button DOM 节点的引用并在必要时访问它 - 就像他们直接使用 DOM button 一样。
以下是对上述示例中发生情况逐步的说明:
elementplus点击表格某一单元格,获取当前dom方法:
1、利用Table组件的cell-click属性,可以获取当前点击的单元格列对应的Dom元素。
2、清空所有的名为current-cell的class属性。
3、为当前获取的单元格Dom动态添加名为current-cell的class属性。
4、控制单元格的input标签的显示隐藏就能实现表格的编辑功能。
常用的属性有,innerHTML属性、nodeName属性、nodeValue属性、nodeType属性等。
1、innerHTML属性,是获取元素内容的最简单方法。innerHTML 属性对于获取或替换 HTML 元素的内容很有用。
2、nodeName属性,规定节点的名称。nodeName 是只读的。
3、nodeValue属性,规定节点的值。对于元素类型的节点,其nodeValue 是 undefined 或 null;对于文本类型的节点,其nodeValue 是文本本身;对于属性类型的节点,其nodeValue是属性值。
4、nodeType属性,返回节点的类型。nodeType 是只读的。比较重要的节点类型有,元素(类型值为1),属性(类型值为2),文本(类型值为3),注释(类型值为8),文档(类型值为9)。
扩展资料
1、DOM属性访问方式
可通过 JavaScript (以及其他编程语言)对 HTML DOM 进行访问。所有 HTML 元素被定义为对象,而编程接口则是对象方法和对象属性。方法是您能够执行的动作(比如添加或修改元素)。属性是您能够获取或设置的值(比如节点的名称或内容)。
2、DOM其他属性
innerText属性设置或获取位于对象起始和结束标签内的文本,disabled属性获取表明用户是否可与该对象交互的值,nextSibling属性获取对此对象的下一个兄弟对象的引用,tagName属性获取对象的标签名称。
参考资料
百度百科-DOM
以上就是关于DOM获取标签的方法全部的内容,包括:DOM获取标签的方法、dom属性是什么意思啊、如何通过jquery获取js动态append到html页面的dom属性等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)