【脚本化文档】——属性&元素的内容

——属性

• html属性作为Element的属性

  • HTML属性名不区分大小写，但是javascript属性名大小写敏感，从html属性么转换到javascript属性名应该采用小写，如果属性名不止一个单词，则将第一个单词以外的单词的首字母大写(驼峰式)
  • 有些html属性名是javascript中的保留字，对于这些属性，一般的规则是为属性名加前缀“html” (class特殊，javascript中变成className)

• 获取和设置非标准html属性

  • getAttribute()——查询非标准属性
  • setAttribute()——设置非标准属性
  • hasAttribute()——检测属性是否存在
  • removeAttribute()——完全删除属性

• 作为Attr节点的属性
  

——元素的内容
1、作为html的元素内容

//innerHTML —— 读取Element的innerHTML属性作为字符串标记返回那个元素的内容
//把该节点内所有的内容(包括标签)都作为内容

2、作为纯文本的元素内容

//
/* textContent —— 返回节点中的纯文本，早期IE不支持 innerText —— 返回节点中的纯文本 textConten属性就是将指定元素的所有后代Text节点简单的串联在一起 innerText没有明确的指定行为，innerText不返回<script>元素的内容，它会忽略多余的空白 */

一个例子：作为Text节点的内容，查找元素的后代节点中的所有Text节点

// 返回元素e的纯文本内容，递归进入其子元素
// 该方法的效果类似与textContent属性
function textContent(e) {
    var child, type, s = "";  // s 保存所有子节点的文本
    for(child = e.firstChild; child != null; child = child.nextSibling) {
        type = child.nodeType;
        if (type === 3 || type === 4) // Text和CDATASection 节点
            s += child.nodeValue;
        else if (type === 1)           // 递归Element节点
            s += textContent(child);
    }
    return s;
}

点击这里下载思维导图——思维导图文件下载