JavaScript(WebAPI)

「爱情、让人受尽委屈。」 2024-03-24 13:27 74阅读 0赞

**目录**

1.获取元素

1.1querySelector

1.2querySelectorAll

2.事件初识

2.1三要素

2.2实例

3.操作元素

3.1获取/修改元素内容

3.2获取/修改元素属性

3.3获取/修改表单元素属性

3.3获取/修改样式属性

3.3.1行内样式

4.操作节点

4.1新增节点

1.创建新节点

2.把结点挂在dom树上

4.2删除节点

--------------------

## 1.获取元素 ##

### 1.1querySelector ###

<div class="one">
            hello one
        </div>
    <script>
        let obj=document.querySelector('.one');
        console.log(obj);
    </script>

如果匹配多个元素,则只返回第一个

### 1.2querySelectorAll ###

与querySelector类似,但是返回的是数组,可以返回多个元素(伪数组)

## 2.事件初识 ##

### 2.1三要素 ###

1.事件源:哪个HTML元素触发

2.事件类型:点击,选中,还是修改

3.事件处理程序:怎么处理

### 2.2实例 ###

<button id="btn">点击</button>
    <script>
        var btn=document.getElementById('btn');
        btn.onclick=function(){
            alert('hello');
        }
    </script>

*  btn 按钮就是事件源.
 *  点击就是事件类型
 *  function 这个匿名函数就是事件处理程序

##  ##

## 3.操作元素 ##

### 3.1获取/修改元素内容 ###

> //  读操作 
> 
> var  content  =  element . innerHTML ; 
> 
> //  写操作 
> 
> element . innerHTML  =  htmlString

<div id="screen">
            <ul>
                <li>aaa</li>
            </ul>
        </div>
        <button id="btn"> 获取内容</button>
        <button id="btn2">修改内容</button>
        <script>
            let btn=document.querySelector('#btn');
            btn.onclick=function(){
                let screen=document.querySelector('#screen');
                console.log(screen.innerHTML);
            }
            let btn2=document.querySelector('#btn2');
            btn2.onclick=function(){
                let screen=document.querySelector('#screen');
                screen.innerHTML='<h1>修改后的内容</h1>';
            }
        </script>

显示整数,按钮,点击按钮,使整数加一

<div id="screen">
            0
        </div>
        <button id="plus">+</button>
        <script>
            let plusBtn=document.querySelector('#plus');
            plusBtn.onclick=function(){
                let screen=document.querySelector('#screen');
                let val=screen.innerHTML;
                val=parseInt(val);
                console.log(typeof(val));
                val+=1;
                screen.innerHTML=val;
            }
        </script>

### 3.2获取/修改元素属性 ###

获取属性

<img src="bird.jpg" alt="这是一只鸟" title="鸟">
        <script>
         var img = document.querySelector('img');
         console.log(img.src)
        </script>

修改属性

点击,修改图片

<img src="bird.jpg" alt="">
         <script>
            let img=document.querySelector('img');
            img.onclick=function(){
                console.log(img.src);
                if(img.src.indexOf('bird.jpg') >=0){
                    img.src='rabbit.jpg';
                }else if(img.src.indexOf('rabbit.jpg')>=0){
                    img.src='bird.jpg';
                }
            }
         </script>

### 3.3获取/修改表单元素属性 ###

表单(主要是指 input 标签)的以下属性都可以通过 DOM 来修改

*  value: input 的值.
 *  disabled: 禁用
 *  checked: 复选框会使用
 *  selected: 下拉框会使用
 *  type: input 的类型(文本, 密码, 按钮, 文件等

通过点击播放和暂停交换

<input type="button" value="播放">
        <script>
            let input=document.querySelector('input');
            input.onclick=function(){
                if(input.value=='播放'){
                    input.value='暂停';
                }else{
                    input.value='播放';
                }
            }
        </script>

### 3.3获取/修改样式属性 ###

#### 3.3.1行内样式 ####

> element.style.\[属性名\] = \[属性值\];
> 
> element.style.cssText = \[属性名+属性值\];

<div style="font-size:20px">文本</div>
        <script>
            let div=document.querySelector('div');
            div.onclick=function(){
                console.log(parseInt(div.style.fontSize));
                let fontSize=parseInt(div.style.fontSize);
                fontSize+=5;
                div.style.fontSize=fontSize+'px';
            }
        </script>

3.3.2类名样式

> element.className = \[CSS 类名\];

##  ##

## 4.操作节点 ##

### 4.1新增节点 ###

#### 1.创建新节点 ####

> var  element  =  document . createElement ( tagName \[,  options \]);

let newDiv=document.createElement('div');
            newDiv.id='newDiv';
            newDiv.className='one';
            newDiv.innerHTML='hello';
            console.log(newDiv);

#### 2.把结点挂在dom树上 ####

element.appendChild(aChild)

let container=document.querySelector('.container');
            container.appendChild(newDiv);

### 4.2删除节点 ###

使用 removeChild 删除子节点

> var  insertedNode  =  parentNode . insertBefore ( newNode ,  referenceNode );

let button=document.querySelector('button');
            button.onclick=function(){
                container.removeChild(newDiv);
            }