API(BOM DOM) 就是一个接口因为webAPI很多，我们将他称为webAPIs。 web APIs由w3c规范

文档对象模型(document Object model)处理可扩展语言(HTML XML)的标准编程接口(通过DOM接口改变网页内容、结构、样式等)

DOM是一个接口，在DOM中一个页面用文档document表示，在DOM中文档里的内容全都看作对象(有属性和方法)--文档对象模型
文档：一个页面就是文档，DOM用document表示

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

节点：所有内容都是节点(标签(元素)、属性、文本[标签之间的空格换行、标签里的内容属性值是文本节点]、注释等)，DOM用node表示

DOM树:

标签: 元素:

donsole.dir()//查看对象属性和方法

this let

指向的是事件函数的调用者(是谁调用了这个事件的函数)[206] flag算法[207]

事件

触发相应的机制 (三要数)

事件源: 事件被触发的对象(比如button按钮)

获取被触发的对象: （获取元素对象、文本等）----获取事件

事件类型: 怎么触发的，(点击触发、经过触发等)----绑定事件(onclick两种)

onclick 鼠标点击触发事件文档对象模型（DOM）的一个基本事件
        onmouseover 鼠标经过事件
        onmouseout 鼠标离开触发事件
        onfocus 获得鼠标焦点触发事件
        onblur 失去鼠标焦点触发事件
        onmousemove 鼠标移动触发事件
        onmouseup 鼠标弹起触发事件
        onmousedown 鼠标按下触发事件

4. 事件处理类型:通过函数赋值的方式完成-----添加处理程序

一、获取元素（文档document对象方法）

获取事件获取元素

ID获取元素对象

elementObject=document.getElementById('大小写敏感的字符串')//返回一个元素对象

标签获取元素对象集合

elementObjectArray=document.getElementsByTagName('标签名')
//返回一个元素对象集合，以伪数组形式存储(有没有元素都会返回伪数组)(没有常用方法、可以遍历、访问索引值)
//获取的是一个动态的(元素内容发生变化，得到的结果也会变化)
//如果要获取子元素，要指名伪数组里的哪一个元素对象作为父元素(所以一般会指明id，是唯一的，不返回伪数组)

类名获取元素对象集合(H5新增)

elementObjectArray=document.getElementsByClassName('类名')
//获取的元素对象以伪数组形式存储

name属性值获取元素(表单较多)

elementObject=document.getElementsByName('name属性值')
//获取的元素对象以伪数组形式存储

选择器获取元素 (有兼容问题)

elmentObject=document.querySelector('css选择器')
//只会返回第一个元素对象  不是伪数组形式
elmentObjectArray=document.querySelectorAll('css选择器')  属性选择input[type='text']
//获取满足条件元素对象以伪数组形式存储

html body获取特殊元素

bodyObject=document.body
//返回body元素对象
htmlObject=document.documentElement
//返回html元素对象
headObject=document.head
//返回head元素对象

二、操作元素内容、属性（元素对象属性、方法）

元素内容-元素属性-表单元素属性-元素样式属性 获取元素绑定事件操作元素

元素内容操作

获取元素绑定事件改变元素内容--------可以不用绑定事件，直接赋值 [202] if判断时间改内容属性

元素对象内容=元素对象.innerHTML/='更改的元素内容'
元素对象内容=元素对象.innerText/='更改的元素内容'//HTML   识别和[保留]html标签空格和换行 是W3C标准
//Text 不识别和[去除]html标签 ie发起的

元素属性操作

自定义属性 data-index="1"。 h5规定以data- 开头

element.属性只能设置||获取内置属性值 Attribute能获取设置移除自定义属性

getAttribute 不能获取value

get 获取属性值var 属性值=元素对象.getAttribute('属性名||data-index')  .getAttribute能获取自定义属性（data-index="1"）
set 设置属性值元素对象.setAttribute('属性名||data-index'，'属性值')    能设置自定义属性remove 移除属性元素对象.removeAttribute('属性名||data-index')      能移除自定义属性h5新增的获取自定义属性的方法[226] 有严重兼容问题元素对象.dataset.index    得到元素对象.element.属性 只能获取内置属性  .getAttribute能获取自定义属性（data-index="1"）

------常用的元素属性 element.属性

元素对象属性值=元素对象.src/='更改元素对象属性值'
元素对象属性值=元素对象.alt/='更改元素对象属性值'
元素对象属性值=元素对象.title/='更改元素对象属性值'

-----表单元素属性操作 [表单内容是由表单属性设置] element.属性

value
元素对象属性值=表单元素对象.value/='更改的属性值（内容值）'type
元素对象属性值=表单元素对象.type/='更改的属性值'disabled
表单元素对象.disabled=true|flase=========表单元素对象.disabled='disabled' ==''还是禁用
只能给element.disabled=true|flase  不能setarr使用
checked
表单元素对象.checked=ture|false 选中和未选中

-----元素样式属性操作 style class

style属性(可以设置多样式)//行内样式、权重高1000 元素对象.style.样式='样式值1' //可获取  元素对象.style.样式='样式值2'   元素对象.style.样式='样式值3'   class属性
//修改元素的class类名，注意:会替换原来的class类名，多类名也会替换成现在的class类名元素对象.className='类名1'元素对象.className='类名2'元素对象.className='类名3'
//以最后一个为准//想保留原来clss类名采用一下方法元素对象.className='类名1  类名2 类名3..'元素对象.classList.add('类名1')元素对象.classList.add('类名2')元素对象.classList.add('类名3')获取类样式
元素对象.style.样式
var 样式值=window.getComputedStyle(获取的元素对象).width(类样式名)
//返回的style是一个实时的 CSSStyleDeclaration 对象，当元素的样式更改时，它会自动更新本身。移除类样式元素对象.classList.remove('类')[去除class]||元素对象.element.className=''[赋值为'']

三、节点操作

DOM之前的方法获取的是元素节点。 节点操作可以获取父子兄层次关系元素、文本节点

1、利用DOM提供的方法(api)获取元素：逻辑性不强、繁琐

2、利用节点的层次关系获取元素：利用父子兄弟节点关系、逻辑性强、兼容性差

在DOM中页面中的所有内容都是节点-node表示(文档（document）、标签(元素)、属性、注释、[标签之间的空格换行（文本节点）、标签里的内容属性值是文本节点])DOM所有HTML元素(节点)均可被javascript修改或删除

一般节点至少拥有nodeType(节点类型) nodeName(节点名称)noneValue(节点值) dir可查看
<div class="d1">元素一</div><script>var divEle = document.querySelector('.d1')console.log(divEle.nodeType, divEle.nodeName, divEle.nodeValue);console.log(divEle.firstChild.nodeType, divEle.firstChild.nodeName,divEle.firstChild.nodeValue);</script>
标签元素：元素节点

标签属性：属性节点

标签内容：文本节点

-------------均是节点对象、documen--->文档节点

元素节点.nodeType 1

属性节点.nodeType 2

文本节点.nodeType 3（包含文字空格和换行等）

节点操作实际主要操作的是元素节点

常见节点层级:父子兄层级关系 (html中隔代也算父子)

获取父节点

元素对象.parentNode (得到最近的父级元素节点，得不到返回ull)

元素对象.parlement

获取子节点（标准）

元素对象.childNodes(返回一个数组子节点会及时更新 [下一级父节点和子节点之间的空格，和子节点] 。包含所有节点-元素节点文本节点、可以通过nodeType 遍历获取)

元素对象.firstChild(返回第一个子节点-含文本节点)

元素对象.lastChild(返回最后一个子节点-含文本节点)

获取子节点

元素对象.children（只读返回所有子元素节点数组）（非标准但被浏览器支持）

兼容写法：元素对象.children[0] || 元素对象.children[元素对象.lenth-1]

firstElementChild 返回第一个子元素节点找不到返回null ie9以上

firstElementChild 返回最后一个子元素节点找不到返回null ie9以上

获取兄弟节点

元素对象.nextSibling(得到下一个兄弟节点包含元素或文本节点等找不到返回null)

元素对象.previousSibling(得到上一个兄弟节点包含元素或文本节点等找不到返回null)

元素对象.nextElementSibling(得到下一个兄弟元素节点找不到返回null)  ie9以上

元素对象.previousElementSibling(得到上一个兄弟元素节点找不到返回null)  ie9以上

兼容写法：自己封装一个兼容函数

获取元素节点的所有属性节点

元素对象.attributes

创建节点

documen.createElement('标签[元素节点]')

添加节点

        分两步:1.创建 2.添加

父级元素对象.appendChild('创建元素节点')(将节点添加到父节点的子节点末尾)

父级元素对象.insertBefore('创建元素节点','指定元素')(将节点添加到父节点的指定子节点前面)

删除节点

父级元素对象.removeChild('父级元素对象.children[0]')

移除的当前节点对象.remove()

复制节点(克隆节点)

1、获取元素节点对象  2、克隆元素节点对象 3、添加节点元素对象

深浅拷贝

node(克隆的对象).cloneNode()--true||flasse
var ul = document.querySelector('ul');
// 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
// 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容var lili = ul.children[0].cloneNode(true);ul.appendChild(lili);//添加在末尾
替换节点

父元素对象.replaceChild(新节点，旧节点)

创建文本节点

document.careateTextNode('文本')

创建属性节点

createAttribute: 创建属性节点

setAttruibuteNode: 给元素节点设置属性节点

宽高

offsetWidth = 内容width + padding + border
clientWidth = 内容width + padding
window.getComputedStyle(divEle).width = 内容width

DOM(document Object model)相关推荐

前端基础入门之js什么是DOM Document Object Model
文章目录 DOM 1.DOM简介文档对象模型 2.节点节点类型节点属性文档节点(Document) 元素节点(Element) 文本节点(Text) 属性节点(Attr) 3.事件 4.文 ...
DOM（Document Object Model ）
DOM(Document Object Model ) DOM是文档对象模型 ,DOM是关于创建,插入,修改,删除页面元素的标准.页面中的内容本质上都是字符串,但是js会把这些字符串转成DOM树,DO ...
Dom（Document object model）文档-Xml文件对象模型
Dom(Document object model)文档-对象-模型,核心思想是把一个Xml文件看成一个对象模型,然后通过对象的方式来操作Xml文件.我们先总结出DOM对象的属性方法,在分别用案例说明 ...
DOM---文档对象模型(Document Object Model)的基本使用
一.DOM简介文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接口.它是一种与平台和语言无关的应用程序接口(API),它可以动态 ...
DOM（document object model），文档对象模型
DOM 将标记语言文档一次性加载进内存中,在内存中形成一棵 DOM 数.
【JavaScript】Document Object Model 文档对象模型
文章目录
js中DOM, DOCUMENT, BOM, WINDOW 区别
全栈工程师开发手册 (作者:栾鹏) js系列教程6-BOM操作全解 js系列教程7-DOM操作全解 js中DOM, DOCUMENT, BOM, WINDOW 区别 DOM 全称是 Document ...
BOM—浏览器对象模型（Browser Object Model）
1,javascript 组成部分: 1.ECMAscript(核心标准): 定义了基本的语法,比如:if for 数组字符串 ... 2.BOM : 浏览器对象模型(Browser ...
js浏览器对象模型（Brower Object Model）
BOM:浏览器对象模型, Brower Object Model. DOM 是 W3C 的标准: [所有浏览器公共遵守的标准] BOM 是各个浏览器厂商根据 DOM在各自浏览器上的实现;[表现为不同 ...

DOM(document Object model)

this let

事件

一、获取元素（文档document对象方法）

二、操作元素内容、属性（元素对象属性、方法）

-----元素样式属性操作 style class

三、节点操作

DOM(document Object model)相关推荐

最新文章

热门文章

DOM(document Object model)

this let

事件

一、获取元素（文档document对象方法）

二、操作元素 内容、属性（元素对象属性、方法）

-----元素样式属性操作 style class

三、节点操作

DOM(document Object model)相关推荐

最新文章

热门文章

二、操作元素内容、属性（元素对象属性、方法）