Fork me on GitHub

JavaScript笔记_DOM

发表于 | 分类于 | 本文总阅读量 次

DOM是什么

  1. “D”指的是文档 即 document ,没有 document DOM也就无从谈起 你编辑的网页文档会被WEB浏览器转换为文档对象，document是DOM操作的基础
  2. “O”是指的JavaScript语言里面的对象，即Object 。在JavaScript里存在三种对象类型
    1. 用户定义的对象
    2. 内建对象
    3. 宿主对象
  3. “M”代表着模型，即Model。在DOM里面把一份文档当做一个谱系根壮形结构。家族成员分为父级，子级，还有兄弟结构.

document

document是操作HTML的入口（对象）
document是HTMLDocument（是类型->构造函数）构建出来的及为HTMLDocument的子集

getElementsByName

  • IE8以及之前版本不支持getElementsByClassName
  • getElementsByName 通过name 属性获取元素
  • getElementsByTagName 通过标签获取元素返回带有指定标签名的对象的集合。

querySelector

  • querySelector(selector): 返回第一个选择器匹配的 HTML 页面元素。
  • querySelectorAll(selector): 返回全部选择器匹配的 HTML 页面元素。

NodeList

  • 动态 NodeList
    *通过 getElementsByName()、getElementsByTagName() 和 getElementsByClassName() 方法获取的 NodeList 就是动态的 NodeList。
  • 静态 NodeList
    • 通过 querySelectorAll() 方法获取的 NodeList 就是静态的 NodeList。

节点操作

  • document.createElement(标签名)创建元素节点
  • document.createTextNode(文本内容)创建文本节点
  • document.createAttribute(属性名称)创建属性节点

x.appendChild(errortext)为X创建子节点

1
2
3
4
5
6
7
8
9
10
11
12
13
var li = document.createElement('li');
    // console.log(li);
var idAttr = document.createAttribute('id');
    idAttr.nodeValue = 'huawei';
    li.setAttributeNode(idAttr);
var nameAttr =document.createAttribute('name');
    nameAttr.nodeValue = 'huawei';
    li.setAttributeNode(nameAttr);
var text = document.createTextNode('华为');
    // 通过父级与子级的关系 - 添加文本节点
    li.appendChild(text);

Document 的属性和方法保存在原型上

parentNode, parentElement

parentNode是W3C标准的parentElement 只在IE中可用.
Node方法节点元素的最上层为 Document
标签元素的最上层为HTML HTML的父级标签元素不存在 为null

nodetype 加点类型

DOM事件会产生变量获取的问题

事件的响应机制是实时的而变量在事件发生后并没有变化。

IE8之前版本不错在空白节点的问题

insertAfter()是JQ里面的方法而不是DOM提供的。

NodeList 会在删除组合时出现问题

动态NodeList在遍历中使用 i– 可以解决 出现错误数据的问题

childElementCount 获取子元素的个数

firstElementChild，lastElementChild，childElementCount
存在兼容问题

**对应解决：children[0] children[children.length-1] children.length

获取相邻兄弟元素兼容IE的解决方案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//a:父级元素
//b:子级元素
function previousElementSibling(a,b) {
    var parent = document.getElementById(a);
    var child = document.getElementById(b);
    var cityC =parent.children;
    for(var i=0;i<cityC.length;i++) {
        if (cityC[i] == child) {
            return cityC[ i-1];
        }
    }
}
function nextElementSibling(a,b) {
    var parent = document.getElementById(a);
    var child = document.getElementById(b);
    var cityC =parent.children;
    for(var i=0;i<cityC.length;i++) {
        if (cityC[i] == child) {
            return cityC[ i+1];
        }
    }
}

IE8 提供 innerText 代替textContent

innerHTML不能由用户输入；

IE8下this 指向 window对象；

换行也是text节点是换行节点