精华内容
下载资源
问答
  • attributes $(this).each(function() { $.each(this.attributes, function() { // this.attributes is not a plain object, but an array // of attribute nodes, which contain both the name and ...
    attributes
    $(this).each(function() {
      $.each(this.attributes, function() {
        // this.attributes is not a plain object, but an array
        // of attribute nodes, which contain both the name and value
        if(this.specified) {
          console.log(this.name, this.value);
        }
      });
    });

     

    转载于:https://www.cnblogs.com/shimily/articles/10120175.html

    展开全文
  • JS中获取元素属性的8大方法

    千次阅读 2019-11-03 09:52:55
    今天想聊聊在Web前端开发中经常用到的技术:获取元素属性的一系列方法【innerHTML、outerHTML、innerText 、outerText、value、tex...

    640?wx_fmt=jpeg

    今天想聊聊在Web前端开发中经常用到的技术:获取元素属性的一系列方法【innerHTML、outerHTML、innerText 、outerText、value、text()、html(),val()】

    这些方法,大家应该用过,如果让你说出它们的一些区别和联系,能答得上来吗?接下来让我们一起来温故下。

    首先我们需要把它们归类下:

    innerHTML、outerHTML、innerText 、outerText、value 属于原生javascript的方法。

    text()、html(),val()属于jQuery中的方法。

    1、innerHTML 属性

    在读模式下,innerHTML属性返回与调用元素的所有子节点(包括元素、注释和文本节点)对应的 HTML 标记。在写模式下,innerHTML 会根据指定的值创建新的 DOM 树,然后用这个 DOM 树完全替换调用元素原先的所有子节点。下面是一个例子:

    <div id="content">	
        <p>This is a <strong>paragraph</strong> with a list following it.</p>	
        <ul>	
            <li>Item 1</li>	
            <li>Item 2</li>	
            <li>Item 3</li>	
        </ul>	
    </div>

    对于上面的<div>元素来说,它的 innerHTML 属性会返回如下字符串。

    <p>This is a <strong>paragraph</strong> with a list following it.</p>	
    <ul>	
        <li>Item 1</li>	
        <li>Item 2</li>	
        <li>Item 3</li>	
    </ul>

    2、outerHTML 属性

    在读模式下,outerHTML 返回调用它的元素及所有子节点的 HTML 标签。在写模式下,outerHTML 会根据指定的 HTML 字符串创建新的 DOM 子树完全替换调用元素。下面是一个例子。

    <div id="content">	
        <p>This is a <strong>paragraph</strong> with a list following it.</p>	
        <ul>	
            <li>Item 1</li>	
            <li>Item 2</li>	
            <li>Item 3</li>	
        </ul>	
    </div>

    如果在<div>元素上调用 outerHTML,会返回与上面相同的代码,包括<div>本身。

    使用 outerHTML 属性以下面这种方式设置值:

    div.outerHTML = "<p>This is a paragraph.</p>";

    这行代码完成的操作与下面这些 DOM 脚本代码一样:

    var p = document.createElement("p");	
    p.appendChild(document.createTextNode("This is a paragraph."));	
    div.parentNode.replaceChild(p, div);

    结果,就是新创建的<p>元素会取代 DOM 树中的<div>元素。

    replaceChild() 方法用新节点替换某个子节点。

    语法:

    node.replaceChild(newnode,oldnode)

    3、innerText 属性

    通过 innerText 属性可以操作元素中包含的所有文本内容,包括子文档树中的文本。在通过 innerText 读取值时,它会按照由浅入深的顺序,将子文档树中的所有文本拼接起来。在通过 innerText 写入值时,结果会删除元素的所有子节点,插入包含相应文本值的文本节点。下面是一个例子:

    <div id="content">	
    <p>This is a <strong>paragraph</strong> with a list following it.</p>	
    <ul>	
    <li>Item 1</li>	
    <li>Item 2</li>	
    <li>Item 3</li>	
    </ul>	
    </div>

    对于这个例子中的 <div> 元素而言,其中 innerText 属性会返回下列字符串:

    This is a paragraph with a list following it.	
    Item 1	
    Item 2	
    Item 3

    使用 innerText 属性设置这个<div>元素内容,则只需一行代码:

    div.innerText = "Hello world!";

    执行这行代码后,页面的 HTML 代码就会变成如下所示:

    <div id="content">Hello world!</div>

    设置 innerText 属性移除了先前存在的所有子节点,完全改变了 DOM 树。

    设置 innerText 永远只会生成当前节点的一个子文本节点,而为了确保只生成一个字文本节点,就必须要对文本进行 HTML 编码。利用这一点,可以通过 innerText 属性过滤掉 HTML 标签。方法是将 innerText 设置等于 innerText,这样就可以去掉所有 HTML 标签,比如:

    div.innerText = div.innerText;

    执行这行代码后,就用原来的文本内容替换了容器元素中的所有内容(包括子节点,因而也就去掉了 HTML 标签)。举个栗子:

    <label id="lab">请输入北京今天空气质量:<input id="aqi-input" type="text"></label>

    输出:

    640?wx_fmt=png

    4、outerText 属性

    除了作用范围扩大到了包含 调用它的节点之外,outerText 与innerText 基本上没有多大区别。在读取文本值时,outerText 与 innerText 的结果完全一样。但在写模式下,outerText 就完全不同了:outerText 不只是替换调用它的元素的子节点,而是会替换整个元素(包括子节点)。比如:

    div.outerText = "Hello world!";

    这行代码实际上相当于如下两行代码:

    var text = document.createTextNode("Hello world!");	
    div.parentNode.replaceChild(text,div);

    本质上,新的文本节点会完全取代调用 outerText 的元素。此后,该元素就从文档中被删除,无法访问。

    5、value 属性

    属性可设置或返回密码域的默认值。获取文本框的值。

    6、text():设置或者获取所选元素的文本内容

    1)无参text():

    取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。返回的是一个String。

    640?wx_fmt=png

    2)有参text(val):

    设置所有匹配元素的文本内容,与 html() 类似, 但将编码 HTML (将 "<" 和 ">" 替换成相应的HTML实体).返回一个jquery对象。

    640?wx_fmt=png

    7、html():设置或者获取所选元素的内容(包括html标记)

    1)无参html():

    取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档,返回的是一个String。

    640?wx_fmt=png

    2)有参html(val):

    设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。返回一个jquery对象。

    640?wx_fmt=png

    8、val()方法

    主要用于获取表单元素的值如input, select 和 textarea。当在一个空集合上调用,它返回undefined;

    1)无参 val() :

    获取匹配的元素集合中第一个元素的当前值。例子:

    HTML代码:

    <input type="text" value="你好啊">	
    <input type="text" value="啊哈哈哈">	
    <input type="text" value="嘻嘻嘻嘻">

    控制台输出:

    640?wx_fmt=png

    2)有参val(val):

    设置每一个匹配元素的值。返回一个jquery对象。

    640?wx_fmt=png

    总结

    对于这八大方法:innerHTML、outerHTML、innerText 、outerText、value、text()、html(),val()。您现在是否已经很清晰了?

    640?wx_fmt=jpeg

    640?wx_fmt=png

    展开全文
  • js获取元素属性值和获取元素内容

    万次阅读 2019-08-16 09:38:26
    获取属性-element.getAttribute(“属性名称”)。 jq中var a = $(“标签”).attr(“属性”);或var a = $(“标签签”).prop(“属性”); 什么时候用什么呢??? 对于HTML元素本身就带有的固有属性,...
    jq 用于取值的方法有text()、html()和val();
    js设置属性-element.setAttribute(“属性名称”,“属性值”);获取属性-element.getAttribute(“属性名称”)。
    jq中var a = $(“标签”).attr(“属性”);或var a = $(“标签签”).prop(“属性”);

    什么时候用什么呢???
    对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
    对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法

    展开全文
  • JS获取元素属性和自定义属性

    千次阅读 2018-09-11 18:41:34
    获取元素属性分为两种类型: 1-获取元素常见的属性(class,id,type,value……) 2-获取自定义的元素的属性(data-value,data-mess…….)   获取元素属性,设置元素的属性: 1-原生JS 设置属性 ....

    获取元素的属性分为两种类型:

    1-获取元素常见的属性(class,id,type,value……)

    2-获取自定义的元素的属性(data-value,data-mess…….)

     

    获取元素的属性,设置元素的属性:

    1-原生JS

    设置属性 .setAttribute("属性","值")
    获取属性 .getAttribute("属性")

    2-jquery

    设置属性 .attr("属性","值")
    获取属性 .attr("属性")

     下面通过一个例子介绍一下,如何获取和设置元素的属性;

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>获取元素属性</title>
            <style>
                * {
                    margin:0;
                    padding:0;
                    list-style:none;
                }
            </style>
        </head>
    
        <body>
            <div id="mayouchen">
                <div style="background:red;height:20px">元素属性获取</div>
                <div class="test1">
                    <p id="demo">点击按钮来设置按钮的 type,id,class 属性。</p>
                    <input value="OK" class="mayouchen">
                    <button onclick="mayouchen1()">获取元素属性</button>
                </div>
                <div style="background:green;height:20px">自定义属性获取</div>
                <div class="test2">
                    <div id="tree" data-leaves="47" data-plant-height="2.4m">我是被获取的元素</div>
                    <button onclick="mayouchen2()">获取自定义元素属性</button>
                </div>
            </div>
            <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
            <script>
                $(function() {
    
                });
    
                function mayouchen1() {
                    document.getElementsByTagName("INPUT")[0].setAttribute("type", "button");
                    document.getElementsByTagName("INPUT")[0].setAttribute("class", "mayouchen");
                    document.getElementsByTagName("INPUT")[0].setAttribute("id", "test1");
    
                    document.getElementsByTagName("INPUT")[0].getAttribute("id");
                    document.getElementsByTagName("INPUT")[0].getAttribute("class");
    
                    console.log("id=====" + document.getElementsByTagName("INPUT")[0].getAttribute("id"));
                    console.log("class=====" + document.getElementsByTagName("INPUT")[0].getAttribute("class"));
                }
    
                function mayouchen2() {
                    var tree = document.getElementById("tree");
                    //getAttribute()取值属性
                    console.log("data-leaves======" + tree.getAttribute("data-leaves"));
                    console.log("data-plant-height===============" + tree.getAttribute("data-plant-height"));
    
                    //setAttribute()赋值属性
                    tree.setAttribute("data-come", "49");
    
                    //data-前缀属性可以在JS中通过dataset取值,更加方便
                    console.log("通过dataset获得data-leaves====" + tree.dataset.leaves);
                    console.log("通过dataset获得data-plant-height====" + tree.dataset.plantHeight);
    
                    //注意在这里连字符的访问时,属性要写成驼峰形式
                }
            </script>
        </body>
    
    </html>

    转自:https://blog.csdn.net/qq_24147051/article/details/77976844

    展开全文
  • selenium-获取元素属性(六)

    千次阅读 2019-10-03 06:13:22
    获取元素属性很简单,使用 get_attribute 方法即可 如下图 获取具体的属性直接将该属性名当作参数传入即可 若是获取值,则获取的实则是该元素的 value,需要将 value 当参数传入 import time from ...
  • 首先用一段简短的代码查看Selenium.webdriver的所有属性 from selenium import webdriver # 导入webdriver包 ...print( dir(browser) ) #获取所有属性名 红色字体为常用的方法! ['CONTEXT_CHROME',...
  • python+appium获取元素属性

    万次阅读 2018-04-09 15:31:11
     一般标准的属性我们都可以通过get_attribute(“属性名称”)来获取,我们来看看下面截图的元素都是怎么获取的吧。从上到下来看。我们从text开始讲,我们先通过xpath方式定位到这个元素 获取text方法有:虽然有两种...
  • JS获取元素的transform属性

    千次阅读 2019-02-18 15:52:10
    这几天在改截图插件的截图框问题,需要获取元素transform的scale值,找了一下方法,现在记录下来: #divTransform { margin: 30px; width: 200px; height: 100px; background-color: yellow; /* Rotate div *...
  • 步骤: 1.在dom元素里定义一个:data-自定义名={{要传递的值}} 2.在方法的事件对象e里通过e.currentTarget.dataset.自定义名可以获取传递过来的值. 效果:
  • 获取元素属性值 // (1) element.属性 console.log(div.id); //(2) element.getAttribute('属性') get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 index console.log(div....
  • robotframework获取元素属性

    千次阅读 2020-04-14 20:39:14
    html示例: 如想获取div中的fid,uid,avatar属性值 1.先通过xpath定位到该元素 2.再使用Get Element Attribute方法获取属性值 运行结果:
  • js获取元素属性

    千次阅读 2016-06-27 21:10:55
    获取Input标签自定义属性的值  : HTML代码: JavaScript代码: 因为data不是input标签原生的属性,所以不能使用"点"操作。 非标准属性,要用:obj.getAttribute("data");的方式。 错误的用法:var data...
  • DOM之获取标签元素属性属性

    千次阅读 2020-03-30 20:35:42
    1,获取标签元素 docunment.getElementById('id') 只能获取一个id标签 docunment.getElementByClassName('class') 获取class标签,结果是一个为数组,不能用forEach document.getElementsByTagName('标签名称')...
  • airtest-poco获取元素属性值attr

    千次阅读 2020-05-06 21:34:29
    poco有直接获取属性的接口get_text,get_name。有时我们想获取其他的属性值,这时就需要用到attr(),我用个实际的场景示范下,比如,我想获取qq头像框的visible属性值 代码: from airtest.core.api import * ...
  • vue中如何获取元素自定义属性的值

    千次阅读 2018-10-08 14:55:56
    <divv-for="(item,index) in orderlist" :data-id="item.id" @click="ckxqs(index,item.id)">.../div> methods: { ...console.log(index)//获取当前索引下标 console.log(id)//获取循环id的值 }...
  • 小程序获取元素的一些属性

    千次阅读 2018-11-08 17:59:21
    let query = wx.createSelectorQuery() query.select('#canvas').boundingClientRect(res =&gt; { this.canvasWidth = Math.round(res.width) this.canvasHeight = Math.round(res.hei...
  • js获取元素内容与属性

    千次阅读 2018-08-06 20:16:46
    $('定位元素').data('xx') 用于定位元素的方式有用class定位(语法:$(".class的值")),用id(语法$("#id的值"))。或者是直接用标签定位(“td”)等等 layui中可以用来绑定click事件:如$...
  • vue click事件获取当前元素属性

    千次阅读 2020-06-22 10:30:28
    Vue可以传递$event对象 点击当前行文本 li2 li3 currentTarget:currentTarget 事件属性返回其监听器触发事件的节点,即当前处理该事件的元素、文档或窗口。 通俗一点说,就是你的点击事件绑定在哪一个元素上,...
  • selenium自动化-获取元素属性

    千次阅读 2018-07-28 16:46:30
    # 获取元素的其它属性 name = driver.find_element_by_id("kw").get_attribute("class") print(name) # 获取输入框的内容 driver.find_element_by_id("kw").send_keys("yoyoketang") value = driver.find_element_by...
  • 根据属性获取元素 例如要获取div中含有class属性的元素。 $("div[class]") 根据属性获取元素 在选择元素的时候使用[attribute$=value],匹配给定的属性是以某些值结尾的元素。 HTML代码 <input name="username...
  • 使用jquery获取html元素display属性

    千次阅读 2019-12-07 21:33:50
    使用js获取html元素display属性值判断每一个元素,找出css("display")为block的元素 判断每一个元素,找出css(“display”)为block的元素 具体代码如下: $(function(){ //取出所有div,并遍历 $("div").each(){...
  • 转自javascript根据元素自定义属性获取元素,操作元素function getElementByAttr(tag,attr,value) { var aElements=document.getElementsByTagName(tag); var aEle=[]; for(var i=0;i;i++) { if
  • Vue获取DOM元素属性

    千次阅读 2018-11-21 15:52:00
    在vue中如何获取到DOM元素距离窗口顶部的值呢? 1.通过$event获取 html: &lt;div class="sort-item" @click="showFilter($event)"&gt; {{currentFilter}} &lt;div class=...
  • js获取、设置元素属性

    万次阅读 2019-07-25 18:52:01
    文章目录...属性名` 网页css和样式结构 #box{ width:100px; height:100px; } <div id="box" style="background:red;"></div> setAttribute 元素...
  • 使用jquery获取元素标签的属性

    千次阅读 2018-08-16 10:32:14
    $("#menu li").click(function() {    alert($(this).attr("name"));//获取name属性      })
  • jquery获取元素属性值为undefined

    千次阅读 2018-11-28 22:57:55
    <li><input type=...写在元素上onclick里面的函数changeContent,函数里面使用的this指向全局对象window,而不是指向该元素 那么要获取onclick所在节点的object,我们则需要在调用function时就把this传递过去
  • Appium----获取app元素属性

    千次阅读 2018-11-19 16:41:17
    一般标准的属性我们都可以通过get_attribute(“属性名称”)来获取,我们来看看下面截图的元素都是怎么获取的吧。从上到下来看。 我们从text开始讲,我们先通过xpath方式定位到这个元素 获取text方法有: 虽然有两种...
  • js获取元素具体样式属性

    千次阅读 2016-06-18 16:55:34
    使用window.getComputedStyle这个方法获取所有经过浏览器计算过的样式(只要当前的元素标签可以在页面中呈现出来,那么它的所有样式都是经过浏览器计算过的/渲染过的),哪怕有些样式没有写,我们也可以获取到 ...
  • 比如要获取页面p标签中属性有id的元素 复制代码代码如下:$("p[id]").css("color","red"); 根据属性值获得元素 1.$。在jQuery 中$("&lt;span&gt;"),这个语法...
  • vue3.x通过ref属性获取元素

    千次阅读 2021-03-13 18:05:00
    然而在vue3中时没有$refs这个东西的,因此vue3中通过ref属性获取元素就不能按照vue2的方式来获取vue3需要借助生命周期方法,原因很简单,在setup执行时,template中的元素还没挂载到页面上,所以必须在mounted之后...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 735,530
精华内容 294,212
关键字:

获取元素的所有属性怎么吧