前端基础dom核心内容、元素、事件、节点（总结常用的知识点）

dom前言

是一个编程接口，通过dom可改变网页的样式、结构、内容。dom树分支分别为文档（一个页面就是一个文档）、元素（所有html标签）、节点（页面中所有内容）

一、获取元素

1.选择器获取（使用最多）

document.querySelector();

document.querySelectorALL(); //获取全部元素

注意：

• 括号里面的内容都要加双引号‘’
• 看属性是class还是id（class用.   id用#）
• 例子：

盒子
导航

document.querySelector('.box');   //类用.
document.querySelector('#nav');  //id用#

2.获取body、html

document.body                 //返回body对象

document.documentElement   //返回html对象

二、事件

1.概念：

触发后才可以响应动态画面

2.三要素

• 事件源：被触发的对象，要先获取元素
• 注册事件：如何触发，比如鼠标点击经过
• 事件处理程序：通过函数赋值完成

3.代码

//语法
evenTarget.addEventListener(type,函数)


//例子
div.addEventListener('click',function(){
          
          //执行事件发生的代码

})

//事件对象，指事件的信息，例如鼠标位置，键盘信息
//e就是对象，形参

ul.addEventListener('click',function(e){
          
          console.log(this);   //返回的是ul
          console.log(e.target);   //点击哪个返回哪个，可以返回ul，也可以返回li

})

4.事件委托：

1）原理：

给父节点注册事件，省掉给子元素循环注册事件的麻烦

2）代码

ul.addEventListener('click',function(e)
{
        e.target.style.color='red'; //点击哪个，哪个就是红色
})

三、操作元素（改）

1、修改元素内容

• innerHTML(推荐使用这个)

2、修改元素属性

• src、href、title、alt

3.修改表单属性

• value、type
• disabled=true（表示按钮被禁用）

4.修改样式属性

• style.width/backgroundColor (要加style)
• style.display='none';

5.设置自定义属性值

• element.setAttribute('属性','值')

6.h5自定义属性

• 以data-开头为属性并赋值

四、节点（获取元素）

1.使用：

• 页面所有内容都是节点
• 利用节点层级关系获取元素

2.父节点（获取）

• ××.parentNode

3.子节点（获取）

• ××.children
• ××.children[i]   //表示子元素中的第几个

4.创建节点，添加节点（增、删）

//创建节点
var li=document.creatElement('li');
//添加节点
ul.appendchild(li);  //把li添加到ul里面

5.删除节点

//删除ul里面的li
ul.removechild(li);