SOURCE

/**获取元素内容**/
//用id 获取元素内容
var text = document.getElementById("text");
console.log(text.innerHTML)
//用选择器获取元素内容
var text1 = document.querySelector(".txt").innerHTML;
console.log(text1)



/**获取输入框内容**/
var input = document.getElementById('content') 
console.log(input.value)//输入框初始值

//动态获取输入框内容 加提交按钮或者输入框失去焦点的方法
function onBlur(){//输入失去焦点时
    console.log('输入结束'+input.value)
}
function onFocus(){//输入得到焦点时
    console.log('正在输入中...')
}



/** 改变元素内容 **/
function click1(){
    if(text.innerHTML == '更改内容'){
        text.innerHTML='用id获取元素内容'
    }else{
        //当前点击的元素内容 text
        text.innerHTML='更改内容'
    }
    console.log(text.innerHTML)
}
/** 改变html标签属性值  **/ 
// 语法  document.getElementById(id).attribute属性 = 新值
var css = document.querySelector('.style');
console.log(css.style.background)
function updateColor(){
    //获取属性值
   var attr =  document.querySelector('.style');
   console.log(attr.style.background)
   if(attr.style.background == 'rgb(252, 96, 96)'){
     attr.style = 'background:#dad8d8';  
     console.log(1)
   }else{
    //改变属性值
    attr.style = 'background:#fc6060';
   }
   
   console.log(attr.style.background)
}

/* 常见的html事件 */


   

<!--直接获取页面元素内容 onclick点击事件-->
<p id="text" onclick="click1()">用id获取元素内容</p>
<p class="txt">用选择器获取元素内容</p>

<!-- 动态获取输入值 onBlur失去焦点事件  onFocu获得焦点事件-->
<input type="text" onBlur="onBlur()" onFocus="onFocus()" name="content" id="content" value="onBlur失去焦点事件  onFocu获得焦点事件">

<!-- 获取标签属性值 动态改变属性值 -->
<h4>获取标签属性值 动态改变属性值</h4>
<div class="style" onclick="updateColor()">
    获取标签属性值 点击事件onclick动态更改属性值
    <h4>点击更改背景颜色</h4>
</div>

.style{
    width: 100px;
    border:1px soild #333333;
    background-color:#dad8d8;
}