DOM对象操作

最新推荐文章于 2022-06-21 04:43:59 发布

Candycandyma

最新推荐文章于 2022-06-21 04:43:59 发布

阅读量234

点赞数

分类专栏： # js基础

本文链接：https://blog.csdn.net/Candycandyma/article/details/104188938

版权

js基础专栏收录该内容

13 篇文章 0 订阅

订阅专栏

DOM

DOM把整个页面映射成为一个多层节点结构，借助DOM提供的API，可以实现删除、添加、替换、修改任何节点。
DOM:文档对象模型 Document Object Model，JS可以通过DOM来操作HTML网页。
节点：构成HTML文档最基本的单元。
常用节点分成四类：文档节点：整个HTML文档；元素节点：HTML文档中的HTML标签；属性节点：元素的属性；文本节点：HTML标签中的文本内容。

<body>
	<button id="btn">我是一个按钮</button>
	<script type="text/javascript">
		//获取button对象
		var btn = document.getElementById("btn");
		//修改对象中的文字
		btn.innerHTML = "I'm a button";
	</script>
</body>

事件

即用户和浏览器之间的交互行为，如点击按钮、鼠标移动、关闭窗口等。

可以在事件对应属性中设置一些js代码，当事件触发时，这些代码将会执行。这种写法不方便维护，不推荐使用。

//为按钮绑定一个单击事件
btn.onclick = function(){  //单击响应函数
	alert("hello");
};

可以为按钮的对应事件绑定处理函数的形式来响应事件，这样当事件被触发时，其对应的函数将会调用。

注意：将js代码编写到页面下部就是为了，可以在页面加载完毕后再执行js代码

onload事件会在整个页面加载完成之后才触发，为window绑定一个onload事件，该事件对应的响应函数将会在页面加载完成之后执行，这样可以确保我们的代码执行时所有的DOM对象已经加载完毕。

window.onload = function(){
	var btn = document.getElementById("btn");
	btn.onclick = function(){  //单击响应函数
 		alert("hello");
	};
};

元素节点

获取元素节点：通过document调用
1、getElementById() 通过Id属性获取一个元素节点对象
2、getElementsByTagName() 通过标签名获取一组元素节点，这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
3、getElementByName() 通过name属性获取一组元素节点对象

获取元素节点的子节点

1、getElementsByTagName() 通过具体的元素节点调用
2、childNode属性当前节点的所有子节点，包括文本节点。根据DOM节点间的空白也会当成文本节点。但是IE8及以下浏览器不会将空白当作文本节点。
3、firstChild属性当前节点的第一个子节点（包括中间的空白文本）
4、lastCilid属性当前节点的最后一个子节点（包括中间的空白文本）
5、children属性当前元素的所有子元素，子元素也就是全为标签，不会再出现类似空白的文本节点。

6、firstElementChild属性，获取当前节点第一个子元素。但是不兼容IE8及以下浏览器，若要兼容尽量不要使用。

获取父节点和兄弟节点

1、parentNode属性表示当前节点的父节点
2、previousSibling属性当前节点的前一个兄弟节点；previousElementSibling 当前节点的前一个兄弟元素；
3、nextSibling属性当前节点的后一个兄弟节点

注意：
1、innerText属性和innerHTML类似，可以获取到元素内部的文本内容，不同的是它会自动将html标签去除
2、在事件的响应函数中，响应函数是给谁绑定的，this就是谁

DOM的其他查询方法

1、获取body元素

var body = document.getElementByTagName("body")[0];
var body = document.body;

2、获取根元素html

var html = document.documentElement;

3、获取页面所有元素

var all = document.all;
var all = document.getElementsByTagName("*");

4、根据class属性值获取一组元素节点
注意：不支持IE8以下浏览器

var box1 = documment.getElementsByClassName("box1");

5、document.querySelector()
需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象。使用该方法只会返回一个元素，如果满足条件的元素有多个，那么只会返回第一个。IE支持

6、document.querySelectorAll()
该方法与上述方法类似，不同的是它会将符合条件的元素封装到一个数组中。即使只有一个元素

DOM增删改

1、document.createElement()
创建元素节点，接收一个标签名字符串作为参数，返回新创建的节点

2、document.createTextNode()
创建文本节点，接收文本内容作为参数并返回

3、appendChild()
把新的子节点添加到指定父节点，语法：父节点.appendChild(子节点)

4、insertBefore() 注意：父节点调用
在指定的子节点前面插入新的子节点，语法：父节点.insertBefore(新子节点，旧子节点)

5、replaceChild(新节点，旧节点)
替换子节点

6、removeChild()
删除子节点

注意：使用innerHTML也可以完成DOM的增删改的相关操作。

var li = document.createElement("li");
li.innerHTML = "广州";
city.appendChild(li)

注意：点击超链接后，超链接会跳转页面，这个是超链接的默认行为。若想取消该默认行为，在其响应函数最后添加return false或者将herf属性改成javascrip:;

1、confirm() 用于弹出一个带有确认和取消按钮的提示框，需要一个字符串作为参数，该字符串将会作为提示文字显示出来；点击确认则返回true，取消则是false

var allA = document.getElementsByTagName("a");
for(var i = 0;i < allA.length;i++){
	allA[i].onlick = function(){   
	//若将this替换成allA[i]，则会打印undefined，(说的是响应函数内部)
//因为for循环比响应函数的调用先执行，当执行响应函数，i已经是3
		alert(allA[i]);
		};
}