DOM

最新推荐文章于 2022-07-04 20:19:44 发布

buibuibui_piapia

最新推荐文章于 2022-07-04 20:19:44 发布

阅读量154

点赞数 2

文章标签： dom dom操作

本文链接：https://blog.csdn.net/buibuibui_piapia/article/details/111874936

版权

1.DOM的概述
DOM(Document Object Model文档对象模型)将 web 页面与到脚本或编程语言连接起来。通常是指 JavaScript，但将 HTML、SVG 或 XML 文档建模为对象并不是 JavaScript 语言的一部分。DOM模型用一个逻辑树来表示一个文档，树的每个分支的终点都是一个节点(node)，每个节点都包含着对象(objects)。DOM的方法(methods)让你可以用特定方式操作这个树，用这些方法你可以改变文档的结构、样式或者内容。节点可以关联上事件处理器，一旦某一事件被触发了，那些事件处理器就会被执行。
2.DOM树
在这里插入图片描述
3.获取DOM节点

getElementById(id名)
通过id名来获取对应元素

<body>
    <div id="box">我是box</div>
    <script>
        // getElementById(id名) 通过id名获取元素
        var box = document.getElementById('box')
        box.innerHTML = '我获取到box了'
    </script>
</body>

getElementsByClassName(class名)
通过class名获取元素

<body>
    <div class="box">我是box</div>
    <div class="box">我是box</div>
    <script>
        // getElementsByClassName 通过class名获取元素，它获取到的是一个集合
        // 这个集合不是数组，它叫做类数组对象(伪数组)，它不能使用数组的API
        // 但是它有下标，可以通过下标去获取对应元素，也可以通过length属性获取长度
        // 如下所示：这个集合包含了所有class名为box的元素
        var boxs = document.getElementsByClassName('box')
        console.log(boxs)	// HTMLCollection(2) HTML集合，里面有两个元素
        // boxs[0].innerHTML = '我是box啊啊啊啊'
        // boxs[1].innerHTML = '我也是box啊啊啊啊'
        // 或者我们也可以通过for循环来给它们进行操作
        for (var i = 0; i < boxs.length; i++) {
            boxs[i].innerHTML = '我们都是box啊啊啊啊'
        }
    </script>
</body>

getElementsByTagName(标签名)
通过标签名获取元素

<body>
    <ul>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>
    <script>
        // getElementsByTagName(标签名)，取到的也是一个类数组对象
        var list = document.getElementsByTagName('li')
        console.log(list)   // HTMLCollection(4)
        for (var i = 0; i < list.length; i++) {
            list[i].style.background = 'red'
        }
    </script>
</body>

querySelector() ES5新增选择器

<body>
    <h1 id="title">title</h1>
    <p class="pra">文字</p>
    <div>我是div</div>
    <span class="goods">我是第1个</span>
    <span class="goods">我是第2个</span>
    <span class="goods">我是第3个</span>
    <span class="goods">我是第4个</span>
    <script>
        // querySelector() 它是一个选择器，可以通过id名，class名以及标签名来获取元素
        var title = document.querySelector('#title')// 获取到h1
        var pra = document.querySelector('.pra')    // 获取到p
        var div = document.querySelector('div')     // 取到div  
        console.log(title)  // <h1 id="title">title</h1>
        console.log(pra)    // <p class="pra">文字</p>
        console.log(div)    // <div>我是div</div>
        
        // querySelector()只能取到第一个满足条件的元素
        var goods = document.querySelector('.goods')
        console.log(goods)  // <span id="goods">我是第1个</span>
    </script>
</body>

querySelectorAll() ES5新增选择器

<body>
    <button onclick='fn1()'>添加</button>
    <button onclick="fn2()">移除</button>
    <div id='box' class="box section"></div>
    <script>
        var div = document.querySelector('#box')
        function fn1 () {
            // classList.add() 添加class名
            div.classList.add('ac') 
            console.log(div.className)  // class名
            console.log(div.classList)  // 它是由class名组成的类数组对象
        }
        function fn2() {
            // classList.remove() 删除class名
            div.classList.remove('section')
            console.log(div.className)  // class名
            console.log(div.classList)  // 它是由class名组成的类数组对象
        }
        // clssList是由clsaa名组成的类数组对象，我们可以通过下标来取对应class名
        console.log(div.classList[0])
    </script>
</body>

children，childNodes，nodeName，tagName

<body>
	<div>
		<!-- 注释 -->
		<p></p>
		<p></p>
	</div>
    <script>
		var div = document.querySelector('div')
		// 元素都有一个children属性，获取当前元素的子元素
		console.log(div.children)	// HTMLCollection(2) 获取到div下面的子元素，也就是两个p标签

		// childNodes 获取的是子节点:注释，文本，标签全部都叫节点
		// 取到的是一个类数组对象
		console.log(div.childNodes)	// NodeList(7)

		// nodeName 我们可以通过它来判断节点类型
		console.log(div.childNodes[0].nodeName) // #text 换行的文本节点
		console.log(div.childNodes[1].nodeName) // #comment 注释节点
		console.log(div.childNodes[3].nodeName) // P 大写的标签名

		// 如果我们确切的知道这是一个标签名，还可以通过tagName直接获取标签名
		console.log(div.tagName)	// DIV
    </script>
</body>

previousElementSibling，firstElementChild，lastElementChild

<body>
	<div>我是div</div>
	<ul>
		<li>红烧鲤鱼</li>
		<li>回锅肉</li>
		<li>麻辣小龙虾</li>
	</ul>
	<script>
		// A元素.previousElementSibling 我们可以找到A元素的上一个兄弟元素
		// 此处A元素为ul，它上面的兄弟元素是div
		var ul = document.querySelector('ul')
		var bro = ul.previousElementSibling
		console.log(bro)	// <div>我是div</div>

		// A元素.firstElementChild 找到A元素的第一个子元素
		var fchi = ul.firstElementChild
		console.log(fchi)	// 红烧鲤鱼
		// A元素.lastElementChild 找到A元素的最后一个子元素
		var lchi = ul.lastElementChild
		console.log(lchi)	// 麻辣小龙虾
	</script>
</body>

4.操作DOM

<body>
	<ul>
		<li>首页</li>
		<li>列表</li>
		<li id="about">关于</li>
		<li id="user">个人</li>
		<li id="shopping">购物</li>
	</ul>
    <script>
		// createElement()创建节点
		// 创建一个div元素，用box变量来接收
		var box = document.createElement('div')
		// 通过js设置的style样式都是行内样式
		box.innerHTML = '我是box'
		box.style.width = '200px'
		box.style.height = '200px'
		box.style.background = 'red'

		// appendChild(childNode)将新节点追加到子节点的末尾
		document.body.appendChild(box)
		document.body.appendChild(box)	// 如果append同一个元素，最终还是只有一个（我们需要先克隆）

		// cloneNode(boolean)克隆节点,传入一个布尔值，
		// true表示深克隆，复制该节点及该节点下的所有子节点，false表示浅克隆，只复制该节点
		// 注意点：如果元素有id属性不要去克隆，否则会出现两个id相同的元素（id要唯一）
		var box1 = box.cloneNode()	//浅克隆
		document.body.appendChild(box1)	// 页面克隆后的div里面的内容没有(因为这是浅克隆)
		var box2 = box.cloneNode(true)	// 深克隆
		document.body.appendChild(box2)	// 这时克隆后的div跟原来的div一样
		
		// inserBefore(newNode,targetNode)将newNode插入到targetNode之前
		var ul = document.querySelector('ul')	// 获取ul
		var li = document.createElement('li')	// 创建一个li
		var about = document.querySelector('#about')	// 获取关于li
		li.innerHTML = '联系'
		// ul.appendChild(li)	// appendChild会放到末尾
		ul.insertBefore(li,about)	// 这样就放在了关于的前面了

		// replaceChild(newNode,targetNode)使用newNode替换targetNode
		var user = document.querySelector('#user')
		var msg = document.createElement('li')
		msg.innerHTML = '信息'	
		ul.replaceChild(msg,user)	// 在ul里面把个人换成信息

		// removeChild(childNode)移除目标节点
		// 在知道父级元素的时候  父级元素.removeChild(childNode)
		var shopping = document.querySelector('#shopping')
		// ul.removeChild(shopping)

		// 当不知道父级元素的时候我们可以通过 parentNode找到自己的父级元素
		// shopping.parentNode.removeChild(shopping)

		// 直接删除：目标元素.remove()	IE8用不了
		shopping.remove()
    </script>
</body>

5.文档碎片
createDocumentFragment()

<body>
	<ul></ul>
	<script>
		// 需求：往ul里面加入10个li
		// 1.for循环，创建10个li，append 10次，进行了10次DOM操作
		var ul = document.querySelector('ul')
	/*	for (var i = 0; i < 10; i++) {
			var li = document.createElement('li')
			li.innerHTML = i+1
			ul.appendChild(li)
		}
	*/
		// 2.可以用一个文档碎片，先把10个li放入碎片里（减少了DOM操作，性能更优）
		// 然候把碎片插入ul，这样就只有一次DOM操作
		var cache = document.createDocumentFragment()
		for (var i = 0; i < 10; i++) {
			var li = document.createElement('li')
			li.innerHTML = i+1
			// li放到文档碎片（cache）里面
			// 这里的append是在计算机里面操作的不是在页面上操作的
			cache.appendChild(li)
		}
		// 把cache插入到ul里
		ul.appendChild(cache)
	</script>
</body>

6.获取元素属性

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.box{
			width: 200px;
			height: 300px;
			background: red;
		}
	</style>
</head>
<body>
	<div class="box"></div>
	<script>
		var box = document.querySelector('div')
		// box.style这种方式只能获取或者设置行内样式
		// console.log(box.style.width) // 什么都没有，获取不到

		// 获取内部或者外部样式，非IE浏览器写法
		var width = getComputedStyle(box,false).width
		console.log(width)	// 200px

		// 根据兼容性封装一个获取样式的方法
		// obj:要获取样式的对象
		// attr：属性名
		function getStyle (obj,attr) {
			if (obj.currentStyle) {
				// 判断obj是否有currentStyle这个属性，有就是IE浏览器
				return obj.currentStyle[attr]
			} else {
				// obj没有currentStyle这个属性，说明不是IE浏览器
				return getComputedStyle(obj,false)[attr]
			}
		}

		var height = getStyle(box,'height')
		console.log(height)	// 300px
	</script>
</body>
</html>

7.DOM尺寸

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.box{
			width: 200px;
			height: 300px;
			padding: 20px;
			border: 5px solid #ccc;
			background: red;
		}
	</style>
</head>
<body>
	<div class="box">box
		<p>box</p>
		<p>box</p>
		<p>box</p>
		<p>box</p>
		<p>box</p>
		<p>box</p>
		<p>box</p>
		<p>box</p>
		<p>box</p>
		<p>box</p>
	</div>
	<script>
		function getStyle (obj,attr) {
			if (obj.currentStyle) {
				return obj.currentStyle[attr]
			} else {
				return getComputedStyle(obj,false)[attr]
			}
		}

		var box = document.querySelector('.box')
		var width = getStyle(box,'width')
		console.log(width)	// 200px  不包括padding，border，单纯的width属性值

		// offsetWidth是DOM提供的一个属性，用来获取元素的占位尺寸（包含padding，border不包含margin）
		// 获取到的值是数字，px帮我们去掉了
		var width1 = box.offsetWidth  
		console.log(width1)	// 240
		// offsetHeight 用法跟 offsetWidth 一样，就是一个宽的方向一个高的方向

		// clientWidth 
		var width2 = box.clientWidth
		console.log(width2)	// 240	(不包含border)
		// clientHeight 用法跟 clientWidth 一样

		// scrollHeight 滚动高度 (scrollWidth一样用法)
		// 获取的是可滚动内容的总高度，如果box没有滚动条，跟clientHeight是一样的
		// 内容超出的时候获取的是总内容的高度
		var height = box.scrollHeight
		console.log(height)	// 411
		
		// offsetWidth,offsetHeight
		// clientWidth,clientHeight
		// scrollWidth,scrollHeight
		// 这三对属性都是只读的，不能设置
		// box.offsetWidth = 800  无效的，设置不了
	</script>
</body>
</html>

8.DOM位置

clientLeft和clientTop
获取左边框和上边框的宽度
offsetLeft和offsetTop
元素的边框的外边缘距离与已定位的父容器（offsetparent）的左边距离（不包括元素的边框和父容器的边框）
元素的边框的外边缘距离与已定位的父容器（offsetparent）的上边距离（不包括元素的边框和父容器的边框）
scrollTop和scrollLeft
获取滚动内容上方的高度（就是滚动条上面隐藏的内容的高度）
获取滚动内容左方的宽度（就是滚动条左边隐藏的内容的宽度）