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。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/407231.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CSS Grid布局(2)

6.间距 grid-column-gap和grid-row-gap属性用来创建列与列,行与行之间的间距 间距(Gap)可以设置任何非负值,长度值可以是px、%、em等单位值 grid-gap是grid-row-gap和grid-column-gap两个属性的缩写 如果它指定了两个值,那么第一个值是设置…

React开发(124):ant design学习指南之form中的属性isFieldTouched

没有值的时候返回提示的error 有值返回undefined

HDU 4990 Ordered Subsequence --数据结构优化DP

题意&#xff1a;给一串数字&#xff0c;问长度为m的严格上升子序列有多少个 解法&#xff1a;首先可以离散化为10000以内&#xff0c;再进行dp&#xff0c;令dp[i][j]为以第i个元素结尾的长度为j的上升子序列的个数&#xff0c; 则有dp[i][j] SUM(dp[k][j-1]) (a[k] < a[…

CSS Grid布局(3)

10.网格线命名 通过grid-template-rows和grid-template-columns定义网格时&#xff0c;网格线可以被命名。网格线名称也可以设置网格项目位置 grid-template-rows和grid-template-columns定义你的网格&#xff0c;将名称分配给网格线 定义网格线名称时需要避免使用规范中出现…

VS 2010 OpenGL 配置与实例开发

首先参考了网上的安装配置环境部分&#xff1a;http://blog.csdn.net/Ididcan/article/details/4490797 最近准备学习OpenGL,结果发现敲入书中给的代码&#xff0c;居然提示头文件找不到&#xff0c;相当郁闷&#xff0c;查了一下才发现有些不是VC自带的&#xff0c;需要自己下…

NODE属性说明

注&#xff1a;文本节点、元素节点或者注释节点等都是Node类型的子类&#xff0c;它们继承自Node类&#xff0c;所以这里的node可以是任何一种节点类型 1.node.nodeType用来以数字值返回指定节点node的节点类型 2.node.nodeName用来返回指定节点的节点名称 如果节点是元素节点…

HTML DOM之标签操作方法

1.document.getElementById(id)方法可返回对拥有指定 ID 的第一个对象的引用 2.document.getElementsByName(name)方法可返回带有指定名称的对象的集合 3.document.getElementsByTagName(tagname)方法可返回带有指定标签名的对象的集合。如果把特殊字符串 “*” 传递给 getEle…

Vue中动态(import 、require)显示img图片

vue中&#xff0c;经常会遇到显示图片的问题&#xff0c; 如果是一个普通组件的话&#xff0c;那么这样就可以了 <img src"../assets/images/avtor.jpg" width"100%"> 上文的弊端有两个&#xff1a; 首先&#xff0c;是采用绝对路径引入。如果以…

案例精解企业级网络构建

早就听说51CTO博客出书了,但由于放假在家,没有来得及购买.现在开学了,天天上51CTO网站,博客出书的广告打的到处都是,嘿嘿!~~想不关注都不行啊!看了各位博友对这本书的好评,终于禁不住诱惑,也在网上购买了一本.今天终于收到书了.打开包装,书真的很精美.自己非常喜欢,我是一名专科…

Oracle 中 for update 和 for update nowait 的区别

原文出处http://bijian1013.iteye.com/blog/1895412 一.for update 和 for update nowait 的区别 首先一点&#xff0c;如果只是select 的话&#xff0c;Oracle是不会加任何锁的&#xff0c;也就是Oracle对 select 读到的数据不会有任何限制&#xff0c;虽然这时候有可能另外一…

HTML DOM之节点操作方法(1)

1.checkboxObject.focus()方法用于为 checkbox 赋予焦点 2.checkboxObject.blur()方法用于让 checkbox 失去焦点 3.appendChild()在子节点列表之后插入新增的子节点 注&#xff1a;您也可以使用 appendChild()方法将一个元素移动到另一个元素中 这里就将”myList2”中最后一个…

HTML DOM之节点操作方法(2)

9.document.hasFocus()方法返回布尔值&#xff0c;用于检测文档(或文档内的任一元素)是否获取焦点。没有参数 10.node.hasChildNodes()方法返回 true&#xff0c;如果指定节点拥有子节点&#xff0c;否则返回 false。没有参数 11.node.isDefaultNamespace(namespaceURI)方法返回…

(转载)Android两种Tab分页的方式:TabActivity和ActivityGroup以及Android项目几种常见的应用架构...

在Android里面Tab分页&#xff0c;常用的方法有两种&#xff1a; 一、TabActivity和TabHost的结合 1.主类继承TabActivity public class Tagpage extends TabActivity 2.获取当前TabHost对象 final TabHost tabHost getTabHost(); 3.添加Tab分页标签,这里就是关键&#xff0c;…

CSS3之Transition

css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发&#xff0c;并圆滑地以动画效果改变CSS的属性值 1.语法&#xff1a;transition: property duration timing-function delay; 参数1&#xff1…