JavaScript(WebAPI)

目录

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

 

        hello one
    

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

1.2querySelectorAll

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

2.事件初识

2.1三要素

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

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

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

2.2实例

 点击

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

3.操作元素

3.1获取/修改元素内容

// 读操作

var content = element . innerHTML ;

// 写操作

element . innerHTML = htmlString

 

        

            
aaa
        
    
     获取内容
    修改内容
    

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

 

        0
    
    +
    

3.2获取/修改元素属性

获取属性

修改属性

点击,修改图片

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

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

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

通过点击播放和暂停交换

3.3获取/修改样式属性

3.3.1行内样式

element.style.[属性名] = [属性值];

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

文本
    

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);
        }