dom常用属性和节点操作

1. css操作

1. 通过元素的 style 属性，只能获取元素写在行间的样式，通过 元素的style 属性设置的杨hi也是行间样式

2. 通过 getComputedStyle( 元素对象 , null )，可以获取元素的非行间样式

该方法的第一个参数是要 获取样式的元素对象，第二个参数一般写成 null，它的含义是伪类或者伪元素

一旦有第二个参数，则表示获取的是 伪类或者伪元素 的css样式

在ie中，可以使用 currentStyle 来获取元素的样式，例如 wp. currentStyle[ 'width' ]

//获取 wp 对象的所有样式
let obj = getComputedStyle(wp,null);
console.log(obj.width,obj.height);  //wp 对象的宽高

let obj2 = getComputedStyle(wp,':hover');
console.log(obj2.background);

每点击一次宽度增加5px

// 每点击一次宽度增加 5px
let btn = document.getElementById('btn');
btn.onclick = function(){
    let w = getComputedStyle(wp).width;
    wp.style.width = parseInt(w)+5+'px';
}

---

2.dom常用属性

父子关系的常用属性

childNodes 获取所有的子节点

children 获取所有的子元素( dom元素 )

firstChild 获取元素的第一个子节点，相当于 childNodes[0]

firstElementChild 获取元素的第一个子元素，相当于 children[0]

标准浏览器和ie高版本会把回车（换行）当作文本节点，ie低版本(8及其以下)不会，也就是ie 6 7 8不支持

lastChild 获取元素最后一个子节点

lastElementChild 获取元素最后一个子元素

let list = document.querySelector('#list');
//把第一个li的颜色设置为红色
list.firstElementChild.style.color = '#f00';
//控制台输出list的最后一个子节点和子元素
console.log(list.lastChild,list.lastElementChild);

parentNode 和 parentElement  都是查找元素的父元素

一般 parentNode 兼容性更好，因此更常用

let li = document.querySelector(#list>li:nth-child(4));
li.style = `
    font-size: 40px;
    color: #f00;
`;
//查找父节点
console.log(li.parentNode,li.parentElement);

---

兄弟关系的常用属性

nextSibling 获取当前元素的下一个兄弟节点

nextElementSibling 获取当前元素的下一个兄弟元素(ie 6 7 8不支持)

previousSibling 获取当前元素的上一个兄弟节点

previousElementSibling 获取当前元素的上一个兄弟元素(ie 6 7 8不支持)

<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    饸饹条

    <!-- 固始鹅块 -->

    <!-- 裹凉皮 -->
    壮馍
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
 </ul>

let li = document.querySelector('#list>li:nth-child(6)');
li.style.fontSize = '40px';
console.log(li.nextSiling,li.nextElementSiling);

//给当前元素的下一个元素，添加样式
li.nextElementSibling.style.color = '#f00';
console.log(li.previousSibling,li.previousElementSibling);

//获取当前元素的上一个节点 和 上一个元素
 li.previousElementSibling.style.color = '#04be02';

封装一个通用方法，使得在低版本ie中，也可以直接获取下一个dom元素

//传入当前元素的对象，返回下一个元素对象
function getEle(domObj){
    //如果不存在参数
    if(!domObj){
        console.log('输出',ele.nodeType);
        ele = ele.nextSiling;
        //如果没有下一个元素
        //if(ele == null){
            return null;
        //}
    }
    return ele;
}
console.log(getEle(li));

let li10 = document.querySelector('#list>li:nth-child(10)');
console.log(getEle(li10));

---

3.dom节点操作

innerHTML 的两个弊端

1. 会引起页面底层的重新渲染，每一次重新渲染都会重新刷新元素中的内容。在刷新之后，元素不再是原来的那个元素，那么此元素绑定的所有实现都不会生效

2. 正是因为 innerHTML 会引起页面底层的重新渲染，这样比较耗时，性能比较低

<div class="wp">
    <h1>周公旦</h1>
    <button id="btn">点击封神</button>
</div>

let btn = document.querySelector('#btn');  //button
let wp = document.querySelector('.wp');  //div
//绑定点击事件
btn.onclick = function(){
    alert('点击封神！！！');
}
//innerHTML引起底层页面重新渲染，点击效果不能生效了
wp.innerHTML += '<p>但得妖娆能举动,娶回长乐侍君王</p>';

创建和添加元素

createElement(标签名)

使用dom方法创建一个元素，创建之后的元素可以使用任何元素具有的方法

父元素.appendChild(子元素)

把指定那个的子元素添加到父元素的最后

<div class="wp2">
    <h1>周公吐哺</h1>
    <button id="btn1">天下归心</button>
</div>

let btn1 = document.querySelector('#btn1');
let wp1 = document.querySelector('.wp1');
//绑定点击事件
btn1.onclick = function(){
    alert('李子');
}
//创建一个p标签
let p = document.createElement('p');
p.innerHTML = '梦到找厕所';
//把创建的标签，添加到父元素中
wp1.appendChild(p);

注意：

如果需要使用 innerHTML，尽量在for循环外部使用，尽可能的不要在for循环内部使用 innerHTML

如果元素内部有时间操作，则可以使用 createElement 创建元素，如果展示信息，则可以使用 innerHTML

<ul id="list"></ul>
<button id="start">点击开始</button>

let start = document.querySelector('#start');
let list = document.querySelector('#list');
//绑定点击事件
start.onclick = function(){
    //计时
    console.time('计时');
    let html = '';  //1
    for(let i=0;i<100;i++){
        // list.innerHTML += '<li>功名夏侯尚州</li>';  //2

        //let li = document.createElement('li');  //3
        //li.innerHTML = '功名夏侯尚州';  //3
        //list.appendChild(li);  //3

        html += '<li>功名夏侯尚州</li>';  //1
    }
    list.innerHTML = html;  //1
    console.timeEnd('计时');
}

 父元素.insertBefore(要添加的元素，父元素中的指定子元素)

把要添加的元素(参数1)，添加到 父元素中的指定子元素(参数2) 之前

注意：

使用该方法，一定要使用两个参数，如果第二个参数不存在或者不合法，则 会把元素添加到 父元素的末尾，类似 appenChild()

let n = 0;
add.onclick = function(){
    n++;
    let huang = document.querySelector('#list>li:nth-child(2)');
    //创建节点
    let li = document.createElement('li');
    li.innerHTML = '李子'+n;
    
    //在元素 huang 前面插入 元素 li
    list.insertBefore(li,huang);
}

删除元素

父级.removeChild(要删除的子元素)

参数必须是一个元素对象，否则报错

 删除元素之前，必须先找到元素

返回值是 删除的对象

let del = document.querySelector('#del');
//点击删除
del.onclick = function(){
    //获取要删除的元素
    let first = document.querySelector('#list>li:nth-child(1)');
    if(confirm('你确定要删除吗？')){
        //删除元素
        list.removeChild(first);
        alert('删除成功');
    }
}

confirm(对话内容)

他是一个对话框，如果用户点击确定，就返回true，否则返回false

因此常在 if 语句中使用，来判断用户的某项操作

替换元素

被替换元素的父级元素.replaceChild(替换的元素，被替换的元素)；

返回值是 被替换的元素对象

function aa(ele){
    return document.querySelector(ele);
}
aa('#btn').onclick = function(){
    let h2 = document.createElement('h2');
    h2.innerText = '多少楼台烟雨中';
    //替换元素
    aa('.wp').replaceChild(h2,aa('.h1'));
}

克隆元素

被克隆的元素对象.cloneNode();

参数 默认是 false

false：不复制子级中的 dom结构和节点

true：深层拷贝，被克隆对象的子级 dom结构 和 节点 都会被复制

该方法的返回值是 复制的元素对象

复制的是元素节点的结构，不会复制该节点上的事件

aa('.btn1').onclick = function(){
    alert('朝如青丝暮成雪');
 }

aa('#copy').onclick = function(){
    //拷贝 wp1
    let ele = aa('.wp1').cloneNode(true);
    //获取body
    let body = document.body;
    //把复制的结果存入body里面
    body.appendChild(ele);
}