DOM操作

 目录

     1.获取dom的三种方式

     2.获取文本值的操作

     3.节点对象属性操作

     4.样式操作

     5.DOM操作

 

一. 获取dom的三种方式

  document.getElementById(' ')   通过id获取

  document.getElementsByTagName(' ')   通过标签获取，得到的值数组

  获取数组里面的值课通过索引的方式例如：

var oDiv = document.getElementsByTagName('div')[0];
console.log(oDiv);

  document.getElementsByClass(' ')   通过类获取

  document.querySelector(#id|类)  可以写所有选择器 

  document.querySelectorAll(#id|类)  获取所有

 

二. 获取文本值的操作

innerText  获取当前文本值  

var oDiv=document.querySelectorAll('.box');
for(var i =0;i<oDiv.length; i++) {
    oDiv[i].onclick = function () {
        console.log(this);
        alert(this.innerText)

innerHTML 获取当前的标签和文本

var oDiv=document.querySelectorAll('.box');
for(var i =0;i<oDiv.length; i++) {
    oDiv[i].onclick = function () {
        console.log(this);
        alert(this.innerHTML)

value 只针对于表达控件
var oDiv=document.querySelectorAll('.box');
for(var i =0;i<oDiv.length; i++) {
    oDiv[i].onclick = function () {
        // console.log(this);
        // alert(this.innerHTML)
        this.innerHTML=`<a href="#">hello world1</a>`
的标签和

var input = document.querySelector('input[type=text]');
input.value = '123'

延迟方法设置值
var input = document.querySelector('input[type=text]');
setTimeout(function (){
    input.value='alex'
},3000);

三.对节点对象属性的操作
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        div .active{
            background-color: green;
        }
    </style>
</head>
<body>
<div></div>
<script>
    var oDiv = document.querySelector('div');
    setTimeout(function () {
        // oDiv.id = 'box';   设置属性
       //oDic.setAttribute('id','box') 设置属性
       oDiv.className = 'active';   设置属性
    },3000);
</script>
</body>
</html>


oDic.getAttribute（key） 获取值
oDic.removeAttribute(key) 删除属性

四.样式操作
  把所有的属性都保存在一个属性对象中  style
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>点我</button>
<div class="box">alex</div>
<script>
    var btn = document.querySelector('button');
    var Odiv = document.querySelector('.box');
    btn.onclick = function () {
        Odiv.style.fontSize = '30px';
        Odiv.style.color = 'green';
        Odiv.style.backgroundColor = 'red';
    }
</script>
</body>
</html>

基于setInterval定时器设置动画
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            position: absolute;
            top: 50px;
            left: 0;
        }
    </style>
</head>

<body>
<button>点我</button>
<div class="box">alex</div>
<script>
    var btn = document.querySelector('button');
    var Odiv = document.querySelector('.box');
    var num = 0;
    btn.onclick = function () {
        Odiv.style.fontSize = '30px';
        Odiv.style.color = 'green';
        Odiv.style.backgroundColor = 'red';
        // Odiv.style.left = '20px'
        setInterval(function () {
           num+=2;
           Odiv.style.left = num +  'px';
        },1000)
    };
</script>
</body>

设置清空动画 clearInterval
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            position: absolute;
            top: 50px;
            left: 0;
        }
    </style>
</head>

<body>
<button>点我</button>
<div class="box">alex</div>
<script>
    var btn = document.querySelector('button');
    var Odiv = document.querySelector('.box');
    var num = 0;
    var timer = null;
    btn.onclick = function () {
        Odiv.style.fontSize = '30px';
        Odiv.style.color = 'green';
        Odiv.style.backgroundColor = 'red';
        // Odiv.style.left = '20px'
        timer = setInterval(function () {
           num+=2;
           if (num >=100){
               clearInterval(timer)
           }
           Odiv.style.left = num +  'px';
        },1000)
    };
</script>
</body>
</html>

五. DOM操作

document.createElement(标签) 创建
父元素.appendChild（子）追加
父.removeChild(新的元素.参考元素)删除
insertBefore(子)在某个标签前添加元素

例子：把input输入框的东西展示在网页显示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" placeholder="请输入评论">
<button id="btn">提交</button>
<ul>
</ul>
<script>
    function $(selector) {
        return document.querySelector(selector);
    }
    var oUl = $('ul');
    $('#btn').onclick = function () {
        //获取输入框的值
        var commentVal = $('input').value;
        // 创建新标签
        var li = document.createElement('li');
        li.innerHTML = commentVal;
        // 追加到oUl
        oUl.appendChild(li);
        $('input').value= ' ';
    }
</script>
</body>
</html>

   








            

            
posted @ 
2019-07-11 10:08 
ivy_wang 
阅读(160) 
评论(0) 
编辑 
收藏 
举报