码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2016-04-01 06:51:19      阅读:464      评论:0      收藏:0      [点我收藏+]

标签:浏览器   标签   信息   元素   被动技能   

一、节点信息


节点名称 nodeName

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

      - nodeName 是只读的

技术分享


节点类型 nodeType

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

技术分享


节点值 nodeValue

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

技术分享


二、元素的内容


HTML 内容

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

技术分享


文本内容

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

技术分享


nodeValue 与 textContent

技术分享技术分享


有争议的 innerText

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

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

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

技术分享


三、属性


属性集合

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

技术分享


读取属性

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

      - element.attributes[下标].value

      - element.attributes[‘属性名‘]

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

      - element.getAttribute(‘属性名‘)

技术分享


修改属性

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

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

      - element.setAttributeNode(attrNode);

技术分享


移除属性

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

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

      - element.removeAttributeNode(attrNode);

技术分享


判断属性

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

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

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

技术分享



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


本文出自 “技术交流” 博客,谢绝转载!

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

标签:浏览器   标签   信息   元素   被动技能   

原文地址:http://jasonteach.blog.51cto.com/5192112/1758931

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!