您的位置是:网站首页>Javascript编程Javascript编程

JavaScript中对HTML中元素属性的读取

少儿编程网2021-06-16 13:57:57Javascript编程 人已围观 来源:少儿编程 -用户投稿

简介表单中的内容:<!DOCTYPEhtml><htmllang=en><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatible&qu

bdI少儿编程网-https://www.pxcodes.com

表单中的内容:
bdI少儿编程网-https://www.pxcodes.com

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    <span  id="user"  data-email="a@qq.com" >jojo的奇妙</span>
    </body>
</html>

对表单中span标签属性数据进行读取:bdI少儿编程网-https://www.pxcodes.com

 <script>
        const sp=document.querySelector("span");
        console.log(sp);
        console.log(sp.id);   
 </script>

id可以正常获取
bdI少儿编程网-https://www.pxcodes.com

<script>
        const sp=document.querySelector("span");
        console.log(sp.data-email);
</script>

报错:Uncaught ReferenceError: email is not defined,email的值无法获取。bdI少儿编程网-https://www.pxcodes.com

PS:id默认内置的标准属性,可以直接进行访问,email非内置属性,undefinedbdI少儿编程网-https://www.pxcodes.com

   <script>
        const sp=document.querySelector("span");
        console.log(p.dataset.email);
        //对于自定义的数据属性"data-",使用dataset对象来操作
   </script>

推荐:《2021年js面试题及答案(大汇总)》

以上就是JavaScript中对HTML中元素属性的读取的详细内容,更多请关注少儿编程网其它相关文章!bdI少儿编程网-https://www.pxcodes.com

来源:php中文网bdI少儿编程网-https://www.pxcodes.com


相关文章:

支持一下 ( )

JavaScript中对HTML中元素属性的读取

      匿名评论
    • 评论
    人参与,条评论
    JavaScript中对HTML中元素属性的读取

微信公众号

免费视频教程

先知道