小白初学JavaScript第九天

DOM

DOM 是 W3C（万维网联盟）的标准。
DOM 定义了访问 HTML 和 XML 文档的标准：
“W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分：

• 核心 DOM - 针对任何结构化文档的标准模型
• XML DOM - 针对 XML 文档的标准模型
• HTML DOM - 针对 HTML 文档的标准模型
  DOM：document object model 文档对象模型

dom是一种技术，允许开发者通过JavaScript来操作HTML/XML
在DOM中，会把HTML页面描绘成一个由节点组成的倒立树。
节点：12种
常见的有：元素节点(标签)、属性节点(属性)、文本节点(内容)
节点的关系：父子 (父节点、子节点) 兄弟(兄弟节点)

一.获取节点

1.获取子节点

• childNodes 包含元素节点和文本节点
• children 元素节点
  注意：children和childNodes都是集合(伪数组)

    var o = document.getElementById('box');//元素节点对象
    // console.log(o, typeof o);
    console.log(o.childNodes);//子节点   元素节点/文本节点		5个
    console.log(o.children);//子节点     元素节点				2个

2.获取父节点
parentNode 返回值是一个元素节点对象
offsetParent 定位的父节点
3.节点属性

• nodeType 节点的类型
• nodeName 节点的名称
• nodeVaule 节点的内容

4.其它获取节点的属性

• 1第一个子节点：firstChild（）文本/元素 节点

• firstElementChild（）元素节点

• 2最后一个子节点：lastChild 文本节点和元素节点

• lastElementChild 元素节点

• 3上一个兄弟节点: previousSibling 元素/文本 节点

• previousElementSibling 元素节点

• 4下一个兄弟节点: nextSibling 元素/文本节点

• nextElementSIbling 元素节点

二、节点的操作

通过JavaScript来对HTML进行增删改查
1.创建/增加节点
1）创建节点

• createElement(tagName) 创建一个元素节点对象
• createTextNode() 创建文本节点对象

2)添加节点：

• appendChild() 在父节点中末尾追加子节点
• insertBefore() 在指定节点前插入节点对象

2.删除节点：

• remove() IE8+ 删除节点（删除自身）
• removeChild() 删除指定子节点

3.替换节点
replaceChild(newChild,oldChild); 替换节点

        var oDiv=document.createElement('div');//创建的新的div标记
        oDiv.innerHTML="hello world";
        var o=document.getElementById('box');  //父节点      
        var op=o.children[0];//要被替换的节点
        o.replaceChild(oDiv,op);

4.复制/克隆节点

cloneNode(flag) 复制节点

注意：flag是一个布尔类型，默认为false，不复制子节点，只复制标签自身。true ，复制子节点