DOM基础与JavaScript操作详解,-优快云博客

本文链接：https://blog.youkuaiyun.com/a15940835457/article/details/132054870

DOM总结

什么是dom?

dom是文档对象模型。将网页转化成js对象，从而可以使用js操作网页

js获取元素的方式

获取非常规元素

//获取html元素
document.documentElement

//获取head元素
document.head 

//获取body元素
document.body

获取常规元素

//根据ID获取元素
document.getElementById('id名') 

/*
	根据class名称获取元素
	获取的是一个伪数组，没有push等方法，但是可循环
	可以通过Array.from(elements)转换成真数组去使用
*/
document.getElementsByClassName('class名')

/*
	根据标签名称获取元素
	获取的是一个伪数组，没有push等方法，但是可循环
	可以通过Array.from(elements)转换成真数组去使用
*/
document.getElementsByTagName('标签名')

/*
	根据name属性获取元素
	获取的是一个伪数组，没有push等方法，但是可循环
	可以通过Array.from(elements)转换成真数组去使用
	普遍运用在input标签上 
*/
document.getElementsByName('name属性名称')

/*
	只返回一个对象，如果有多个同名元素，则只返回第一个
*/
document.querySelector('css名') 

/*
	querySelector的补足，可返回数组
*/
document.querySelectorAll('css名')

js操作元素属性

元素本身属性

<input id="name" type="text" />
<script>
    var nameInput = document.getElementById('name')
 // 获取属性
 console.log(nameInput.type)
 // 设置属性
 nameInput.type = 'password'
</script>

自定义属性

<input id="name" type="text" data-name='zhangsan' />
<script>
 var name = document.getElementById('name')
 /* 
 	方式一
 */
 // 获取属性
 name.getAttribute("data-name")
 // 设置属性
 name.setAttribute("data-name", 'lisi')
 // 删除属性
 name.removeAttribute("data-name")
    
 /* 
 	方式二
 */
 // 只能获取自定义属性
 console.log(name.dataset)
 // 只能设置自定义属性
 name.dataset.age = 12
 // 删除自定义属性
 delete name.dataset.name
 delete name.dataset.age
</script>

案例:全选/取消全选

操作文本元素

innerHTML(‘内容’) //获取/设置完整的html片段
innerText(‘内容’) // 不解析html标签，只能操作文本，但是比innerHTML更安全
value // 表单元素

操作元素样式

获取元素**行内样式**的方法（可读可写）

document.getElementById('id').style.width


/*例如`background-color`这种样式，需使用如下方式获取:*/
//['background-color']方式
document.getElementById('id').style['background-color']
//驼峰方式
document.getElementById('id').style.backgroundColor

获取行内、内部（style标签）、外部（link标签）样式的方法（只读）
```
var box = document.getElementById('id')
var res = getComputedStyle(box);
console.log(res);
res.width // 获取宽度
res.backgroundColor // 取背景颜色
```
兼容性问题，不支持IE678，需要使用 res.currentStyle.width

注意：

box.style和getComputedStyle(box)这种方式只能获取content的宽高

操作元素类名

直接操作元素class名

var box = document.getElementById('id')
console.log(box.className); // 获取元素class
box.className = 'classname' // 设置classname,如果有多个，直接覆盖

通过classList属性操作

var box = document.getElementById('id')
console.log(box.classList) // 结果是一个数组
//设置class名称，如果有重复，自动去重
box.classList.add('classname')
//删除classname
box.classList.remove('classname') 
//切换classname，如果有item,就删除，没有就加上
box.classList.toggle('item')

案例：选项卡

DOM节点

节点分类

document/元素/文本/属性/注释节点

document

根节点
元素节点

通过getElementBy…获取的都是元素节点
属性节点

通过getAttribute获取，无父子关系
文本节点

通过innerText获取
注释节点

<!--box中有几个直系子节点-->
<div id="box">
    hello
	<p>123456</p>
	<!--注释-->
</div>
<script>
/*
	共5个节点
	1.包含hello和回车换行的文本节点
	2.<p>123456</p>节点
	3.p节点和注释节点之间的回车换行文本节点
	4.注释节点
	5.注释节点之后的回车换行文本节点
*/
</script>

获取节点的方式

获取所有子节点

var box = document.getElementById("box")
console.log(box.childNodes) //节点数组

获取所有元素节点

var box = document.getElementById("box")
console.log(box.children) //节点数组

获取第一个子节点

var box = document.getElementById("box")
console.log(box.firstChild) //第一个节点
console.log(box.firstElementChild) //第一个元素节点

获取最后一个子节点

var box = document.getElementById("box")
console.log(box.lastChild) //最后一个节点
console.log(box.lastElementChild) //最后一个元素节点

获取上一个兄弟节点

var box = document.getElementById("box")
console.log(box.previousSibling) //获取上一个兄弟节点
console.log(box.previousElementSibling) //获取上一个兄弟元素节点

获取下一个兄弟节点

var box = document.getElementById("box")
console.log(box.nextSibling) //获取下一个兄弟节点
console.log(box.nextElementSibling) //获取下一个兄弟元素节点

获取父节点

var box = document.getElementById("box")
console.log(box.parentNode) //获取父节点
console.log(box.parentNode.parentNode) //可以无限向上层找，最终找到document,根节点
console.log(box.parentElement) //获取父元素节点，可以无限向上层找，最终找到html节点
//这也是parentNode和parentElement的主要区别

获取所有属性节点

var box = document.getElementById("box")
console.log(box.attributes) // 返回NamedNodeMap,注意返回的是map集合

节点操作

创建节点

//创建div节点
var odiv = document.createElement('div')
//追加属性
odiv.className = 'item'
odiv.innerHTML = 'new Element'
//作为box的子节点，追加到box节点中
var box = document.getElementById('box')
box.appendChild(odiv)

插入节点

var odiv = document.createElement('div')
odiv.innerHTML = 'new Element'
var box = document.getElementById('box')
box.insertBefore("要插入的节点","在哪个节点前面插入")

删除节点

var box = document.getElementById("box")
box.removeChild("要删除的节点") //删除box的后代节点
box.remove() //删除自己以及后代节点

替换节点

var box = document.getElementById("box")
box.replaceChild("新节点", "老节点")

克隆节点

var box = document.getElementById("box")
//默认。克隆自己不克隆后代
var boxClone1 = box.cloneNode()
//克隆自己和后代
var boxClone2 = box.cloneNode(true)

节点属性

// nodeType。获取方式：
var box = document.getElementById("box")
var boxChildNodes = box.childNodes
boxChildNodes[0].nodeType // 2 || 3 || 8 || 1

文本节点	元素节点	属性节点	注释节点
3	1	2	8

获取元素尺寸

var box = document.getElementById("box")
/*
	offsetWidth | offsetHeight
	计算的是 border+padding+content
	
	注意：
	 1. 获取的单位是number类型
	 2. 设置box-sizing 虽对结果有影响，但是计算方式是不变的。
	 3. 设置display:none。结果是0
*/
console.log(box.offsetWidth, box.offsetHeight)
/*
	clientWidth | clientHeight
	计算的是 padding+content
	
	注意：
	 1. 获取的单位是number类型
	 2. 设置box-sizing 虽对结果有影响，但是计算方式是不变的。
	 3. 设置display:none。结果是0
*/
console.log(box.clientWidth, box.clientHeight)
// margin的大小对以上结果没有任何影响

获取元素偏移量

var box = document.getElementById("box")
/*
	偏移量计算参考点：
	1. 偏移量相对于最近定位父级元素
	2. 如果没有定位，偏移量相对于body
*/
console.log(box.offsetLeft, box.offsetTop)
/*
	表示内容区域的左上角相对于整个元素左上角的位置（不包括padding、margin）,也就是一个元素的左边框（border-left）的宽度
	特别的：如果元素的文本方向是从右向左（RTL, right-to-left），并且由于内容溢出导致左边出现了一个垂直滚动条，则该属性包括滚动条的宽度。
	
	不常用
*/
console.log(box.clientLeft, box.clientTop)

获取可视窗口的尺寸

/*
	Bom方式
*/
//获取窗口的宽度（包含滚动条）
console.log(window.innerWidth)
//获取窗口的高度（包含滚动条）
console.log(window.innerHeight)

/*
	Dom方式
*/
//获取窗口的宽度（不包含滚动条）
console.log(document.documentElement.clientWidth)
//获取窗口的高度（不包含滚动条）
console.log(document.documentElement.clientHeight)