JS DOM 对象的节点操作

YNG973

已于 2024-08-17 10:13:32 修改

阅读量1k

点赞数 18

文章标签： javascript 开发语言 ecmascript 笔记经验分享其他

于 2024-08-15 23:54:05 首次发布

本文链接：https://blog.csdn.net/weixin_72280926/article/details/141233595

版权

document.getElementsByTagName('标签名')

（2）通过id获取

document.getElementById（'id的名称'）

2、文本节点的获取

举个栗子

3、兄弟节点

（1）nextSibling:获得下一个兄弟节点

（2）previousSibling:获得上一个兄弟节点

（3）childNodes:父节点获得内部全部的子节点信息

（3）节点追加方法补充（append()和appendChild方法的区别）

这两种方法的主要区别在于参数（即括号里的子节点）的类型不同：

（2）在JS写 onlicke=function(){} 函数

一、什么是加载时间onload

js代码执行时候，需要html&css的支持，就让html先执行(先进入内存)，js代码后执行。onload在页面加载完之后执行，写法如下（js代码写在函数内部）：

window.onload = function() {

}

通俗来说，就是不管Javascript代码被写在<body>的前面还是里面都是先执行别的代码，最后才来执行onload里面的代码。

dom操作就是用JS实现对html标签的增删改查。

二、各种节点的获取方法

1、元素节点的获取

（1）通过标签名获取：

document.getElementsByTagName('标签名')

通过这种方法得到的是一个数组，可以通过下标（从0开始）来拿到自己想要的节点。

var inputs = document.getElementsByTagName('input');
console.log(inputs);
console.log(inputs[1]);

（2）通过id获取

document.getElementById（'id的名称'）

因为id是唯一的所以通过这种方法获取的节点也是唯一的。

var input = document.getElementById('username');
console.log(input);

2、文本节点的获取

需要借助外部的元素节点再获得其内部的文本节点.

举个栗子

有如下内容：<div>hello</div>

则要获得文本节点需要借助div元素节点再获得其内部的文本节点，具体写法如下：

var dvnode = document.getElementsByTagName(‘div’)[0];
dvnode.firstChild;

//(或调用lastChild)，即获得div节点的第一个孩子节点（因为这里只有一个孩子所以也可以调用lastChild）。

firstChild.wholeText (获取这个文本节点的字符串形式)

3、兄弟节点

续上面，父节点通过firstChild / lastChild,获得第一个/最后一个子节点后再找到孩子节点的兄弟节点，其中Sibling 是 ”兄弟姐妹“ 的意思，具体有如下几个方法：

（1）nextSibling:获得下一个兄弟节点

（2）previousSibling:获得上一个兄弟节点

（3）childNodes:父节点获得内部全部的子节点信息

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function() {
				var ull = document.getElementsByTagName('ul')[0];
				console.log(ull.childNodes);  //输出父节点的全部孩子节点
				console.log(ull.childNodes.length); //全部孩子节点的个数
				console.log(ull.firstChild); //输出第一个孩子节点
				console.log(ull.firstChild.nextSibling);  //输出第一个孩子节点的下一个兄弟节点
				console.log(ull.lastChild); //输出最后一个孩子节点
				console.log(ull.lastChild.previousSibling); //输出最后一个孩子节点的前一个兄弟节点
			}
		</script>
	</head>
	<body>
		<ul>
			<li>red</li>
			<li>blue</li>
			<li>green</li>
		</ul>
	</body>
</html>

4、父节点

获取父节点：节点.parentNode

获取当前结点的父节点就调用一次，获取当前结点的父节点的父节点就调用两次，依次类推：

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
	</head>
	<body>
		<ul>
			<li>red</li>
			<li>blue</li>
			<li>green</li>
		</ul>
		
		<script type="text/javascript">
			window.onload = function() {
				var blue = document.getElementsByTagName("li")[1];
				console.log(blue); //li
				console.log(blue.parentNode); //ul
				console.log(blue.parentNode.parentNode); //body
				console.log(blue.parentNode.parentNode.parentNode); //html
				console.log(blue.parentNode.parentNode.parentNode.parentNode); //document
				console.log(blue.parentNode.parentNode.parentNode.parentNode.parentNode); //null
				//console.log(blue.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode); //再写这一行就报错，因为不能是null.parentNode

			}
			
		</script>
	</body>
</html>

三、对节点进行操作

1、属性值操作

（1）获取属性值

itnode.属性名称; //只能操作规定好的属性

itnode.getAttribute(属性名称); //规定的和自定义的属性都可以获取

（2）设置属性值

itnode.属性名称 = 值; //只能操作w3c规定的属性，不能操作自定义的属性

itnode.setAttribute(名称，值); //规定的和自定义的都可以设置

//获取操作
console.log(baidu.addr);// undefined，这里addr是我自定义的属性，采用这种方法不能获取
console.log(baidu.target);//规定的属性采用这种方法可以获取
    //下面这种方法不管是自定义的还是规定的属性都能获取
console.log(baidu.getAttribute('addr'));
console.log(baidu.getAttribute('target'));

//设置属性，同样只有.setAttribute才能设置自定义的属性
baidu.addr = 'tianjin'; 
baidu.className = 'orange'; //这里的clas属性特殊，必须要写成.className而不能是.class
				
baidu.setAttribute('addr', 'shanghai');
baidu.setAttribute('class', 'orange');

2、节点创建和追加

（1）节点创建

元素节点：document.createElement(tag标签名称);
文本节点：document.createTextNode(文本内容);
属性设置：node.setAttribute(属性名称，属性的值);

（2）节点追加

父节点.appendChild(子节点);
父节点.insertBefore(newnode,oldnode); //newnode放到oldnode的前边
父节点.replaceChild(newnode,oldnode); //newnode替换掉oldnode节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
		<ul>
			<li mean='热情'>red</li>
			<li mean='冷静'>blue</li>
			<li mean='生机'>green</li>
		</ul> 
		--> <!--用下面的代码动态创建这个列表-->
		
		<script type="text/javascript">
			window.onload = function () {
				var colors = ['red', 'blue', 'green'];
				var means = ['热情', '冷静', '生机'];
				var ul = document.createElement("ul");
				for (var i = 0; i < colors.length; i++) {
					var li = document.createElement("li");
					li.setAttribute('mean', means[i]);
					var txt = document.createTextNode(colors[i]);
					li.appendChild(txt);
					ul.appendChild(li);
				}
				document.body.appendChild(ul);
			}
		</script>
	</body>
</html>

（3）节点追加方法补充（append()和appendChild方法的区别）

上面说到节点追加的方法：父节点.appendChild(子节点);

这里添加一种方法：父节点.append(子节点)

这两种方法的主要区别在于参数（即括号里的子节点）的类型不同：

append方法的参数可以是一个或多个参数，这些参数可以是节点、字符串或 NodeList 对象。
appendChild方法的参数只能是Node 对象，而且不接受多个参数。

这里还有一个区别（我觉得一般不用考虑）：

append 方法不会从它们原始的位置移除节点，而是复制它们，然后将复制的副本添加到调用 append 方法的元素中。
而appendChild方法，如果所添加的节点已经存在于文档中，就会先将其从原始位置移除，然后添加到新的位置。

3、节点删除

父节点.removeChild(子节点);

//移除blue
var blue = document.getElementsByTagName('li')[1];
blue.parentNode.removeChild(blue);

四、点击事件

通过鼠标、键盘对页面所做的动作就是事件。事件一旦发生需要有事件处理，该处理称为“事件驱动”，事件驱动通常由函数担任，常见事件有：

onclick //点击事件，点击时触发
onmouseover //鼠标移到指定元素上就触发
onmouseout //鼠标从指定元素上移走时触发
onkeyup //当用户释放键盘上的一个键时触发
onkeydown //当用户按下键盘上的一个键时触发
onblur //当元素失去焦点时触发
onfocus //当元素获得焦点时触发
onsubmit //当表单被提交时触发

写触发事件有两种方法：

（1）在标签内写onclick事件

<input id="btnId" type="button" value="Press Me" onclick="alert('thanks');">

（2）在JS写 onlicke=function(){} 函数

var btn = document.getElementById('btnId');
btn.onclick = function () {
alert('thanks');
}

完结！！！！睡觉

YNG973

关注

18
点赞
踩
30

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫