dom笔记

 1.1什么是DOM

文档对象模型(DocumentObjectModel，简称DOM)，是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口

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

 

1.2DOM 树

●文档:一个页面就是一个文档，DOM中使用document表示

●元素:页面中的所有标签都是元素，DOM中使用element表示

节点:网页中的所有内容都是节点(标签、属性、文本、注释等)，DOM中使用node表示

dom把以上内容都看做对象

 

2.获取元素

2.1如何获取页面元素

●根据ID获取

1.因为我们文档页面从上往下加载， 所以我们script写到标签的下面

 2. 通过驼峰命名法

 3.参数 id

 4.console.dir（）打印我们返回的元素对象

var timer = document.getElementById('time'); console.log(timer);

●根据标签名获取

1.返回的是 获取过来元素对象的集合以伪数组的形式存储

var lis = document.getElementsByTagName('li');

2.获取 父元素 内部 子元素

element.getElementsByTagName('标签名);

●通过HTML5新增的方法获取

1. getElementsByClassName 根据类名获得某些元素集合

2.querySelector 返回指定选择器的第一个元素对象 选择器需要加符号

3.querySelectorAll()

●特殊元素获取

获取body元素

 doucumnet.body // 返回body元素对象

获取html元素

document.documentElement// 返回html元素对象

 

3.事件三要素

点击一个按钮，弹出对话框

事件是有三部分组成：

事件源

事件类型

事件处理程序 我们也称为事件三要素

(1)事件源:事件被触发的对象谁按钮

var btn =document.getElementById('btn'):

(2)事件类型:如何触发 什么事件 比如鼠标点击(onclick)还是鼠标经过 还是键盘按下

(3)事件处理程序:通过一个函数赋值的方式完成

btn.onclick = function() {

alert('点秋香'); 

 

常见的鼠标事件

onclick 鼠标点击左键触发 

onmouseover 鼠标经过触发 

onmouseout 鼠标离开触发 

onfocus 获得鼠标焦点触发 

onblur 失去鼠标焦点触发

onmousemove 鼠标移动触发 

onmouseup 鼠标弹起触发 

onmousedown 鼠标按下触发

 

4.操作元素

4.1 

element.innerText

从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉

element.innerHTML

起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行

 

4.2

 src、href

id alt title

 

4.3 表单元素的属性操作

type、value、checked selected disabled

this用法

4.4样式属性操作

1. element.style 行内样式操作 

2.element.className 类名样式操作：样式修改较多，直接更改元素的类名

 

注意

1.Js 里面的样式采取驼峰命名法 比如 fontsize、 backgroundcolor

2.Js 修改 style 样式操作，产生的是行内样式，css 权重比较高

 

案例：循环精灵图

获取元素 所有的小li

var lis = document.querySelectorAll('li'); for (var i = 0; i < lis.length; i++) {

// 让索引号 乘以 44 就是每个li的背景y坐标index就是我们的y坐标 var index = i * 44;

lis[i].style.backgroundPosition = '0 -’+ index + 'px';

 

4.6自定义属性的操作

4.6.1.获取属性值

element.属性 获取内置属性值(元素本身自带的属性)

element.getAttribute(属性’);主要获得自定义的属性(标准)我们程序员自定义的属性

4.6.2设置属性值

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

element.setAttribute(属性’);主要设置自定义的属性(标准)

4.6.3.移除属性

element.removeAttribute('属性')

 

4.7H5自定义属性

自定义属性目的:是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

通过getAttribute('属性’)获取

4.7.1.设置H5自定义属性

H5规定自定义属性data-开头做为属性名并且赋值。比如 <div data-index= “1”></div>

或者使用JS 设置

element.setAttribute( 'data-index’, 2)

4.7.2. 获取H5自定义属性

1.兼容性获取 elementgetAttribute('data-index’);

2.H5新增element.dataset.index或者element.dataset['index’]ie11才开始支持

如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命

console.log(div.dataset.listName);

 

5.节点操作

5.1为什么学节点操作

获取元素通常使用两种方式:

1.利用 DOM 提供的方法获取元素

document.getElementByld()

document.getElementsByTagName（) document.querySelector等

逻辑性不强、繁琐

2.利用节点层级关系获取元素

 

5.2节点概述

一般地，节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个基本属性。

元素节点nodeType为1

属性节点nodeType为2

文本节点nodeType为3(文本节点包含文字、空格、换行等)

我们在实际开发中，节点操作主要操作的是元素节点

 

5.3 节点层级

5.3.1.父级节点

node.parentNode

返回最近的一个父节点

5.3.2.子节点

5.3.2.1. parentNode.childNodes(标准)

parentNode.childNodes 

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

5.3.2.2parentNode.children

只返回子元素节点

3.parentNode.firstChild

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

4.parentNode.lastChild

5. parentNode.firstElementChild

返回第一个子元素节点

5.3.2.6.parentNode.lastElementChild

 

5.3.3.兄弟节点

1. node.nextsibling

下一个兄弟节点

2.node.previousSibling

3. node.nextElementsibling

下一个兄弟元素节点

4. node.previousElementsibling

 

5.4创建节点

document.createElement('tagName )

document.createElement()方法创建由 tagName 指定的HTML元素

添加节点

1.node.appendchild(child)

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

2.node.insertBefore(child，指 元素)

 

5.5删除节点

node.removeChild(child)

node.removeChild()方法从DoM中删除一个子节点，返回删除的节点

 

5.6复制节点(克隆节点)

node.cloneNode()

1.如果括号参数为空或者为false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。

2.如果括号参数为true，则是深度拷贝

案例：阻止链接跳转需要添加javascriptvoid(0);或者javascript:;

 

5.8三种动态创建元素区别

1.document.write 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘

2.innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘

3.innerHTML创建多个元素效率更高(不要拼接字符串，采取数组形式拼接)，结构稍微复杂

4.createElement()创建多个元素效率稍低一点点，但是结构更清晰（面试题：innerHTML和createElement哪个效率更高）

6.DOM 重点核心

关于dom操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。