认识DOM、class的封装、获取属性、获取节点

认识DOM

文档对象模型（document object model），由W3C提出的标准，是一个使用脚本动态的访问和更新文档的内容、结构以及样式；

DOM提供了响应的API（接口） ，可以对文档进行增删改查，以实现js对网页元素JS对网页元素的静态（进行）控制，实现动态网页的功能

HTML节点树

DOM的原理是将文档装入内容，并以节点的形式解析为一颗节点树

HTML 文档就是一种树状的结构化文档

节点类型

元素节点：指标签 如：p div h1~h6 a b

属性节点：指标签上的属性 如： class id

文本节点：指标签之间的文本内容 如：

文本节点

获取节点的辅助方法

childNodes：返回该节点下所有子节点列表（包含空白符）集合【数组结构】

语法：父节点.childNodes

.hasChildNodes(); – 判断是否有子节点，布尔类型

语法：父元素.hasChildNodes();

firstChild – 返回第一个子节点

语法：父元素.firstChild

lastChild – 返回最后一个子节点

语法：父元素.lastChild

.previousSibling --返回上一个兄弟节点

语法：父元素.previousSibling

.nextSibling --返回下一个兄弟节点

语法：父元素.nextSibling

着重说一下下面两个

parentNode – 更加靠谱一些，因为父节点只有一个，就像你不可能有两个亲生父亲一样

语法：子节点.parentNode --返回父节点

children – 返回所以子节点（靠谱，不包含空白符）不会像上面childNodes一样包含空白符

语法：父元素.children

节点属性

节点名字：nodeName

元素节点的nodeName与标签名字一样

属性节点的nodeName与属性名一样

文本节点的nodeName固定值为 #text

节点值：nodeValue

元素节点的nodeValue为Undefined或者null

属性节点的nodeValue为属性值

文本节点的nodeValue为文本内容

节点类型：nodeType

元素节点的nodeType为1

属性节点的nodeType为2

文本节点的nodeType为3

获取DOM节点的方法

document.getElementById(nameId) – 通过ID名称获取【获取一个标签】

作用：通过id名称查找元素，返回的是元素DOM，就算页面上有多个相同的id名，也只会返回第一个元素，不会返回多个【ID原则上命名不能重，只能有一个】

例： document.getElementById(‘h1Name’)

let h1 = document.getElementById('h1Name')
console.log(h1);

结果：

document.getElementsByClassName(‘className’) – 通过class名称获取【获取一个标签集合，数组结构】

作用：通过class名称查找元素节点，返回的是一个数组形式的元素DOM，从上到下查找名为同一个class名称的元素，组成一个数组返回【class名称是可以重复的，毕竟很多地方用到的样式是能一样的】

例： document.getElementsByClassName(‘hName’)

let hArr = document.getElementsByClassName('hName');
console.log(hArr);

结果：

document.getElementsByTagName(tagname) – 通过标签名获取【获取一个标签的集合，数组结构】

作用：通过标签名称获取标签节点，返回一个数组形式的DOM，比如查找<a>标签的，会把整个文档中<a>标签以数组的形式返回

例：document.getElementsByTagName(‘a’)

let tagArr = document.getElementsByTagName('a');
console.log(tagArr)

结果：

document .getElementsByName(name) – 通过name获取【获取一个集合】

作用：通过name属性去获取标签集合，返回一个数组形式的DOM，比如查找标签，全都命名为bName，就会把所有name为bName的标签获取出来

例：document.getElementsByName(‘bName’)

let nameArr = document.getElementsByName('bName');
console.log(nameArr);

结果：

其他方法

1、获取HTML标签（所有浏览器都支持） – document.documentElement

2、获取body标签 – document.body

3、通过form的name获取表单

console.log(document.loginForm.username);
语法：document.表单名字
document.表单名字.表单元素名

强大的 query【无法获取动态添加的 dom 节点】

1、document.querySelector(css选择器); --返回找到的第一个元素

2、document.querySelector(’#nav’);

3、document.querySelector(‘li’);

4、document.querySelectorAll(css选择器) --返回找到的所有元素

获取属性

1 元素.attributes – 获取元素属性集合

console.log(attributes);

console.log(attributes[0]);

2 元素.属性名 – 【因为class是关键字，所以要写上className;用于获取元素】

console.log(baidu.className);

3 元素.getAttribute(属性名) — 【用于获取某一个属性】

console.log(baidu.getAttribute(‘href’));

[如果是class就不需要再用className了，因为’'封装了不会起冲突]

console.log(baidu.getAttribute(‘class’));

设置属性：

1 元素.属性名 = ‘属性值’;

baidu.style.color = ‘red’;

2 元素.setAttribute(属性名,属性值);

baidu.setAttribute(‘title’,‘您点击之后不会发生改变’);

移除属性

元素.removeAttribute(属性名);

判断是否有某一个属性

元素.hasAttribute(属性名) --返回值是一个布尔值

HTML5 自定义属性操作

1 element.dataset.自定义属性名（如：data-index）

1 element.getAttribute(‘data-index’);

JS动态创建标签

1 document.createElement(您需要创建的标签名字);

document.createTextNode(‘动态创建文本内容’);

2 li.appendChild(text); //将文本放入标签

3 demo.appendChild(li); //将子标签添加进父节点中

【父节点.appendChild(子节点);】 --将子节点添加到父节点的最后

删除子节点

1 父节点.removeChild(子节点); --代表移除子节点

操作CSS样式

1 元素.style.css属性名 = css属性值;【大多数都要加’'因为是值】

demo.style.height = '50px';
demo.style.border = '2px solid red';

注意：【如果css单词是通过链接的单词，则需要写成驼峰式命名】

如：demo.style.borderBottom = ‘2px solid red’;【因为float是js中的保留字，所以要写为cssFloat】

如: demo.style.cssFloat = ‘right’;

cssText【可以帮助我么批量的设置CSS样式】

demo.style.cssText += 'width: 400px;height: 50px;';

添加 classname (推荐使用)

提前在css中写好class，接下来动态添加class，比如：

demo.className = 'demo box';
demo.className = 'demo box';

节点的创建、插入、替换和克隆

1 创建标签节点

document.createElement(‘标签名’);

2 创建文本节点

document.createTextNode(“文本内容”）

3 节点的增加

父元素.appendChild(子节点); --将子节点添加到父元素的最后

4 在某元素之前插入新元素

父元素.insertBefore(新节点，旧节点);