DOM元素 DOM元素的获取 DOM操作元素内容 DOM操作元素的属性 操作自定义属性 DOM操作元素类名 DOM操作元素样
DOM元素
DOM：document object model 文档对象模型
一整套操作文档流的属性和方法，其实就是操作页面的元素在浏览器中DOM是树状结构
DOM元素的获取
非常规标签获取（html,head,body）
document.documentElement
拿到当前页面的html标签
document.head
获取当前页面的head标签
document.body
获取当前页面的body标签
常规标签的获取（div,ul,li,input）
document.getElementById(' box ')
如果有名为box的id，获取id名为box的元素的第一个
如果没有名为box的id，返回null
document.getElementsByClassName('class名称')
在整个文档流里面通过元素的类名获取元素
返回一个为数组，包含所有该类名的元素，没有就返回一个空为数组
document.getELementsByTagName('标签名')
在整个文档流里面通过元素的标签名获取元素
返回一个为数组，包含所有该标签名的元素，没有就返回一个空为数组
documen.querySelector('选择器')
选择器：css中的选择器
在文档流中通过选择器来进行元素的获取
返回值：页面中有与该选择器相匹配的元素，就是匹配到的元素，如果没有就返回null
documen.querySelectorAll('选择器')
在文档流中通过选择器来进行元素的获取
返回一个为数组，包含所有该选择器匹配的元素，没有就返回一个空为数组
注意：querySelector 和 querySelector IE低版本不支持
DOM操作元素内容
1，innerHTML
操作元素内部的所有元素
读：元素.innerHTML
获取元素内部的所有内容（文本+标签），以字符串形式返回
写：元素.innerHTML="你要设置的内容"
设置元素内部的超文本内容
当字符串里出现html结构时，浏览器会自动解析后在页面显示
2，innerText
操作元素的文本内容
读：元素.innerText
获取元素内部所有的文本内容，不获取标签
写：元素.innerText="你要设置的文本内容"
覆盖式写入文本内容，当字符串中有html结构时，不会被浏览器解析，而是当作文本输出
DOM操作元素的属性
操作原生属性（src,type，id）
读：元素.属性名
获取元素的属性值
写：元素.属性名=“值”
设置元素该属性的属性值
操作自定义属性
元素.setAttribute('属性名'，‘属性值’)
设置元素的自定义属性
元素.getAttribute('属性名')
获取元素的一个自定义属性的属性值
元素.removeAttribute('属性名')
删除元素的一个自定义属性
DOM操作元素类名
1，按原生属性操作
div.className='box'--设置类名
div.className='box1'--修改类名
div.className+=' abd'--追加类名abc
删除元素类名
1，截取字符串方式
2，按照空格切开，循环遍历，找到想删的删掉
3，重写一遍类名，去掉想删的类名
2，H5 方式操作类名
div.classList.add('box3')---追加类名box3
div.classList.remove('box1')---删除类名box1
div.toggle('box2')---切换类名状态
当元素有这个类名的时候，就是删除操作
当元素没有这个类名的时候，就是追加操作
DOM操作元素样式
获取元素样式
获取行内样式（利用style是元素的原生属性）
元素.style
只能获取到行内样式
获得一个对象，需要哪个样式的值直接在对象里访问
获取非行内样式
标准浏览器：window.getComputedStyle('元素')---获得一个对象，里面包含该元素的所有属性值，未设置的有默认值，需要哪个样式直接在对象里访问
IE 低版本浏览器：元素.currentStyle---得到的是一个对象，里面包含的是所有可设置样式，每一个样式都有值，没有设置的有默认值。你需要哪个样式，直接在对象里面查找就行
说明：当获取样式的时候，如果使用点语法，你获取带有中划线的样式要转化成驼峰的方式；如果是数组关联语法，可以使用中划线
扩展：短路表达式
什么情况下用短路表达式：方法或属性执行没问题，就是拿不到值的时候
前提：代码执行不能报错
设置元素样式
JS只能设置行内样式（因为修改非行内样式需要修改html和css文件，JS不能操作电脑文件）
元素.style.样式名=‘值’
DOM节点操作
获取节点根据关系
1，childNodes
div.childNodes---获取div元素的所有孩子节点
2,children
div.children---获取div元素的所有孩子元素节点
3,firstChild
div.firstChild---获取div的第一个孩子节点
4,firstElementChild
div.fistElementChild---获取div元素的第一个孩子元素节点
5,lastChild
div.lastchild---获取div元素的最后一个节点
6,lastElementChild
div.lastElementChild---获取div元素的最后一个元素节点
7,previousSlibling
div.previousSilbing---获取div元素的前一个兄弟节点
8,previousElementSlbling
div.previousElementsSilbing---获取div元素的前一个元素节点
9,nextSibling
div.nextSilbing---获取div元素的后一个兄弟节点
10,nextElementSibling
div.nextElemnetSilbing----获取div元素的后一个兄弟节点
11,parentNode
div.parentElement---获取div元素的父亲节点
12,parentElement
div.parentElement---获取div元素的父亲元素节点
13,attributes
div.attributs---获取div的所有属性节点
创建节点
1，createElement()--创建元素节点
document.creatElement('div')---创建一个div节点
2,createTextNode()---创建文本节点
document.creatTextNode('文本内容')---创建一个文本节点
3,createComment()---创建一个注释节点
document.creatComment("注释内容")---创建一个注释节点
4,createAttribute()---创建一个属性节点
document.creatAttribute('属性名')---创建一个属性节点
5,createDocumentFragment()
文档碎片
插入节点
1，appendChild()---在末尾添加孩子节点
div.appendChild(要添加的节点)---在div的末尾添加新节点
2,insertBefore()---在某个孩子元素之前插入节点
div.insertBefore(要插入的节点，你要插入到那个元素前面)---把一个新节点插入到某个元素之前
删除节点
1，removeChild()---删除一个孩子节点
div.remove(要删除的节点)---删除div的某个节点
2,remove()---删除某个节点
div.remove()---删除div节点
替换节点
1，repalceChild()---用一个新节点替换老孩子节点
div.replaceChild(新节点，老节点)---用一个新节点替换div里的一个孩子节点
克隆节点
1，cloneNode（参数）---克隆节点
div.cloneNode()---克隆一个div节点
参数
参数默认为false,不克隆后代节点
可以填选true,克隆后代节点
节点属性
nodeType--节点类型
元素节点：1
属性节点：2
文本节点：3
注释节点：8
nodeName---节点名称
DIV--元素节点：大写标签名
id --属性节点：属性名
文本节点：#text
注释节点：#comment
nodeValue---节点的值
元素节点：null
属性节点：属性值
文本节点：文本内容（包含换行和空格）
注释节点：注释内容（包含换行和空格）
浙公网安备 33010602011771号