JS操作属性和样式及JS事件

目录

一、JS操作属性

1.元素内部结构的操作

1.innerHTML

2.innerText

2.元素属性的操作

1.getAttribute

2.setAttribute

3.removeAttribute

二、元素样式的操作——style

三、类属性操作——ClassName

四、JS事件

1.事件三要素

2.绑定事件

1.在DOM元素中直接绑定

 2.在JavaScript中绑定

3.使用监听函数addEventListener() 绑定

3.删除事件

1.直接删除法

2.使用addEventListener绑定事件

4.常用事件

---

一、JS操作属性

1.元素内部结构的操作

1.innerHTML

获取元素内部的HTML结构        element.innerHTML

var a=box.innerHTML;

设置元素内容                            element.innerHTML=“<p>hello</p>”

div1.innerHTML='<span>hello</span>';

2.innerText

获取元素内部的文本（只获取文本内容）                 element.innerText

设置元素内部文本                                                     element.innerText="hello"

2.元素属性的操作

1.getAttribute

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

var a=div.getAttribute('id');

2.setAttribute

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

div.setAttribute('class','adc')//abc是自定义class

3.removeAttribute

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

div.removeAttribute('name');//移除div元素的name属性

二、元素样式的操作——style

专门用来给元素添加CSS样式的，且添加的都是行内样式

var a =document.querySelector("div");// 获取标签
a.style.width='200px'; // 添加样式
a.style.height='200px';
a.style.backgroundColor='red';
a.style.border="3px solid black";

三、类属性操作——ClassName

专门用来添加元素的类名                                        element. className=‘值’

div.className='abc';//添加元素的类名

专门用来获取元素类名称                                        element.className

四、JS事件

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

1.事件三要素

事件一般由一下三部分组成：

        事件源：网页上的元素。如：按钮，输入框等。

        事件类型：为用户或浏览器的行为。如：鼠标点击，选中输入框等。

        事件处理程序：事件发生后定义的程序。如：跳转网页、算数运算等。

2.绑定事件

1.在DOM元素中直接绑定

  <button onclick=“alert(2)">按钮</button>

 2.在JavaScript中绑定

<script>
var btn = document.getElementById('btn')
        btn.onclick=function(){
            alert("我被点击了~~~")
        }
</script>

3.使用监听函数addEventListener() 绑定

<script>
    document.getElementById('btn').addEventListener('click',function(){
            alert(5);
        });
</script>

3.删除事件

1.直接删除法

使用“对象.οnclick=false;”

var btn=document.querySelector('button');
btn.onload=false;

2.使用addEventListener绑定事件

使用removeEventListener删除绑定事件即可

    var btn1=document.getElementById('btn');
    btn1.addEventListener('click',fn)
    function fn(){
        alert('删除事件2');
        btn1.removeEventListener('click',fn)
    }

4.常用事件

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