element元素 取属性_js element类型的属性和方法整理
Element类型
除了Document类型,我们Web编程中最常用的类型就是Element类型啦.Element 类型用于表现XML或HTML元素,提供了对元素标签名,子节点,特性的访问
特征
nodeType值为1
nodeName为元素标签名
nodeValue为null
parentNode可能是Document或Element
子节点可能是Element,Text,Comment,ProcessingInstruction,CDATASection,EntityReference
其中nodeName和tagName属性返回相同的值,推荐使用tagName,则表义更清晰,值得注意的是返回值大小写的问题,由于HTML中为答谢,而XML/XHTML则会与源代码保持一致,所以比较时要统一大小写形式.
HTML元素
HTML元素都由HTMLElement类型表示,不直接通过该类型,也是通过它的子类型表示.HTMLElement类型继承自Element并且添加了一些属性如下:
id 元素在文档中的唯一标识符
title 元素的附加说明信息,一般为工具提示条显示
lang 元素内容的语言代码,很少使用
dir 语言方向,ltr为从左到右,rtl则相反
className 与元素class的特性对应,没有设置为class则是因为class为ECMAScript的保留字
注意以上属性的修改并不是所有都会在页面中直观的表现出来,id和lang修改对用户来说是不可见的(假设没有css样式),对title的修改则只会在鼠标移动到元素上时才会显示出来(工具提示条),dir的修改则会在属性重写的那一刻立刻影响页面中的文本,对className的修改则与是否关联了不同的CSS样式有关.
特性
HTML元素每个元素都有一个或多个特性,操作特性的DOM方法如下有三个:
getAttribute()
setAttribute()
removeAttribute()
这三个方法可以针对任何特性使用,包括自定义特性.但是只有公认的特性才会添加到DOM元素属性上,自定义的特性通常是不存在的(undefined),当然这里又要注意我们的”好朋友”IE啦,它会为自定义特性创建属性.
特殊特性
主要针对getAttribute()方法讲述一下特殊情况.
有两类特殊特性,有对应的属性名,但值与getAttribute()返回的值并不相同
style,通过getAttribute()访问会返回CSS文本,而通过属性访问返回一个对象
onclick这样的事件处理程序,通过getAttribute()访问会返回相应代码的字符串.而属性访问时,则会返回一个JavaScript函数(未指定则为null)
故通常只有取得自定义特性值的情况下,才会使用getAttribute()方法.
注意!:我们的”老朋友”IE7及以前版本中,getAttribute()方法访问上述两个特殊特性时,返回的值与属性的值相同.即getAttribute("style")返回一个对象,getAttribute("onclick")返回一个函数.
设置特性
这里主要讲解下setAttribute()方法,这和getAttribute()相对应.这个方法接受两个参数,要设置的特性名和值,如果特性存在则将值进行替换;不存在则创建并设置相应的值.
值得注意的是,设置特性名会转换为小写.而且直接给DOM元素添加一个自定义的属性并不会让这个属性成为元素的特性.
1 div.mycolor="red";2 div.getAttribute("mycolor"); //这里返回null(IE除外)
移除特性
removeAttribute()方法用于彻底删除元素特性,调用该方法会清除特性的值并完全删除特性.
注意!:IE6及以前版本不支持该方法.
attributes属性
Element类型是使用attributes属性的唯一一个DOM节点类型.在该属性中包含一个NamedNodeMap,与NodeList类似,也是”动态”集合.元素每一个特性都由一个Attr节点表示,每个节点都保存在NamedNodeMap对象中.相关方法如下:
getNamedItem(name)返回nodeName属性等于name的节点
removeNamedItem(name)从列表移除nodeName等于name的节点
setNamedItem(node)向列表添加节点,以节点的nodeName属性为索引
item(pos)返回处于数字pos位置处的节点
在该属性中有一系列的节点,每个节点的nodeName就是特性的名称,nodeValue就是特性的值.要取得元素的id特性,可以使用attributes.getNamedItem("id").nodeValue
等同于attributes["id"].nodeValue
调用removeNamedItem()与在元素上调用removeAttribute()效果相同.
setNamedItem()是一个很不常用的方法,该方法可以为元素添加一个新特性,此外需要为它传入一个特性节点.
注意!:IE7及更早版本会返回HTML元素中所有可能的特性,包括没指定的特性.
针对低版本改进:每个特性节点都有一个名为specified的属性,如果为true则意味着要么HTML中指定了相应特性,要么通过setAttribute()设置了该特性,在IE中未设置过的特性都为false,其他浏览器则不会为这类特性生成对应特性节点.
创建元素
document.createElement()方法就可创建新元素.
该方法接受一个参数,就是元素标签名,这个标签名在HTML下不区分大小写,XML中则会区分大小写.
在创建新元素的同时,新元素也设置了ownerDocument属性,此时,还可以操作元素特性,为它添加更多的子节点.
在设置完特性后,由于未添加到文档树,所以一切特性都不会影响浏览器的显示.我们可以通过之前讲到的appendChild(),insertBefore(),replaceChild()方法来进行相应的操作.
一旦添加到文档树,则浏览器会立刻呈现该元素.此后我们的修改都会反应到浏览器中.
注意!(常不考虑):在IE中我们可以通过另一种方式进行创建
document.createElement("
这个方式可以避开IE7及更早版本中动态创建元素的某些问题.(不能设置动态创建的iframe元素的name特性;不能通过表单的reset()方法重设动态创建的input元素;动态创建的type特性值为”reset”的button元素重设不了表单;动态创建的一批name相同的单选按钮彼此毫无关系)
元素子节点
除了IE,其他浏览器解析代码时会解析空白符为文本节点.我们可以通过nodeType属性的检查来过滤掉它们
element元素 取属性_js element类型的属性和方法整理相关推荐
- element元素 取属性_JS-DOM Element方法和属性
setAttribute方法: var a=document.createElement("div"); //新建一个DIV a.id="div1" ...
- 将C ++类型的属性公开给QML
将C ++类型的属性公开给QML 将C ++类型的属性公开给QML 数据类型处理和所有权 Exposing Properties 使用通知信号的注意事项 对象类型的属性 对象列表类型的属性 分组属性 ...
- struts2 依赖注入boolean类型的属性时报错
使用IDE:eclipse: struts2的版本:2.3.4.1 登录界面代码如下: Html代码 <?xml version="1.0" encoding=" ...
- 【配置属性】—Entity Framework 对应表字段的类型的设定配置方法
摘自:http://www.cnblogs.com/nianming/archive/2012/11/07/2757997.html Entity Framework Code First的默认行为是 ...
- Element属性 :获取,设置元素滚动距离,scrollHeight,scrollTop, scrollLeft属性详解
Element.scrollHeight - Web API 接口参考 | MDN Element.scrollHeight 这个只读属性是一个元素内容高度的度量,包括由于溢出导致的视图中不可见内容. ...
- XSD标准架构-----xsd:element 元素详解
声明一个元素. <elementabstract = Boolean : falseblock = (#all | List of (extension | restriction | subs ...
- js DOM Element属性和方法整理
js DOM Element属性和方法整理 节点操作,属性 1. childNodes.children 这两个属性获取到的子节点会根据浏览器的不同而不同的,所以一定要判断下nodeType是否为1. ...
- 在php中type有几种属性,HTML表单之input元素的23种type类型
input元素中有多种类型(type)值,用以接受各种类型的用户输入.其中,button.checkbox.file.hidden.image.password.radio.reset.submit. ...
- selenium+python,解决selenium弹出新页面,无法定位元素的问题(报错:Unable to locate element:元素)
selenium+python,解决selenium弹出新页面,无法定位元素的问题(报错:Unable to locate element:元素) 参考文章: (1)selenium+python,解 ...
最新文章
- python 定时任务
- python基础练习(二)
- java 中调用 Matlab 的函数
- 文件服务器的配置与管理(1) RAID技术
- Eclipse中Build Path的使用介绍---学习笔记
- osip2 代码分析
- Golang list双向链表源码走读
- client_hello_cb、get_session_cb、servername_cb、cert_cb
- php 126 发邮件,解析php中用PHPMailer来发送邮件的示例(126.com的例子)
- 88.合并两个有序数组(力扣leetcode)博主可答疑该问题
- 华硕台式计算机光盘怎么启动不了,华硕怎么设置光盘启动_华硕怎么设置开机启动光驱...
- [Arch]常用软件安装使用
- 二次函数顶点式计算机,二次函数公式:顶点式、交点式、两根式
- 2021数学建模国赛B题复盘详细解析
- JavaScript 的物理引擎对比
- grbl控制3轴机械臂 原理 实现 (四) 之GRBL源码修改驱动三轴机械臂
- 终端运行npm install @tinymce/tinymce-vue -S报错的解决办法
- 一些汉语词汇的英语表示
- HAL层,.sensors.h 头文件分析
- C++ Parent和Child继承分析
热门文章
- 强悍的命令 —— cp
- RPC(远程过程调用)原理及应用
- 辨异 —— 单词(同义词)的辨异
- 为hadoop集群安装mapreduce
- android返回按钮实现,Android实现返回键操作思路
- plantuml最大宽度_设置TH最小和最大宽度非常缓慢
- 移动端调取摄像头上面如何给出框_智能AI助力家居安防,创维小湃高清智能摄像头...
- python自动化办公 51cto_Python办公自动化之从Word到Excel
- Android日志Log的封装以及每个级别的意义
- python400集视频教程-微软官方出品的400集Python精品视频教程,这正是我们急需的!...