JavaScript之DOM-2 读取和修改节点信息(节点信息、元素的内容、属性)

一、节点信息


节点名称 nodeName

  - nodeName: 节点的名称,String 类型属性

      - nodeName 是只读的

JavaScript之DOM-2 读取和修改节点信息(节点信息、元素的内容、属性)_第1张图片


节点类型 nodeType

  - nodeType:节点类型,Number 类型属性

JavaScript之DOM-2 读取和修改节点信息(节点信息、元素的内容、属性)_第2张图片


节点值 nodeValue

  - nodeValue:节点的值,String类型属性

JavaScript之DOM-2 读取和修改节点信息(节点信息、元素的内容、属性)_第3张图片


二、元素的内容


HTML 内容

  - 元素节点对象的innerHTML属性读取或设置元素节点中的HTML内容

JavaScript之DOM-2 读取和修改节点信息(节点信息、元素的内容、属性)_第4张图片


文本内容

  - 元素节点对象的textContent属性用于读取或设置元素节点中的文本内容----子HTML标签会被踢除

JavaScript之DOM-2 读取和修改节点信息(节点信息、元素的内容、属性)_第5张图片


nodeValue 与 textContent

JavaScript之DOM-2 读取和修改节点信息(节点信息、元素的内容、属性)_第6张图片


有争议的 innerText

  - 标准 DOM 操作中,并没有innerText属性;

  - IE8 之前的IE浏览器不支持标准的textContent属性,使用innerText实现类似的功能,目前此属性已被大多数浏览器所兼容,但Friefox仍不支持此属性

  - innerText与标准的textContent属性并不完全相同

JavaScript之DOM-2 读取和修改节点信息(节点信息、元素的内容、属性)_第7张图片


三、属性


属性集合

  - 元素节点的attributes属性返回节点的属性集合,即NamesNodeMap----一个类数组对象

JavaScript之DOM-2 读取和修改节点信息(节点信息、元素的内容、属性)_第8张图片


读取属性

  - 可以使用如下几种方式读取某个属性的值:

      - element.attributes[下标].value

      - element.attributes['属性名']

      - element.getAttributeNode('属性名').value

      - element.getAttribute('属性名')

JavaScript之DOM-2 读取和修改节点信息(节点信息、元素的内容、属性)_第9张图片


修改属性

  - 可以使用如下方法设置元素的属性:

      - element.setAttribute(name,value); // IE8及以下版本不支持此方法

      - element.setAttributeNode(attrNode);

JavaScript之DOM-2 读取和修改节点信息(节点信息、元素的内容、属性)_第10张图片


移除属性

  - 可以使用如下两种方式删除一个属性:

      - element.removeAttribute('属性名'); 

      - element.removeAttributeNode(attrNode);

JavaScript之DOM-2 读取和修改节点信息(节点信息、元素的内容、属性)_第11张图片


判断属性

  - 如下方法可以用于判定元素是否拥有指定属性:

      - element.hasAttribute('属性名');   //true 或 false

      - element.hasAttributes();          //是否拥有属性 // IE8及以下版本不支持此方法

wKiom1b8_NXRqLYUAABbNBnSWz8088.png



总结:本章内容主要介绍了  JavaScript DOM 读取和修改节点信息(节点信息、元素的内容、属性)


本文出自 “会飞的蚂蚁” 博客,谢绝转载!

你可能感兴趣的:(浏览器,标签,元素,信息,被动技能)