DOM简单学习

DOM

DOM简介

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML 或者XML）的标准编程接口。

W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。

DOM树

在这里插入图片描述

文档：一个页面就是一个文档（document）
元素：页面中的所有标签都是元素（element）
节点：网页中的所有内容都是节点（node），包括标签、属性、文本、注释等

获取元素

1.通过ID来获取

document.getElementById(‘id’);
返回带有指定 ID 的元素。

2.通过标签名来获取

document.getElementsByTagName(‘标签名’);
返回带有指定标签名的对象集合

3.通过HTML5新增方法获取

document.getElementsByClassName(‘类名’)；// 根据类名返回元素对象集合

document.querySelector(‘选择器’); // 根据指定选择器返回第一个元素对象

document.querySelectorAll(‘选择器’); // 根据指定选择器返回

Ps：querySelector 和 querySelectorAll里面的选择器需要加符号

扫描二维码关注公众号，回复： 9916715 查看本文章

4.获取特殊元素（body，html）

获取body
doucumnet.body

获取html
document.documentElement

操作元素

1.改变元素的内容

element.innerText（非标准）
设置或获取从起始位置到终止位置的内容, 但它去除 html 标签，同时空格和换行也会去掉

element.innerHTML
设置或获取起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行

2.常见的元素属性操作

图片
src、href、titlle、alt

表单
type、value、checked、selected、disabled

3.样式属性操作

行内样式操作
element.style

类名样式操作
element.className

Ps：

如果样式修改的较多，可以采用类名样式操作
class是保留字，所以使用className来代替
className会直接更改元素的类名，会覆盖原先的类名

属性的相关操作

1.获取属性值

获取的是元素本身自带的属性值
element.属性

除了可以获取元素本身自带的属性值，也可以获取自定义的属性值
element.getAttribute(‘属性’);

<div class="test1" test="test2"></div>

var div = document.getElementsByClassName('test1')[0];
console.log(div.getAttribute('test')); //test2

2.设置属性值

设置内置属性值
element.属性 = ‘值’

除了可以设置内置属性值外，还可以设置自定义的属性
element.setAttribute(‘属性’, ‘值’);

<div class="test1"></div>
var div = document.getElementsByClassName('test1')[0];
div.setAttribute('test', 'test1');

3.移除属性

element.removeAttribute(‘属性’);

4.HTML5自定义属性

1.设置H5自定义属性

<div data-test="test"></div>

H5规定自定义属性data-开头做为属性名并且赋值。

2.获取H5自定义属性1

兼容性获取 element.getAttribute(‘data-index’);
H5新增 element.dataset.index 或者 element.dataset[‘index’]

结点

结点概述

基本属性：

nodeType（结点类型）
nodeName （结点名称）
nodeValue（结点值）

常见的结点

元素结点 nodeType为1
属性结点 nodeTyoe为2
文本结点（包括文字、空格、换行等）nodeType为3

结点层级

在这里插入图片描述

利用 DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系

1.父级节点

node.parentNode

返回某节点的父节点，注意是最近的一个父节点，如果指定的节点没有父节点则返回 null

2.子节点

（1）parentNode.childNodes（标准）

返回值里面包含了所有的子节点，包括元素节点，文本节点等

（2）parentNode.children（非标准）

只返回子元素节点，其余节点不返回
虽然是非标准，但所有浏览器都支持

（3）parentNode.firstChild

firstChild 返回第一个子节点，找不到则返回null。同样，也是包含所有的节点

（4）parentNode.lastChild

lastChild 返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点。

（5） parentNode.firstElementChild

返回第一个子元素节点，找不到则返回null

（6)parentNode.lastElementChild

lastElementChild 返回最后一个子元素节点，找不到则返回null

3.兄弟结点

（1）node.nextSibling

返回当前元素的下一个兄弟元素节点，找不到则返回null。同样，也是包含所有的节点。

（2） node.previousSibling

返回当前元素上一个兄弟元素节点，找不到则返回null。同样，也是包含所有的节点。

（3） node.nextElementSibling

返回当前元素下一个兄弟元素节点，找不到则返回null

（4）node.previousElementSibling
返回当前元素上一个兄弟节点，找不到则返回null

结点操作

1.添加结点

（1）node.appendChild(child)

将一个节点添加到指定父节点的子节点列表末尾

（2）node.insertBefore(child, 指定元素)

将一个节点添加到父节点的指定子节点前面

2.删除结点

node.removeChild(child)

返回删除的节点

3.复制结点

node.cloneNode()
返回调用该方法的节点的一个副本
也称为克隆节点/拷贝节点

Ps:

如果括号参数为空或者为 false ，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点
如果括号参数为 true ，则是深度拷贝，会复制节点本身以及里面所有的子节点

三种动态创建元素的区别

document.write()
element.innerHTML
docuement.createElement()

区别：

ocument.write 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘
innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
createElement() 创建多个元素效率稍低一点点，但是结构更清晰

举个栗子：

<p>没点之前</p>s
<button>点我</button>
<script>
  //点击之后页面将会重绘
  var btn = document.querySelector('button');
  btn.onclick = function() {
    document.write('<p>新的页面</p>')
  }    
</script>
``

```js
//拼接字符串
var div = document.querySelector('.test');
var date1 = +new Date();
for(var i = 0; i < 1000; i++) {
  div.innerHTML += '<a>百度<a>'
}
var date2 = +new Date();
console.log(date2 - date1); //1862

//数组形式
var arr = [];
var date3 = +new Date();
for(var i = 0; i < 1000; i++) {
  arr.push('<a>百度<a>')
}
div.innerHTML = arr.join('');
var date4 = +new Date();
console.log(date4 - date3); //4

//createElement()
var date5 = +new Date();
for(var i = 0; i < 1000; i++) {
  var a= document.createElement('a');
  a.innerHTML = '百度';
  div.appendChild(a);
} 
var date6 = +new Date();
console.log(date6 - date5);//6

木子雨吧

发布了61 篇原创文章 · 获赞 15 · 访问量 4085

私信关注

文章目录

DOM