DOM操作

 

在JS中，所有的事物都是节点，元素、文本等都是节点。

应用场景：可以通过节点进行DOM对象的增删改查

1.获取DOM节点的方法

//通过id获取，唯一的
var oDiv = document.getElementById('box');
//通过类名获取
var oDiv = document.getElementsByClassName('.box')[0];
//通过标签名获取
var oDiv = document.getElementsByTagName('div')[0];

2.常用的DOM节点

语法	含义
childNodes	获取所有的子节点，除了元素还有文本等
children	获取所有元素子节点，不包含文本
parentNode	获取父节点
previousSibling	获取上一个兄弟节点，包含文本
previousElementSibling	获取上一个兄弟元素节点，不包含文本
nextSibling	获取下一个兄弟节点，包含文本
nextElementSibling	获取下一个兄弟元素节点，不包含文本
firstChild	获取第一个子节点，包含文本
firstElementChild	获取第一个子节点，不包含文本
lastChild	获取最后一个子节点，包含文本
lastElementChild	获取父元素最后一个元素节点。不包含文本

3.节点的增删改查

<div>
    <h3>路飞学城</h3>
</div>
<div id="box">
    <p>alex</p>

    <p>wusir</p>
    <p>xiaomage</p>
    <p>egon</p> 
    <a>luffy</a>             
</div>
<div>
    <h3>路飞学城2</h3>
</div>

// 1.创建元素节点
var oH2 = document.createElement('h2');

// 设置oH2的内容，p标签会被解析成p元素显示到HTML页面中
oH2.innerHTML = '<p>嘿 sariy</p>';

// 只设置元素内的文本内容，div标签将被当做文本元素
oH2.innerText = '<div>嘿嘿</div>'

// 2.将创建好的元素节点添加到指定元素所有内容的后面
oDiv.appendChild(oH2);


// 获取元素节点里的所有内容 包括标签和文本
console.log(oDiv.innerHTML);

// 表示元素节点的标签名大写
console.log(oDiv.tagName);

// 只获取元素内的文本内容，html标签将被忽略
console.log(oDiv.innerText);

// 设置元素id
oH2.id = 'luffy';

// 设置类名
oH2.className = 'wusir';
oH2.className = 'wusir2';

//获取标签属性
console.log(oH2.getAttribute('class'));//wusir2

// 设置标签属性
oA.setAttribute('href','https://www.luffycity.com');

// 删除元素上的属性
oA.removeAttribute('href');

// 删除创建的对象
// oDiv.removeChild(oH2);

//如果为true 克隆当前元素与元素的所有子节点
// console.log(oDiv.cloneNode(true));


// 父节点.replaceChild(新节点,子节点) 用新节点替换某个子节点
var op = document.createElement('p');
op.innerText = '我是一个段落';
oDiv.replaceChild(op,oA);

//style属性 ：css内联样式属性值
//一般情况下， css的样式属性中出现“-” 号，则对应的style属性 是：去掉“-”号，把“-”号 后面单词的第一字母大写。 如果没有“-”号，则两者 一样。
//例如:oDiv.css.backgroundColor = 'red';