自定义属性，innerHTML,outerHTML,dom节点的获取，className,tagName,更改或者是获取css属性

01.自定义属性

1.自定义属性：

作用：保存数据 通用的自定义属性的前缀 data-属性="属性值"

注：自定义的属性不能通过 元素.属性 取属性值 ,需使用getAttribute();

2.自定义属性的获取

元素.getAttribute('data-url');

3.设置

节点.setAttribute('属性名称','修改后的属性值')； (修改后的属性值是一个变量的时候，不加引号)

4.删除

元素.removeAttribute('data-url');

简单测试：
<img src="./images/1.jpg" alt="" data-url="./images/a.jpg">
//获取自定义属性：
var oImg = document.querySelector('img');
console.log(oImg.getAttribute('data-url'));
//设置自定义属性
var oImg = document.querySelector('img');
oImg.setAttribute('data','ddddd');
//删除
var oImg = document.querySelector('img');
oImg.removeAttribute('data-url');

02.自定义属性案例

鼠标滑过，切换图片

<style>
    *{
        margin:0;
        paddin:0;
    }
    .showImg{
        300px;
        height:300px;
        border:1px solid red;
    }
    .showImg img{
        display:block;
        100%;
        height:100%;
    }
    .btnImg{
        300px;
        height:60px;
        border:1px solid red;
    }
    .btnImg img{
        60px;
        height:60px;
        display:block;
        float:left;
        cursor:pointer;
    }
</style>
<section class="showImg">
    <img src="./images/rose1.jpg" alt="">
</section>
<div class="btnImg">
    <img src="./images/rose1.jpg" alt="">
    <img src="./images/rose2.jpg" alt="">
    <img src="./images/rose3.jpg" alt="">
    <img src="./images/rose4.jpg" alt="">
    <img src="./images/rose5.jpg" alt="">
</div>
<script>
    //鼠标滑过事件  onmouseover
    //如果获取的是一个节点集合，并且给每一个元素绑定事件，需要遍历
    var aImg = document.querySelector('.showImg img');
    var bigImg = document.querySelectorAll('btnImg img');//获取到的是一个节点的集合
    for(var i = 0 ; i < bigImg.length ; i++){ //循环遍历，给每一个img绑定鼠标滑过事件
        //循环遍历，绑定事件（重点）
        bigImg[i].onmouseover = function(){
            //鼠标滑过每一个img的时候，获取它的src的值，直接更改大图的src
            aImg.src = this.src; //上面显示的图片的src就是在遍历时，获取的当前图片的src
            var src = this.getAttribute('src');  //获取当前图片的src
            aImg.setAttribute('src',src); //将设置显示区，显示当前图片的src
        }
    }
</script>

03.innerHTML，outerHTML

<section>
    section中的文本
    <div>
        div中的文本
    </div>
</section>
<script>
    var oS = document.querySelector('section');
    console.log(oS); //section里面的文本和div都获取到了
​
    var oS = document.querySelector('section');
    console.log(os.innerHTML);  //innerHTML除了可以设置，还可以获取，获取到的是section里面所有内容（包括标签）
    console.log(os.innerText);  //只获取section里面的所有文本
    console.log(os.outerHTML); //outerHTML ，获取到的是section和它里面的内容
    console.log(os.outerText); //和innerText一样，获取到所有文本内容
</script>

04.自定义属性案例（换肤）

css/style1.css,css/style2.css/...css/style5.css:
body{
    background:url(../images/rose1.jpg) no-repeat;
    background-size:100% 100%;
}//同理，将5个图片作为背景图切换
<link rel="stylesheet" href="./css/style1.css">
<style>
    *{
    margin:0;
    padding:0;
}
    html,body{
        100%;
        height:100%;
    }
</style>
<script>
    <button>换肤</button>
    <script src="../myApi.js"></script>
    <script>
        //获取元素button
        var oBtn = document.querySelector('button');
        //获取换肤的每一个样式
        var oLink = document.querySelector('link');
        //给按钮绑定单击事件
        oBtn.onclick = function(){
            //随机换肤
            var num = randomNum(1,5);
            //使用字符串拼接，拼成修改的样式的路径
            var url = './css/style'+ num + '.css';
            //setAttribute设置切换的link的href，通过更改href，来完成换肤的效果
            oLink.setAttribute('href',url);
        }
    </script>
</script>

05.dom节点的获取

<section>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</section>
<img src="./images/rose1.jpg" alt="dkf" title="dfs">
<script>
    var os = document.querySelector('section');
    var adiv = os.querySelectorAll('div');
    console.log(os.firstChild); //获取第一个节点(元素节点，文本节点)
    console.log(os.lastChild); //获取最后一个界定啊(元素节点，文本节点)
    console.log(os.firstElementChild); //获取第一个元素节点（包括文本节点）。<div>1</div>
    console.log(os.lastElementChild); //获取最后一个元素（不包括文本节点）<div>4<div>
​
    console.log(adiv[1].previousSibling);//获取已知节点的相邻的上一个节点（可以获取到文本节点）
    console.log(adiv[1].previousElementSibling); //获取相邻的上一个元素节点<div></div>
    
    console.log(adiv[i].nextSibling); //获取已知节点的相邻的下一个节点（可以获取文本节点）
    console.log(adiv[i].nextElementSibling);//获取已知节点的下一个元素节点
​
    //替换节点 replaceChild(newNode,oldNode);
    var createP = document.createElement('p');
    createP.innerHTML = '新增加的';
    os.replaceChild(createP,adiv[3]); //把第4个div替换成p
​
    //ownerDocument 获取该节点的文档根节点 （相当于document）
    console.log(os.ownerDocument);  //获取section节点的文档根节点，结果为document
​
    //attributes 它是一个属性，获取当前元素节点的所有属性节点集合
    var oImg = document.querySelector('img');
    console.log(oImg.attributes); //获取到的是一个集合 NamedNodeMap {0: src, 1: alt, 2: title, src: src, alt: alt, title: title, length: 3}
    console.log(oImg.attributes[0]); //获取这个集合下的第一个属性  src="./images/rose1.jpg"
    console.log(oImg.attributes[0].nodeValue); //获取属性里面的值 ./images/rose1.jpg
    console.log(oImg.attributes['src']);//返回属性为src的节点
</script>

06.商品的加减

<style>
    #price,h3{
        font-size:30px;
        font-weight:900px;
        color:red;
    }
</style>
<h2>商品的单价：</h2>
<h3>1000</h3>
<div>
    <button class="minus">-</button>
    <input type="text" name="" id="" value="0">
    <button class="add">+</button>
</div>
<h2>总额：<span id="price">0</span></h2>
<script>
    var
        oMinus = document.querySelector('.minus'),
        oAdd = document.querySelector('.add'),
        oPrice = document.querySelector('#price');
        money = document.querySelector('h3').innerHTML; //获取h3的内容
    //加
    oAdd.onclick = function(){
        oAdd.previousElementSibling.value++;//点击+，改变上一个节点，input的值，每次点击+,值++
        oPrice.innerHTML = money * oAdd.previousElementSibling.value;
    }
    //减
    oMinus.onclick = function(){
        oMinus.nextElementSilbing.value--;//点击-，改变下一个节点，input的值，每次点击-，值--
        if(oMinus.nextElementSilbing.value <= 0){//当减到0时，再不允许--，将input的值保持为0
            oMinus.nextElementSibling.value = 0;    
        }
        oPrice.innerHTML = money * oMinus.nextElementSibling.value;
    }
</script>

07.className,tagName

1.获取行间样式

节点.className 获取/设置 类名

节点.tagName 获取标签名 都是大写的

2.js动态获取更改 某个元素的html属性

元素.属性 设置/获取

自定义属性: getAttribute(获取) setAttribute(设置)

<style>
    .box{
        300px;
        height:300px;
        background:red;
    }
    .wrap{
        border:10px solid orange;
    }
</style>
<div class = "box" title="ddd" style="border:30px solid blue;"></div>
<div title="ddd"></div>
<script>
    var oBox = document.querySelector('.box');
    console.log(oBox.className); //box
    console.log(oBox.tagName);  //DIV
​
    var oBox = document.querySelector('div');
    //没有类名的时候，动态添加类名
    oBox.className = 'box';
    //要想把.wrap的样式添加给box
    //oBox.className = 'wrap'; //把样式重置了
    oBox.className = ' wrap'; //要加上空格，不然就贴在一起了
​
    //根据类名,动态添加样式
    console.log(oBox.style);
</script>

08.更改或者是获取css属性（获取非行间样式)

1.设置css样式

节点.style.css属性 = ’属性值‘

节点.style.cssText = '300px;height:300px;background:red;'

2.获取非行间样式

getComputedStyle(元素,null)[attr] 存在兼容（window下的方法）

元素.currentStryle[attr] IE

封装获取非行间样式的方法：

function getStyle(ele,attr){
    /*
        判断浏览器支持哪个方法
        //方法一：
        if(ele.currentStyle){
            return ele.currentStyle[attr];
        }else{
            return getComputedStyle(ele,null)[attr];
        }
        //方法二：
        return ele.currentStyle ? ele.currentStyle[attr] : getComputedStyle(ele,null)[attr];
    */
    return ele.currentStyle ? ele.currentStyle[attr] : getComputedStyle(ele,null)[attr];
}
console.log(getStyle(div,'width')); //300px
console.log(getStyle(div,'height'));  //300px

09.js改变轮播图圆点样式

<style>
    *{
        margin:0;
        padding:0;
    }
    section{
        500px;
        height:30px;
        margin:0 auto;
    }
    div{
        30px;
        height:30px;
        margin:0 10px;
        border-radius:50%;
        background:orange;
        float:left;
    }
    .active{
        background:blue;
    }
</style>
<section>
    <div class="active"></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</section>
<script>
    //获取所有的div
    var aDiv = document.querySelectorAll('section div');
    //给每一个div绑定鼠标滑过的事件（循环遍历）
    for(var i = 0 ; i < aDiv.length ;i++){
        aDiv[i].onmouseover = function(){
            //每当鼠标滑过的时候，先把所有的div的active都取消
            for(var j = 0 ; j < aDiv.length ; j++){
                aDiv[j].className = '';
            }
            //鼠标滑过，改变它的样式，给它添加类名（使用className可以设置类名）
            this.className = 'active';
        }
    }
</script>

10.点击元素获取当前元素的下标

<style>
    div{
        100px;
        height:100px;
        background:orange;
    }
</style>
<section>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</section>
<script>
    var aDiv = document.querySelectorAll('section div');
    //绑定单击事件
    for(var i = 0 ; i < aDiv.length ; i++){
        /*
            aDiv[i].onclick = function(){
                console.log(i);  //5 泄露
            }
            循环：变量的泄露！！！  在循环里面，循环变量不会保存在循环的代码里面
        */
        //为每一个div添加一个属性，把i保存在属性里面
        aDiv[i].index = i;
        aDiv[i].onclick = function(){
            //打印下标
            console.log(this.index);
        }
    }
</script>