Js中的DOM操作

Document Object Model 文档对象模型

可以通过JS操纵web网页，可以将页面所有东西转化为对象，以面向对象的方法操作。

节点Node 是构成HTML最基本的单元。

文档节点：整个HTML 文档 代表整个网页

元素节点HTML文档中的标签

属性节点 HTML中的文本内容

onload 文档加载

document 对象来加载

读取节点属性 元素.属性名

DOM选择器

document.getElementById("Id名 ") 返回一个元素

document.getElementsByClassName(" 类名") 返回所有的元素并封装为类数组

document.getElementByTagName("标签名") 返回一个类数组。（集合）

document.querySelector("css选择器") 返回第一个适配元素

document.querySelectorAll("CSS选择器") 返回所有元素并封装为类数组

//类数组不能直接套用数组的方法，要通过遍历获取到元素或者使用索引获取对象再进行操作

遍历DOM树操作节点

.children来获取该父节点的所有子节点，.firstchild和.lastchild分别获取第一个和后一个子节点, 获取子节点，返回数组

.parentnode 获取当前节点的父节点

.nextElementSibling 会获取调用节点的下方紧邻兄弟节点

.previousElementSibling 会获取调用节点的上方紧邻兄弟节点

document.createElement('想要创建的元素') 创建元素

document.append（元素或加上引号引上文本 ） 追加子节点或者文本

.addEventListener（事件名，事件监听） 为DOM元素添加事件 ,事件名是交互的选项如单击响应click，事件监听是一个回调函数，介绍的是触发条件。

对象.事件=函数型绑定响应函数 不能绑定多个。与上面添加事件监听作用相同。

向文档写入内容

//这两个元素都是可以读写的，他们也可以获取到元素内书写的东西。会覆盖原有内容。

.innerText 可以在元素内写入内容文本，不会识别换行的空格。（不标准）

.innerHTML 可以在元素内写入内容，可以识别空格，回车还有HTML的标签。（标准）

document.write( ) 在页面加载完成时，它将覆盖所有内容，不建议使用。可以写如标签和JS脚本代码。他的位置与引入js脚本的位置有关。

操作元素

1.元素.属性名=“新的属性值” 改变属性

可以改变选择器名要更改class名时要用，classname在第二个方法中用class.

2.元素.setAttribute('要更改的属性','更改的属性值')

方式1：document.getElementById(id).属性名=新属性值

方式2：document.getElementById(id).setAttribute(属性名，属性值);

改变CSS样式

元素.style.样式名=样式值 样式名中含减号的不合法，去掉减号然后将减号后的字母变成大写，即驼峰命名法。