JS学习day09 --DOM

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准接口

1、节点

1、获取子节点

• 父级.childNodes 标准浏览器下包含 文本或换行节点，而在IE8及以下，只包含元素节点
• 父级.children 所有浏览器一返回元素节点

返回的都是类数组，有长度，能通过下标获取某一个

<ul id="ul1">
    <li>11111</li>
    <li>22222</li>
    <li>33333</li>
    <li>44444</li>
</ul>

var ul = document.getElementById('ul1');
var li = ul.childNodes;
console.log(li);

var li = ul.children;
console.log(li);

2、节点的基本属性

节点基本属性有nodeType, nodeName, nodeValue

var p = document.querySelector('p');
var ul1 = document.getElementById('ul1');
var li = ul1.childNodes;

// 节点.nodeType : 节点类型，返回1--12的数字，代表12种类型
// 1：元素节点   2：属性节点   3：文本节点    9：文档节点
console.log(p.nodeType); // 1
console.log(ul1.nodeType); // 1
for (var i = 0; i < li.length; i++) {
    console.log(li[i].nodeType);
}

// -----------------------
// 节点.nodeName   : 节点名称  
// 元素节点：返回元素节点的大写的标签名
// 文本节点：返回#text
console.log(p.nodeName); // P
console.log(ul1.nodeName); // UL
for (var i = 0; i < li.length; i++) {
    console.log(li[i].nodeName);
}

// -------------------
// 节点.nodeValue  : 节点内容
// 节点内容：认为只有文本才有节点内容
// 推荐用innerHTML  innerText
console.log(p.nodeValue); // null
console.log(p.childNodes[0].nodeValue); // 11111111

3、父节点

• 元素.parentNode 返回元素的父级
• 元素.offsetParent 返回离它最近的有定位属性的父级，如果没有定位的父级，返回body

<div id="box1">
    <div id="box2">
        <div id="box3"></div>
    </div>
</div>

var box3 = document.getElementById('box3');

console.log(box3.parentNode);
console.log(box3.offsetParent);

4、其它节点

获取父节点下的第一个元素子节点

• 父元素.firstChild 在标准浏览器下，有可能返回文本节点，在IE8及以下，返回元素节点
• 父元素.firstElementChild 在标准浏览器下，返回第一个元素节点，在IE8及以下，没有这个方法

var ul1 = document.getElementById('ul1');

var first = ul1.firstElementChild || ul1.firstChild;
first.style.backgroundColor = 'red';

// 最后一个
var last = ul1.lastElementChild || ul1.lastChild;
last.style.backgroundColor = 'pink';

// 下一个兄弟节点
var next = first.nextElementSibling || first.nextSibling;
next.style.backgroundColor = 'yellow';

// 上一个兄弟节点
var prev = last.previousElementSibling || last.previousSibling;
prev.style.backgroundColor = 'green';

// ---------------------
// 推荐：如果找第一个和最后一个
var li = ul1.children;
console.log(li[0]); // 第一个
console.log(li[li.length - 1]); // 最后一个

5、属性操作

<div id="box" title="哈哈哈啊" abc="洋洋">平头哥</div>

// 1、点的形式 (不能操作标签上的自定义属性)
console.log(box.title);
box.title = '老王';
console.log(box.abc); // undefined

// 2、中括号的形式  (不能操作标签上的自定义属性)
console.log(box['title']);
box['title'] = '老马';
console.log(box['abc']); // undefined

// ------------------------------
// 元素.getAttribute(属性名); 获取
// 元素.setAttribute(属性名, 值); 设置
// 元素.removeAttribute(属性名); 删除

console.log(box.getAttribute('title'));
box.setAttribute('title', '老李');

console.log(box.getAttribute('abc')); // 操作自定义的
box.setAttribute('abc', '老洋');

box.setAttribute('ddd', '123')
box.removeAttribute('title'); 

dataset

<div id="box" data-abc="123" data-id-ab="小王">平头哥</div>

// IE10及以下不支持
var box = document.getElementById('box');

// ----------------------
console.log(box.dataset); // { abc → "123", idAb → "小王" }
console.log(box.dataset.abc);
console.log(box.dataset.idAb);

box.dataset.index = '456'; // 设置

delete box.dataset.abc; // 删除

2、操作节点

1、创建节点

• 创建标签：document.createElement(标签名);
• 创建文本：document.createTextNode(文本);

2、追加节点

• 父元素.appendChild(子元素);

  子元素添加到父元素中，放到最后

3、插入节点

• 父元素.insertBefore(要插入的节点, 参考的节点);

  要插入的节点放在参考元素的前面

4、删除节点

• 父元素.removeChild(被删除的元素)

  返回被删除的元素

5、替换节点

• 父元素.replaceChild(新的节点，被替换的节点);

6、克隆节点

• 被克隆的元素.cloneNode(布尔);

  返回克隆出来的新节点，如果参数为true，则克隆子孙节点，如果为false，则只克隆当前这个标签