Skip to content

Latest commit

 

History

History
101 lines (63 loc) · 3.22 KB

14.1.3 Element类型.md

File metadata and controls

101 lines (63 loc) · 3.22 KB

14.1.3 Element 类型

概念

ELement 类型表示元素类型,暴露了访问元素标签名、子节点和属性的能力。

可以直接访问 nodeName 和 tagName 属性来获得元素标签名,这两个元素返回相同的值

div.tagName 实际返回的是大写的 “DIV” 所有进行比较的时候,最好都转换成小写去比较

HTML 元素

HTML 元素都通过 HTMLELEMENT 类型表示,包括直接实例和间接实例,并且继承了 ELement 并增加了一些属性。这些属性可以直接获取访问对应的值。详见 P415表格字典

获取属性

getAttribute()

div.getAttribute('id')

接收一个传参,表示要属性的属性名(需要传标签上实际带的,例如calss),如果给定属性不存在,会返回 null 。

  • 这个方法可以访问到元素中的自定义属性,自定义属性建议前缀加 data- 表示这是自定义字段

  • 传参不区分大小写

通常直接访问和用此方法会返回相同的值。但是有两种类型的值例外:

  1. class属性。通过 getAttribute() 方法访问获取的是一个字符串(也就是类名), 而直接访问元素的属性会返回一个 CSSStyleDeclaration 对象。
  2. 事件处理程序,例如 onclick getAttribute() 方法获取到的是一个字符串形式的源代码,直接访问则是一个JS函数

不难理解,其实 getAttribute() 相当于就是读元素标签里的属性,而直接访问通常会访问到实际执行的代码。

考虑到这两种差异,开发者通常会直接使用对象属性,这个方法一般用于获取自定义值

setAttribute()

div.setAttribute('name', '我是div')

为元素设置一个属性,接收两个传参: 要设置的属性和要设置的值。

它可以设置自定义值,而在 Element 上直接设置自定义属性是无效的。

// 无效
div.data-name = '123'
// 有效
div.setAttribute('data-name', '123')

removeAttrubute()

div.removeAttrubute('name')

移除一个元素的属性,接收需要移除的属性, 会彻底移除属性,而不是仅仅删除值

attributes属性-遍历元素的所有属性

Element 属性是唯一拥有 attributes属性的 DOM 节点类型。

attributes 属性包含了一个叫做 NamedNodeMap 的”实时“集合,主要有下面四种方法:

  1. getNamedItem(name)
  2. removeNamedItem(name)
  3. setNamedItem(node)
  4. item(pos)。 返回索引位置pos处的节点

这个属性用的不多,比较实用的是遍历元素的所有属性的方法

function outputAttributes (element) {
  let paris = [];
  for(let i = 0; len = element.length; i < len; i++) {
    const attribute = element.attributes[i];
    paris.push(`${attribute.nodeName}=${attribute.nodeValue}`)
  }
  return paris
}

创建元素

document.createElement('div')

接收一个参数: 要创建元素的标签名,不区分大小写。会自动把 ownerDocument 设置为 document

元素后代

childNodes 属性包含元素所有子节点。如果要遍历某个元素的某种特定子节点,可以加一个 nodeType 的判断。

element 上使用 getElementByid 和在文档中是一样的,不过范围限制在了此元素中。