javascript操作标签的常规属性

﹏ヽ暗。殇╰゛Y 2022-08-05 14:26 206阅读 0赞

html标签和js之间存在映射的关系，html标签在js中以Dom节点对象存在。  
js获取html标签中属性的方式有两种：  1. 通过dom对象的getAttribute方法   2. 通过dom节点属性.   
但在ie和ff下用node.getAttribute("属性名")得到的结果不太一样，相比下，通过node.属性名得到的结果更一致一些。

请在ie和ff中测试下面的代码:

<a href="http://www.baidu.com" id="a" class="b" title="baidu" οnclick="alert(this.href);return false;">baidu</a>
    <script type="text/javascript">
    	var node=document.getElementById("a");
    	alert( node.getAttribute("id") );
    	alert( node.getAttribute("class")  );
    	alert( node.getAttribute("className") );    //class 是js保留字，在获取标签的class属性时，要用className
    	alert( node.getAttribute("title") );
    	alert( node.getAttribute("href"));
    	alert( node.getAttribute("onclick"));
    	alert( node.getAttribute("innerHTML"));
    	
    	alert( node.id );
    	alert( node.class );
    	alert( node.className );
    	alert( node.title );
    	alert( node.href );
    	alert( node.onclick );
    	alert( node.innerHTML );
    </script>

测试结论： 使用node.属性名方式获取html属性值比node.getAttribute("属性名")方法在跨浏览器兼容性要好。

另外，在js中定义的属性，也可以作用到html上.

<style type="text/css">
       .red{color:red;}
    </style>
    <p id="pid">测试文字</p>
    <script type="text/javascript">
       var node=document.getElementById("pid");
       node.className="red";
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，206人围观）

还没有评论，来说两句吧...

相关阅读

相关 MongoDB的常规操作

[MongoDB的常规操作][MongoDB] MongoDB的命令操作流程：先进入MongoDB数据库 ![b44a1fb61ded563c43e2e5632f2

「爱情、让人受尽委屈。」/ 2022年12月15日 00:59/ 0 赞/ 281 阅读

相关 javascript操作标签的自定义属性

自定义属性是一个很好用的小技巧，利用它我们可以用来保存其它类型的数据。如数组，hash对象，字符串等. 但js来操作自定义属性要注意。案例: 在标签中定义了一

短命女/ 2022年08月07日 11:34/ 0 赞/ 225 阅读

相关 javascript操作标签的常规属性

html标签和js之间存在映射的关系，html标签在js中以Dom节点对象存在。 js获取html标签中属性的方式有两种： 1. 通过dom对象的getAttribute

﹏ヽ暗。殇╰゛Y/ 2022年08月05日 14:26/ 0 赞/ 207 阅读

相关 Javascript的script标签中的id属性

首先，和普通的html标签一样，script也是可以作为html元素来处理的，而Dom的节点都是可以有id属性的；其实，script中的id还是有用的，比如如果页面需要加载

ゝ一世哀愁。/ 2022年06月17日 12:52/ 0 赞/ 840 阅读

相关 JavaScript 对象属性操作

1. 数据属性（数据描述符） 2. 访问器属性（存取描述符） 3. Object.defineProperty() 4. Object.definePr

╰+攻爆jí腚メ/ 2022年05月26日 05:35/ 0 赞/ 225 阅读

相关 JavaScript（二）js 操作 html 标签（添加事件、改变属性、改变标签内容、定时器）

找到页面元素 > 先给标签一个id属性，然后根据id的值查找。 > > document.getElementById("id值"); > > 可以根据标

谁借莪１个温暖的怀抱￠/ 2022年03月28日 14:48/ 0 赞/ 586 阅读

相关 python 去掉常规的html标签

前言：写爬虫的时候经常抓取带 html 标签的页面，如果针对文字匹配，html 标签就变得一无是处，所以需要清洗掉。 1.技术说明 html 标签一般是比较规整

港控/mmm°/ 2021年12月21日 01:37/ 0 赞/ 252 阅读

相关 Python | 常规的视频操作

> 常规的视频操作主要有：缩小视频分辨率，分辨率不变缩小视频保存空间，加快视频播放速度等功能。不得不说，利用Python及其相应的第三方库，能使得很多功能变的实现变得更加便捷。

小灰灰/ 2021年12月14日 08:45/ 0 赞/ 291 阅读

相关 JavaScript如何自定义标签属性

目录：一、为何要自定义属性？二、自定义属性的2种方式第1种：直接在标签中添加想要的属性第2种：点

r囧r小猫/ 2021年11月10日 23:28/ 0 赞/ 638 阅读

相关 Springboot常规属性配置

常规属性配置在常规 Spring环境下,注入 properties文件里的需要通过@propertySource指明 properties文件的位置,然后通过@Valu

朱雀/ 2021年09月21日 03:26/ 0 赞/ 344 阅读