JS初步学习2之DOM元素

约定不等于承诺〃 2022-04-02 12:55 201阅读 0赞

JS可以写在HTML内部，也可以写在JavaScript里面采用外联的方式。写在HTML里面的JS可以写在head也可以写在body里。

## 逻辑结构 ##

1.if else

if（）{}
    
    
    if（）{}
       else{}
     
    
    if（）{}
       else if（）{}
               else{}

2.swith选择结构

swith（）{
            case：break；
            default：break；
    }

##  dom元素 ##

DOM元素全称即document object model(文本对象模型)。浏览器里面有Window对象，Window对象里面又有1.history对象2.location对象（指导航栏里面的对象元素）3.document（指所有元素即HTML对象）

### DOM的基本元素的获取 ###

在获取元素的时候要注意获取元素是否初始化，JS里面不能进行隐式迭代（即不能同时操作一堆）

获取元素的几种常用方法：

getElementsByClassName  获取出来的元素对象是集合类型，也可以是数组类型，class可以绑定多个元素；

innerHTML   表示元素的HTML内容；

getElementById  获取的是唯一元素；

getElementsByName 通过name名称来获取元素，也是集合类型；

getElementsByTagName  获取的是元素的名称集合。

### DOM元素的事件 ###

是一个被动行为，JS里面的事件可以分为：键盘事件、鼠标事件、窗口事件、移动端事件（触屏）。

JS里面事件前面都带on。

1.键盘事件：keydown、keyup、keypress

2.鼠标事件：mousedown、mouseup、click、doubleclick、mousemove、mouseenter、mouseleave（水平面离开）/mouseout（垂直离开）、mouseover(鼠标悬停)

3.窗口事件：load、fouse、blur。

### 元素事件的基本绑定方式： ###

1.在元素的行内之间绑定事件

2.在脚本区域直接动态绑定事件

3.事件的监听或者添加事件的句柄（在add Eventlistener添加事件的句柄之后，需要事件的移除，就得将在addEventlistener里面的内部匿名函数修改为外部函数）

## 事件冒泡 ##

子元素在执行事件的时候父元素也同时执行了此事件

阻止事件冒泡的方式：

return false;

event.stopPropagation();主治时间冒泡，但不能阻止事件的默认行为

event.PreventDefault;阻止事件的默认行为

### 事件的委托 ###

是为了优化代码的性能，减少虚拟内存。

是将子元素的事件委托给父元素来执行

<body>
    <div class="block">
        <ul id="menu">
            <li>咖啡</li>
            <li>茶</li>
            <li>饮料</li>
            <li>热水</li>
        </ul>
    </div>
    <script>
        var menu_per=document.getElementById("menu");
        menu_per.onclick=function(){
            var ulper=event.target||event.srcElement; //事件委托
            if(ulper.nodeName.toLocaleLowerCase()=="li"){
                ulper.style.backgroundColor="silver";
            }
    
        }
    </script>
    </body>