js element类型的属性和方法整理

时间: 2017-12-21阅读: 1948标签: 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元素添加一个自定义的属性并不会让这个属性成为元素的特性.

div.mycolor="red";
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("<div id=\"myNewDiv\" class=\"box\"></div>");

这个方式可以避开IE7及更早版本中动态创建元素的某些问题.(不能设置动态创建的iframe元素的name特性;不能通过表单的reset()方法重设动态创建的input元素;动态创建的type特性值为”reset”的button元素重设不了表单;动态创建的一批name相同的单选按钮彼此毫无关系)

元素子节点
除了IE,其他浏览器解析代码时会解析空白符为文本节点.我们可以通过nodeType属性的检查来过滤掉它们


吐血推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入...

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入...

3.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

链接: http://www.fly63.com/article/detial/268

element-ui合并单元格

例如一个时间段下对应多行数据,这就不免就涉及到了单元格合并,为每一个时间段下的 每一行 数据中都添加上对应的时间段数据 ,设定一个数组来存放要合并的格数

vue 使用element-ui中的Notification自定义按钮并实现关闭功能以及如何处理多个通知

使用element-ui中的Notification,只有一个message属性是有很大的操作空间,其余的都是写死的,无法进行扩展,达不到想要的效果。所以只能在message上下功夫。在element-ui官方文档中可以看到Notification中的message属性

使用element-ui中table expand展开行控制显示隐藏

在使用vue版本的ElementUI中的table功能的时候还是遇到了一些问题,可以说饿了么团队在这个UI框架的文档撰写已经非常不错了,不过还是有一些方法乍一看让人摸不着头脑,有些table的常用功能示例代码提供的不是非常详细

ElementUI使用v-if控制tab标签显示遇到的Duplicate keys detected: \\\'xxx\\\'问题

如果程序报错Duplicate keys detected: \\\'tab-xxx\\\'. This may cause an update error.八成是key重复了,首先检查一下v-for循环的key是否有问题;在<el-tab-pane>尽量不使用v-show控制标签的显示

如何让Element UI的Message消息提示每次只弹出一个?

Element UI的Message消息提示是点击一次触发一次的。在开发的时候经常会作为一些校验提示,但是公司的测试人员在进行测试时会一直点,然后就会出现如下图的情况。虽然客户使用的时候一般来说不会出现这种情况

使用mixins,实现elementUI表单的全局验证

使用ElementUi搭建框架的时候,大家应该都有考虑过怎么做全局验证,毕竟复制粘贴什么的是最烦了,一般验证规则,主要是是否必填,不为空,以及参数类型的验证。

vue-element Tree树形控件

通过tree树形控件的default-checked-keys属性来设置默认选中的节点,Tree树形控件通过后台接口获取到数组数据,还需要再次遍历,将它再遍历为数组,这样我们才可以调用

监听element-ui table滚动事件

做管理平台的项目,用到了element-ui,需要通过监听el-table滚动的位置来获取最新的数据,那么怎么样监听el-table的滚动呢?我们默认的技术栈是 vue+element-ui

element-ui中table树形表格的实现

一般在后端管理项目中,都会涉及菜单管理。菜单都是树形结构的数据,我们在使用ElementUI的时候,发现并没提供相应的树形表格组件,所以需要自己来实现。下面就简单讲解下element-ui中table树形表格的实现代码

elementui enter事件_在vue的element-ui下的el-input如何监听enter事件

在选择element-ui组件做开发的时候,发现直接使用@keyup.enter的形式监听不到回车事件,原因是element-ui自身封装了一层input标签,把原有的事件隐藏了。解决方法是:在enter后面加上.native

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全