DOM的使用

文档对象：

document：表示一整个html文档

节点：

文本节点：

1、包括换行 2、标签中的文字部分 3、单标签没有文本节点，也没有子元素

元素节点：(元素对象)

1、标签：每个标签称为一个元素

2、一个标签一个对象

属性节点：

1、标签的属性

Elements：元素对象集合

Element：单个元素对象

HTMLcollection：html元素集合的构造器

NodeList：节点列表构造器，由foreach

在JS中获取html节点：

getElementsByTagName(‘标签名’)：通过标签名获取htmlcollection集合

getElemtsByName('name')：通过name属性获取，Nodelist集合

document.getElementsById('app')：通过id获取，返回元素对象

document.body 获取body

document.documentElement获取html元素

document.getElementsByclassName(''类名)：通过类名获取元素，获取多个，返回类数组

query'Select(‘选择器’)：通过选择器获取遇到的第一个满足条件的元素对象

queryselectorAll(‘选择器’)：获取所有的选择器

元素对象的属性：

获取第一个元素节点：

firstchild

dirstElementchild

获取最后一个元素节点：

lastchild

lastElementchild

获取上一个兄弟元素节点：

previousSibling

previousElementsibling

获取下一个兄弟元素节点：

nextSibling

nextElementSibling

获取子元素节点：

children

childNodes

获取父元素节点：

parentElement 用法出来html元素，其他都一样

parentNode

元素属性的操作：

元素对象的属性：

1、元素上的属性名不一定等于标签上的键值对        元素对象上类名：className 标签上：class

2、对象名.属性值=值        修改或者添加属性

3、修改固有属性value时，标签上的键值对不受影响

4、能取到对象上自定义的键值对

5、表单元素上的值，以对象属性的value为主

标签上的键值对：

1、对象名.setAttribute('key','value') 设置

2、对象名.getAttribute('key')

3、可以取到标签上自定义的键值对

4、不能取到对象上自定义的键值对

5、添加固有属性，会影响元素属性的值

标签固有属性：

自定义属性

        如果设置的自定义属性能让用户看，则用setAttribute设置在标签上，如果不能就用对象名.属性名设置在对象上

文本节点操作：

textcontent：获取元素及后代元素的文本内容，包括空白符

innerText：只保留一个空白符        一般只会获取只有文本的标签的文本

inner HTML：获取元素中所有的html文本内容

CSS操作：

行内：

获取：

1、元素对象.style.属性名   只能获取行内设置的样式

2、获取当前使用的样式：getcomPutedStyle(元素对象)

设置：

1、元素对象.style.属性名='值'，设置的是行内样式

        值可以是：字符串或者纯数字

2、使用动态class设置动态样式(常用)

先把动态的样式用知道他的类名写在样式表[style标签或者css文件]中

动态的修改元素的类名为自定义的类名

dom元素的添加和删除：

1、innerHTML拼接

2、创建元素对象再添加

父元素.append(节点||' ')添加子节点

父元素.appendchild(节点) 添加子节点

父元素.insertAdjacentElement(‘位置’新节点)        在目标节点前添加新的子元素

鼠标元素.insertAdjacentElement('位置'新节点)把新节点

3、删除

当前元素.remove() 删除当前元素

父元素.removechild(子节点)删除父元素中的某个子节点

4、复制节点

节点对象.cloneNode(true)

true：深拷贝，包括文本节点和子元素

false：浅拷贝，只拷贝当前标签，不包括文本节点和子元素

插入目标元素的指定位置：

beforebegin

afterbegin

beforeand

afterend

一个对象一个标签

事件：

事件的绑定方法：

1、行内绑定：this：永远指向window、arguments，执行的函数必须定义在全局

2、在js中绑定

方法1：元素对象.οnclick=函数对象.[函数名.匿名函数，lambda]一个事件只能绑定一个函数

        this：谁触发指向谁

方法2：添加事件监听.一个对象，同一个事件可以绑定多个函数

元素对象.addEventListener('事件名'，函数对象[函数名，匿名函数])

事件冒泡：

子元素触发的事件会向父元素传递

点击事件从里到位执行

事件委托：

原理是冒泡，存在于父子关系

当父元素和子元素绑定同样的函数时，只需要在父元素绑定

当多个子元素都绑定同一个事件同一个函数时，可以把事件委托给父元素，在父元素上绑定

事件的捕获：
从里到位执行函数

通过addEventListener的第三个参数开启，true：捕获  false：冒泡