JavaScript

一.操作属性

1.元素内部结构的操作

innerHTML
    大以.素内音部的HTML结构
        element.innerHTML
    设置元素内容
        element.innerHTML=“<p>hello</p>”

innerText
    获取元素内部的文本(只获取文本内容)
        element.innerText
    设置元素内部文本
        element.innerText="hello”

2.元素属性的操作

getAttribute
    获取元素的某个属性值(包括自定义属性)
    element.getAttribute('class')

setAttribute
    给元素的设置属性（包括自定义属性)
    element.setAttribute('class', 'box')

removeAttribute
    移除元素属性（包括自定义属性)
    element.removeAttribute( 'class',)

3.元素样式的操作

style
    专门用来给元素添加CSS样式的
    element.style.样式=‘值’
    添加的都是行内样式

4.类属性操作

className
    专门用来添加元素的类名
        element. className=‘值′
    专门用来获取元素类名称
        element.className

二.事件

事件是发生在 HTML 元素上的一些事情。

1.事件三要素

事件源:网页上的元素。如:按钮，输入框等
事件类型:为用户或浏览器的行为。如:鼠标点击，选中输入框等
事件处理程序:事件发生后定义的程序。如:跳转网页、算数运算等。

2.绑定事件

在DOM元素中直接绑定
    <button οnclick="alert(2)">按钮</button>
    违反了HTML与JavaScript代码相分离的原则，一般不用

在JavaScript代码中绑定
    <script>
var btn = document.getElementById('btn')
        btn.οnclick=function(){
            alert("我被点击了~~~")
        }
</script>
    同一元素同一个事件只能定义一个监听函数

使用监听函数addEventListener()绑定
    document.getElementByld('btn').addEventListener('click',function(){
alert(5);
});
</script>
    可以针对同一个元素的同一个事件，添加多个监听处理函数

3.解绑事件

直接删除法，使用“对象.οnclick=false:”
使用addEventListener绑定事件，使用removeEventListener删除绑定事件即可

4.常用事件

onclick
    鼠标单击时触发此事件
ondblclick
    鼠标双击时触发此事件
onmouseover
    鼠标移动到某个设置了此事件的元素上时触发此事件
onmouseout
    鼠标从某个设置了此事件的元素上离开时触发此事件
onfocus
    当某个元素获得焦点时触发此事件
onblur
    当前元素失去焦点时触发此事件
onkeydown
    当键盘上的某个按键被按下时触发此事件
onkeyup
    当键盘上的某个按键被按下后弹起时触发此事件