自定义属性，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{
        width:300px;
        height:300px;
        border:1px solid red;
   }
 .showImg img{
        display:block;
        width:100%;
        height:100%;
   }
 .btnImg{
        width:300px;
        height:60px;
        border:1px solid red;
   }
 .btnImg img{
        width: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{
        width: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{
        width: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 = 'width: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{
        width:500px;
        height:30px;
        margin:0 auto;
   }
 div{
        width: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{
  width: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>