-
2022-03-23 00:36:01
1.问题描述
采用DOM的方法获取当前的节点所在的位置,通过标签选择器,在j s中获取标签。
2.算法描述
采用getElementById方法获取到节点数上任意的节点,给标签添加id属性,通过id选择器获取到这个节点。
3. 实验讨论与结果
找出其中的方法,并写出过程,并运行出结果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}#box{
color: red;
text-indent:3em ;
background-color: cyan;
}
</style>
</head>
<body>
<div id="box">我喜欢在这里</div>
<ul>
<li>1</li>
<li id="me">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
<script type="text/javascript">
var element=document.getElementById("box"));
var eleCur=document.getElementById();
console.log(element);
console.log(eleCur);
console.log(EleLi)
</script>4.结语
不管节点在网页当中嵌套多少次,都可以获取到它的标签,一定要在这个标签前面设定一个id,再去获取。
稿件来源:深度学习与文旅应用实验室(DLETA)
作者:黄飞鸿
主编:欧洋
更多相关内容 -
jQuery查找节点并获取节点属性的方法
2020-11-22 07:45:27本文实例讲述了jQuery查找节点并获取节点属性的方法。分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>&... -
在Vue中使用ref获取dom元素节点及组件内的数据和方法
2021-01-20 14:03:17一、获取dom元素节点 为元素添加一个ref属性 该属性的值可任取 以作为该节点的引用名 ref即为reference(引用)的前三个字母 This is title This is content 用Vue实例中的自带的$refs属性获取元素 用预先定义好的... -
jQuery循环遍历子节点并获取值的方法
2020-10-22 13:29:37主要介绍了jQuery循环遍历子节点并获取值的方法,涉及jQuery节点的遍历与属性操作相关技巧,需要的朋友可以参考下 -
js,jquery获取节点以及内容和属性
2019-07-17 11:07:06JS获取DOM元素的方法: document.getElementById('id'); 通过ID获取 document.getElementsByName('name'); 通过name属性 document.getElementsByTagName('div'); 通过标签名 document.getElements...JS获取DOM元素的方法:
document.getElementById('id'); 通过ID获取 document.getElementsByName('name'); 通过name属性 document.getElementsByTagName('div'); 通过标签名 document.getElementsByClassName('classname'); 通过类名 document.querySelector('.animated'); 通过选择器获取一个元素 document.querySelectorAll('.animated'); 通过选择器获取一组元素 document.documentElement 获取html的方法document.documentElement是专门获取html这个标签的 document.body 获取body的方法document.body是专门获取body这个标签的。
- 所有获取DOM对象的方法中,只有getElementById()和querySelector()这两个方法直接返回的DOM对象本身,可直接为其绑定事件。
- getElementXXX类型的方法,除了通过Id获取元素,其他都返回一个集合,如果需要取到具体的DOM元素,需要加索引,如:document.getElementsByClassName(“box”)[0] =>获取class为box的所有元素中的第一个DOM元素。
querySelector()与querySelectorAll()两者的联系与区别:
- 联系: 两者括号中的取值都是选择器
- 区别: 当有多个class相同的元素时,使用querySelector()方法只能获取到第一个class为box的元素,而querySelectorAll()获取到了所有class为box的元素集合。
原生javascript方法:
var a = document.getElementById(“dom”); 通过id获取到该节点 del_space(a); 清理空格 var b = a.childNodes; 获取a的全部子节点; var c = a.parentNode; 获取a的父节点; var d = a.nextSibling; 获取a的下一个兄弟节点 var e = a.previousSibling; 获取a的上一个兄弟节点 var f = a.firstChild; 获取a的第一个子节点 var g = a.lastChild; 获取a的最后一个子节点 jQuery方法:
jQuery.parent(expr) ; 找父元素 jQuery.parents(expr) ; 找到所有祖先元素,不限于父元素 jQuery.children(expr) ; 查找所有子元素,只会找到直接的孩子节点,不会返回所有子孙 jQuery.contents() ; 查找下面的所有内容,包括节点和文本. jQuery.prev() ; 查找上一个兄弟节点,不是所有的兄弟节点 jQuery.prevAll() ; 查找所有之前的兄弟节点 jQuery.next() ; 查找下一个兄弟节点,不是所有的兄弟节 jQuery.nextAll() ; 查找所有之后的兄弟节点 jQuery.siblings() ; 查找兄弟节点,不分前后 jQuery.find(expr);
$ (“p”).find(“span”)是从元素开始找,等于$(“p span”)跟jQuery.filter(expr)完全不一样而jQuery.find()的返回结果,不会有初始集中筛选出一部分,而jQuery.find()的返回结果,不会有初始集合中的内容, jQuery.filter(expr); 是从初始的jQuery对象集合中筛选出一部分 内容和属性值
js获取text、html、属性值、value的方法
document.getElementById("test").innerText; document.getElementById("test").innerHTML; document.getElementById("test").id; document.getElementById("test1").value;
jQuery获取text、html、属性值、value的方法
$("#test").text()或者$("#test").innerText $("#test").html()或者$("#test").innerHTML $("#test").attr("id") $("#test").attr("value")或者$("#test1").val()或者$("#test1").value
结果对比
html:
<p id="test">这是段落中的 <b>粗体</b> 文本。</p>
js:
js与jQuery,text与innerText获取
$("#btn10").click(function(){ alert("Text: " + $("#test").text()); <!--结果 Text: 这是段落中的 粗体 文本。--> }); $("#btn11").click(function(){ alert("Text: " + $("#test").innerText); <!--结果 Text: undefined。--> }); $("#btn12").click(function(){ alert("Text: " + document.getElementById("test").innerTEXT); <!--结果 Text: test--> });
js与jQuery,html与innerHTML获取
$("#btn20").click(function(){ alert("HTML: " + $("#test").html()); <!--结果 HTML: 这是段落中的 <b>粗体</b> 文本。 --> }); $("#btn21").click(function(){ alert("HTML: " + $("#test").innerHTML); <!--结果 HTML: undefined --> }); $("#btn22").click(function(){ alert("HTML: " + document.getElementById("test").innerHTML); <!--结果 HTML: 这是段落中的 <b>粗体</b> 文本。 --> });
js与jQuery,属性值获取
$("#btn30").click(function(){ alert("id: " + document.getElementById("test").id); <!--结果 id: test --> }); $("#btn31").click(function(){ alert("id: " + $("#test").attr("id")); <!--结果 id: test --> });
html:
<input id='test1' value='aaa' class='test'>
js与jQuery,value获取
$("#btn40").click(function(){ alert("value: " + document.getElementById("test1").value); <!--结果 value: aaa --> }); $("#btn41").click(function(){ alert("value: " + $("#test1").val()); <!--结果 value: aaa --> val()只能用于input元素的value值获取 }); $("#btn42").click(function(){ alert("value: " + $("#test1").attr("value")); <!--结果 value: aaa --> });
-
Python获取任意xml节点值的方法
2020-09-22 03:16:47主要介绍了Python获取任意xml节点值的方法,涉及Python操作XML节点的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下 -
python 通过xml获取节点和属性
2020-05-09 21:26:58python获取xml文件方法集合 引入模块处理xml文件 from xml.dom.minidom import parse ...获取节点列表 nodelist = data.getElementsByTagName(大类名称) 获取第一个节点的子节点列表 childlist = nodelist[0].chipython获取xml文件方法集合
引入模块处理xml文件
<?xml version="1.0" encoding="UTF-8"?>
from xml.dom.minidom import parse
打开xml文档,
DOMTree = xml.dom.minidom.parse(data_path)
根据xml文档,得到文档元素的对象
data = DOMTree.documentElement
获取节点列表
nodelist = data.getElementsByTagName(大类名称)
获取第一个节点的子节点列表
childlist = nodelist[0].childNodes
获取XML节点属性值
node.getAttribute(AttributeName)
获取XML节点对象集合
node.getElementsByTagName(TagName)
返回子节点列表
node.childNodes
获取XML节点值
node.childNodes[index].nodeValue
访问第一个节点
node.firstChild ,等价于pagexml.childNodes[0]
访问元素属性 例如:
Node.attributes[“id”]
a.name #就是上面的 “id”
a.value #属性的值
以下为具体的demo内容:
方法调用
text = get_data_vaule(‘account’,‘type’,‘createText’,‘text’)
print text
#结果
test data
xml文件test data 11111@qq.com 11111111 下面方法相对应取数据的格式,# style = xml中的大类 ; typename = 细分属性; typevalue = 细分属性的值; valuename = xml文件,需要获取的值的tag;如果需要获取相对应的上面XML文件中
“test data”的值,那么style = data ; typename = type; typevalue = createText; valuename = text “11111@qq.com”的值,那么style = data ; typename = type; typevalue = email; valuename = username
方法文件
import unittest
import os
import time
from xml.dom.minidom import parse
import xml.dom.minidom
#获取xml文件地址
path = os.path.abspath(’.’)
data_path = os.path.join(path,‘features/data/data.xml’) #获取xml文件地址
DOMTree = xml.dom.minidom.parse(data_path)
data = DOMTree.documentElement
def get_attrvalue(node, attrname):
return node.getAttribute(attrname)
style = xml中的大类 ; typename = 细分属性; typevalue = 细分属性的值; valuename = xml文件,需要获取的值的tag;
def get_data_vaule(style, typename, typevalue, valuename):
nodelist = data.getElementsByTagName(style)
for node in nodelist:
if typevalue == node.getAttribute(typename):
node_name = node.getElementsByTagName(valuename)
value = node_name[0].childNodes[0].nodeValue
print value
return value
return -
JavaScript获取节点——获取属性节点
2016-11-27 19:37:550.前言 上一章讲了如何获取获取标签(元素)节点,这一节来和大家说一下如何获取属性节点。 我还是用代码来讲解:<!DOCTYPE html> 获取属性节点 <input type="text" id="in" plac
0.前言
上一章讲了如何获取获取标签(元素)节点,这一节来和大家说一下如何获取属性节点。
我还是用代码来讲解:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>获取属性节点</title> </head> <body> <input type="text" id="in" placeholder="请留下你的大名!" my="我的"> <script type="text/javascript"> var jsInput = document.getElementById("in"); </script> </body> </html>
效果:
注意:无论获取什么节点,首先要获取标签结节点,只有获取到标签节点,才能进行属性、文本节点的获取,切记,切记。
1.获取属性节点
第一种方法:获取官方定义的属性节点(获取元素的对应属性值)。
格式:元素节点 . 属性名。
注意:不能获取自定义属性的值。
代码如下:console.log(jsInput.placeholder); alert("是时候展现真正的技术");
效果:
设置属性节点的值
公式:元素节点 . 属性名 = 新的属性值
代码如下://设置元素对应属性的值 //元素节点.属性名 = 新的属性值 jsInput.placeholder = "sunck good";
效果:
第二种方法
公式:元素节点 . getAttribute(属性名);
注意:还可以获取自定义属性的值。
代码:console.log(jsInput.getAttribute("my"));
效果:
设置自定属性的值
公式:元素节点 . setAttribute(属性名, 新属性值);
注意:当属性不存在时,变为添加属性
代码://设置 //元素节点.setAttribute(属性名, 新属性值); jsInput.setAttribute("my", "sunck"); //注意:当属性不存在时,变为添加属性 jsInput.setAttribute("other", "sunck");
效果:
2.删除属性节点
公式:元素节点.removeAttribute(属性名);
注意:某些低版本浏览器不支持
代码:jsInput.removeAttribute("other"); console.log(jsInput);
效果:
3.总结
好了今天就到这,下节和大家分享获取文本节点,谢谢打赏!!!!
-
JQuery节点元素属性操作方法
2021-01-19 17:27:55获取属性和设置属性 如果要获取p元素的属性title,那么只需要给attr()方法传递一个参数,即属性名称。 var $para = $(p); //获取节点 var p_txt = $para.attr(title); //获取元素节点属性title 如果要设置元素的... -
解析具体xml获取节点的属性和标签的名称和内容
2018-04-04 18:04:53因为业务需求需要判断节点中response和zappsettlement中success的值为true才能进行下一步操作:主要是针对某个具体的xml进行解析:<response id="d5bdf222-812a-4686-bb57-05f063dc5e2a" name=&... -
JavaScript获取节点的方法大全
2020-10-26 22:49:311. 通过document节点获取 1.1 通过ID 语法:document.getElementById(“id”); 特点: 应用场景: 推荐指数: 示例: 1.2 通过标签名 语法:document.getElementById(“id”); 特点: 应用场景: 示例: 1.3 ... -
XPath获取XML指定节点属性值的两种方法
2019-12-04 22:14:37前面有文章介绍了通过XPath解析xml报文的方法,今天工作中遇到了需要解析指定节点属性值的问题,现在总结一下,下面提供两种方法去获取属性值。 首先是xml结构: 1.<?xml version="1.0" encoding="utf-8" ?>... -
JS 获取节点属性值
2015-07-03 11:11:45通过元素节点的属性名称获取属性的值。 语法: elementNode.getAttribute(name) 说明: 1. elementNode:使用getElementById()、getElementsByTagName()等方法,获取到的元素节点。 2. name:要想查询的元素... -
vue如何获取自定义元素属性参数值的方法
2020-12-28 20:52:16如果你是想获取data-num的数据,可以这样写:55getData:function (e,num) {console.log(num)}这样就可以取到这个值了,如果你是确实想操作DOM,那你可以这样写:55getData:function (e) {console.log(this.$refs.... -
JavaScript操作属性节点的方法、JS获取和设置CSS样式的方法
2018-12-10 17:30:43JavaScript操作属性节点 属性节点的特征: 1.nodeType值为11 2.parentNode值为null 3.在HTML中不包含子元素 注意:(1)尽管属性也是节点,但却不认为是DOM文档树的一部分。(2)开发人员常用getAttribute()... -
python 通过xml获取测试节点和属性
2017-07-24 20:29:36自动化测试中获取xml测试节点和属性的使用场景: 1. 经常变动的测试数据; 2. 数据量大,不方便放在脚本中; 3. 数据作用于多个地方; 4. 相同测试用例,可以使用不同的数据; 5. 例:不稳定,后续改动较多功能... -
DOM常见的节点类型,获取节点方法以及DOM方法大全
2019-03-15 21:57:31获取节点的方法: nodeType------节点类型,元素节点是1,文本节点是3. firstChild----该元素节点包含的第一个子节点 lastChild---该元素节点包含的最后一个子节点 nextSibling----该节点的后一个兄弟... -
js节点属性(获取,设置)
2019-01-25 20:06:10节点属性的获取有三种方法 1. 对象.属性名 2. 对象[属性名] 3. obj.getAttribute(pro) <img src="images/1.jpg" alt="" id="pic" class="one"> ... -
java 解析xml获取节点内容
2013-05-24 11:53:58不用任何jar包,解析xml内容。相同节点多个时。可以一次解析所有的内容。 -
JavaScript之DOM节点类型 、遍历节点、节点的属性以及节点方法
2018-06-11 12:30:51先介绍一下节点类型都有哪些:一、节点类型节点类型 属性nodeType返回值 元素节点1属性节点2文本节点3注释节点(comment)8document9DocumentFragment11所以一般我们获取节点类型用 nodeType二、遍历节点树这种... -
vue3获取dom节点方法
2022-04-10 13:45:17vue3ref获取dom节点 -
DOM(包括获取元素节点的方法以及获取和设置元素节点的属性)
2015-05-04 18:11:40对象是是一种自足的数据集合,与某个特定对象相关联的变量被称为这个对象的属性;只能通过某个特定对象去调用的函数称为这个对象的方法。 js中对象分为三种: (1)用户自定义对象 (2)内建对象:内建在js中的... -
原生 JS 获取节点方法总结
2019-01-26 10:42:28一、js获取子节点的方式 1. 通过获取dom方式直接获取子节点 其中test的父标签id的值,div为标签的名字。getElementsByTagName是一个方法。返回的是一个数组。在访问的时候要按数组的形式访问。 1 ... -
Activity 工作流节点新增属性方式和获取方式
2020-08-11 17:36:39转载请注明 原创链接: 时间:2020-08-11 首先在网上查了许多关于 Activity 工作流节点的问题,大部分都是...新增节点的控制方法是配置文件:stencilset.json 新增节点要配置这两个地方。详细教程网上搜搜也能找到。 -
Xml-对象互相转换(获取节点属性)
2017-07-28 10:51:44Xml中节点包含属性时,与Object之间的转换 -
JS 之Node节点的 属性、方法 &获取
2016-10-22 00:38:59JS Node节点的常见属性和方法使用 & 如何获取相应节点和值 一、节点的常用属性和方法 (一)通过具体的元素节点调用如下方法和属性 《1》getElementsByTagName() 方法,获取当前节点的指定标签名孩子节点 《2》... -
js获取元素节点的几种方法
2021-05-16 15:57:551.以元素名获取 //通过标签名获取元素节点(获取0到多个节点) //书写格式: ...2.通过name属性值获取元素节点(获取0到多个节点) //书写格式:document.getElementsByName("name值") letspan.. -
java中dom4j解析xml文件怎么获取节点属性
2016-12-06 16:54:11java中dom4j解析xml文件怎么获取节点属性 2010-6-9 10:15 dom4j中,使用Element.attributes方法可以获取到节点的属性,而使用elements则可以获取相应的子节点 比如: Element root = doc.getRootElement(); ... -
Linux——Linux驱动之设备树常用的of操作函数获取节点信息实践(设备树中如何添加自定义节点,如何获取节点...
2021-11-16 09:54:550 引言 之前讲过platform下driver.c获取device.c中的设备信息是通过platform_get_resource函数获取...【device_node结构体】:要想获取设备树上设备节点的其他属性信息,首先要获取到这个设备节点,Linux内核用devi...