js----Dom----操作元素方式

操作元素

JavaScript 的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容 、属性等。注意以下都是属性。

（1）改变元素内容

element.innerText

从起始位置到终止位置的内容，但它除去html标签，同时空格和换行也会去掉

element.inneHtml

起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行。

//element.innerText的列子：
<script>
     function coutDown(time){
          var nowTime=Date.now();
          var date=new Date(time);
          var endTime=date.valueOf();
          var duringTime= (nowTime - endTime)/1000;
          var d=parseInt(duringTime/60/60/24);
          var h=parseInt(duringTime/60/60%24);
          var m=parseInt(duringTime/60%60);
          var s=parseInt(duringTime%60);
          console.log(h);
          var h=h < 10 ? '0' + h : h;
          var d=d < 10 ? '0' + d : d;
          var m=m < 10 ? '0' + m : m;
          var s=s < 10 ? '0' + s : s;
          var str='距离结束时间还有：'+d+'天'+h+'小时'+m+'分'+s+'秒';
          return str;

     }
     var str1=coutDown('2021-11-24 00:00:00');
     var button=document.querySelector('button');
     var div=document.querySelector('div');
     // button.οnclick=function(){
     //      div.innerText=str1;
     // }
     div.innerHTML=str1;
     </script>

innerText和innerHtml方式的区别：

1， innerText是不识别html标签

2，innerHtml是可以识别html标签的，一般这个是常用的

相同的地方就是，这两个属性是可读写的 可以获取元素里面的内容

例子：
var p=document.querySelector('p');
console.log(p.innerHTML);//就可以输出p标签里面的内容。

（2）修改元素属性的值

//比如是img中的src属性
var ldh=document.getElementById('ldh');
var img =document.querySelector('img');

ldh.onclick=function(){
    img.src='其他的路径';
}

案例：

（3）表单元素的属性操作

利用Dom可以操作下面标签元素的属性

type、value、checked、selected、disabled

//表单元素的操作
<button>按钮</button>
     <input type="text" value="输入内容">
     <script>
          // 1，获取元素
          var button=document.querySelector('button');
          var input=document.querySelector('input');
          // 2，注册事件 处理事件
            button.onclick=function(){
                 input.value='被点击了';
               //   如果想要某一表单被禁用，不能再点击disabled 我们先要这个按钮 button禁用。
               button.disabled = true; 
               this.disabled = true;  //this是指向函数的调用者。这里是button
            }
     </script> 

（4）样式属性操作

可以通过js修改元素的大小，颜色，位置等样式

1，element.style  行内样式操作
2，element.className 类名样式操作

1，element.style 行内样式操作

注意：

• js里面的演示采取驼峰命名法，比如fontSize…
• js修改style样式操作，产生的是行内操作，css权重比较高。

//行内样式进行操作
<div style="font-size: 12px;">123</div>
     <script>
          var div =document.querySelector('div');
          div.onclick=function(){
               div.style.fontSize='18px';
          }
     </script>
//类名样式操作

2，element.className 类名样式操作

注意：

1，如果样式修改比较多，可以采取操作类名方式更改元素样式

2，class因为是个保留字，因此使用className来操作元素类名属性

3，className 会直接更改元素的类名，会覆盖原先的类名。

如果想要保留原先的类名，使用多类名选择器，将新的类名和以前的类名都放在一起。

案例：

//先声明一个，类以及样式
 .change{
         font-size: 18px;
         color:#ccc;
         background-color: #fff;
    }
在srript中进行设置标签的类名即可：
<div>
     文本
</div>
<script>
     var div=document.querySelector('div');
     div.onclick=function(){
          this.className='change';
         //如果像保留原先的类名，我们可以使用多类名选择器
         this.className='first change';
     }
</script>
/

案例：

//密码框验证信息，当输入密码时，密码的标准不满足我们的要求，就要在后面显示提示的信息。
//案例分析：
//首先判断的时间是表单是去焦点onblur
//如果输入正确则提示正确的信息颜色为绿色小图标变化
//如果输入不是6到16位，那就提示密码错误的字样

<div class="register">
          <input type="password">
          <p class="message">请输入6-16位的密码</p>
     </div>
     <script>
          // 1，获取元素
          var input=document.querySelector('input');
          var msg=document.querySelector('.message');
          // 2,注册事件 失去焦点
          input.onblur=function(){
               if(this.value.length<6||this.value.length>16){
                   msg.className='message wrong';  
                   msg.innerHTML('你输入的位数不对，要求6-16位，请重新输入');
               }else{
                    msg.className='message right';
                    msg.innerHTML='你输入的正确';
               }

              
          }
</script>

（5）排他思想

如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想方法

1，所有元素全部清除样式

2，给当前元素设置样式

3，注意顺序不能颠倒，首先干掉其他人，在设置自己。

案例：

<!-- 排他思想 -->
     <button>选我</button>
     <button>选我</button>
     <button>选我</button>
     <button>选我</button>
     <button>选我</button>
     <script>
          // 1,获取所有按钮元素
          var btns=document.getElementsByTagName('button');
          // var btns=document.querySelectorAll('button');
          // btns这里是一个伪数组 里面的每一个元素 btns[i]
          // 2,首先是排除他人，然后在设置自己的样式 这种排除其他人的思想我们成为排他思想
          for(var i=0;i<btns.length;i++){
               btns[i].onclick=function(){
                    // （1）先把所有的按钮背景颜色都去掉
                    for(var j=0;j<btns.length;j++){
                         btns[j].style.backgroundColor='';
                    }
                    // （2）然后让当前的元素背景颜色改变
                    this.style.backgroundColor='pink';
               }
          }
     </script>

（6）自定义属性的操作

1，获取属性的值

• element.属性 获取属性值
• element.getAttribute(‘属性’)；

区别：

• element.属性 获取内置属性值（元素本身自带的属性），就比如class，id等
• element.getAttribute(‘属性’); 主要获得自定义的属性 ，自己创建的属性

//自定义属性,这里的index就是我们自定义的属性
<div id="demo" index="1"></div>
//获取自定义属性的方式就是用下面的方法
div.getAttribute("index");

2，设置属性的值

• element.属性 = ‘值’ 设置内置属性值。

• element.setAttribute(‘属性’, ‘值’);

  区别：

• element.属性 设置内置属性值

• element.setAttribute(‘属性’); 主要设置自定义的属性

3，移除属性

• element.removeAttribute(‘属性’);

(7)H5自定义属性

• 自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
• 自定义属性获取是通过getAttribute(‘属性’) 获取。
• 但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。

H5给我们新增了自定义属性：

1，设置H5自定义属性

• H5规定自定义属性data-开头做为属性名并且赋值。比如
• 或者使用 JS 设置 element.setAttribute(‘data-index’, 2)

2，获取H5自定义属性

• 兼容性获取 element.getAttribute(‘data-index’);

• 不兼容获取 H5新增element.dataset.index 或者element.dataset[‘index’] ie11之后才开始支持

  dataset是一个集合里面存放了所有以data开头的自定义属性。

注意，当你的自定义属性命名为data-list-name,用dataset方式获取值的时候，要用dataset.listName,驼峰式的命名方式。