HTML DOM之属性的各种操作方法
1.element.getAttribute(attributename)方法用来返回指定属性名的属性值,返回的类型是字符串类型
2.element.getAttributeNode(attributename)方法从当前元素节点(nodeType值为1的节点)element中通过名称获取属性节点(nodeType值为2的节点),返回值是指定的属性节点
3.element.setAttribute(attributename,attributevalue)方法添加指定的属性,并为其赋指定的值。如果这个指定的属性已存在,则仅设置/更改值,无返回值
4.element.setAttributeNode(attributenode)方法用来向元素中添加指定的属性节点。如果这个指定的属性已存在,则此方法会替换它
5.element.removeAttribute(attributename)方法用来删除指定的属性。没有返回值
注意:此方法与 removeAttributeNode() 方法的差异是:removeAttributeNode() 方法删除指定的 Attr 对象,而此方法删除具有指定名称的属性。结果是相同的。同时此方法不返回值,而 removeAttributeNode() 方法返回被删除的属性,以 Attr 对象的形式
6.element.removeAttributeNode(attributenode)方法用来删除指定的属性,并以 Attr Node 对象返回被删除的属性。返回值是Attr类型的对象
7.element.hasAttribute(attributename)方法用来判断如果存在指定属性,则 hasAttribute() 方法返回 true,否则返回 false
8.node.hasAttributes()方法用来判断节点(不仅仅是元素节点element)是否拥有属性,拥有属性则返回true,否则返回false。如果指定节点不是元素节点,则返回值始终是 false。
注意:
**- Node(节点)是DOM层次结构中的任何类型对象的通用名称,Node有很多类型,如元素节点(element),属性节点(attr),文本节点(text),注释节点(comments)等,通过NodeType区分
**- Element继承了Node类,也就是说Element是Node多种类型中的一种,即当NodeType为1时Node即为ElementNode,另外Element扩展了Node,Element拥有id、class、children等属性
**- 简单的说就是Node是一个基类,DOM中的Element,Text和Comment都继承于它。 换句话说,Element,Text和Comment是三种特殊的Node,它们分别叫做ELEMENT_NODE, TEXT_NODE和COMMENT_NODE
那么下面为什么”document.body.childNodes.length”的结果是9呢?
实际上Node表示的是DOM树的结构,在html中,节点与节点之间是可以插入文本的,这个插入的空隙就是TEXT_NODE
这下就顺理成章了,body的直系元素(3)+ COMMENT_NODE(1) + TEXT_NODE(5) = 9
注意:我们用childNodes找到了NodeList,但我们操作DOM时往往不想操作Node(我只想操作元素Element),那么如何获取ElementList呢?其实我们经常使用的getElementsByXXX返回的就是一个ElementList,只不过它的真实名字是ElementCollection。就像NodeList是Node的集合一样,ElementCollection也是Element的集合。但需要特别注意的是:NodeList和ElementCollcetion都不是真正的数组。如果document.getElementsByTagName(‘a’) instanceof Array,那么必然是false。
HTML DOM之属性的各种操作方法相关推荐
- JS操作DOM元素属性和方法
Dom元素基本操作方法API,先记录下,方便以后使用. W3C DOM和JavaScript很容易混淆不清.DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访问 ...
- html标签的下一级遍历,jquery属性,遍历,HTML操作方法详解
Jquery属性遍历.HTML操作. Jquery拥有可操作HTML元素和属性的强大方法. 下面是我整理的一些jquery遍历函数: .add() 将元素添加到匹配元素的集合中. .andSelf() ...
- js DOM Element属性和方法整理
js DOM Element属性和方法整理 节点操作,属性 1. childNodes.children 这两个属性获取到的子节点会根据浏览器的不同而不同的,所以一定要判断下nodeType是否为1. ...
- javascript原生事件句柄、BOM、DOM对象属性方法总结
javascript原生事件句柄.BOM.DOM对象属性方法总结 JS事件句柄 事件句柄 类型 说明 onabort 事件句柄 图像加载被中断 onblur 事件句柄 元素失去焦点 onfocus 事 ...
- html dom的nodetype值介绍,HTML DOM nodeType 属性
HTML DOM nodeType 属性 实例 获得 body 元素的节点类型: document.body.nodeType; 结果: 1 定义和用法 nodeType 属性返回以数字值返回指定节点 ...
- jQuery: 选择器(DOM,name,属性,元素)
出处:http://www.cnblogs.com/starof/p/5411457.html 大部分选择器都是基于下面这个简单的页面: <!DOCTYPE html> <html ...
- html动态资源加载进度,JavaScript_快速解决js动态改变dom元素属性后页面及时渲染的问题,今天实现一个进度条加载过程 - phpStudy...
快速解决js动态改变dom元素属性后页面及时渲染的问题 今天实现一个进度条加载过程,dom结构其实就是两个div 控制里层div的宽width属性,就能实现进度条往前走的效果. 我的进度条是显示下载文 ...
- 解决js动态改变dom元素属性后页面及时渲染问题
解决js动态改变dom元素属性后页面及时渲染问题 参考文章: (1)解决js动态改变dom元素属性后页面及时渲染问题 (2)https://www.cnblogs.com/fangsmile/p/49 ...
- 总结jQuery中的DOM节点属性
DOM节点属性 attr removeAttr addClass removeClass html text attr attr(name|properties|key,value|key,fn):设 ...
最新文章
- 当远程桌面到Windows终端服务器,出现终端服务器超出了最大允许连接数,怎么办...
- C#里的一些加密解密标准函数示例——DES,SHA1,RSA
- 华为手机下拉菜单没了_用了三年才知道华为录屏这么强大!再不会用,手机钱打水漂了...
- linux中操作数据库的使用命令记录
- Android之创建选项菜单
- 简单有趣的web项目_有趣而简单的电子项目书
- In 2018, the release of Huawei‘s p20 pro
- Spring - Configuration Metadata
- 去除NSLog时间戳及其他输出信息
- 【体系结构】Oracle的kernel.shmmax和kernel.shmall设置
- angularjs路由_AngularJS路由示例– ngRoute,$ routeProvider
- C++多态虚函数demo
- 题目206-矩形的个数
- android idle模式
- libtersafe文件下载_tersafe.dll官方版下载
- Matlab三位曲线之plot3函数
- 微软混合现实设备HoloLens 2惊艳发布,售价2.4万人民币
- 抖音流量密码时间段,一天中这个时候发推荐几率大
- 自动提取全部EXCEL sheet 名称
- 火狐浏览器 Error: Incorrect contents fetched, please reload.
热门文章
- 深度装机大师一键重装_笔记本怎么重装系统?笔记本自己如何重装系统?
- signature=f7a4b29b93ef2b36608792fdef7f454a,Embedding of image authentication signatures
- python初始化函数_当你学会了Python爬虫,网上的图片素材就免费了
- 【电路补习笔记】2、电容的参数与选型
- 便宜的手机图传遥控模块
- Linux C 数据结构---链表(单向链表)
- 升级到 Tomcat 8 后 Cookie 可能出现的问题
- 请问WCF 跟 WebService之间异同
- 一个很有深度的C++内存问题---GDB调试(一)
- 《言简意赅之Linux设备驱动编程》 前言