浅述JS的DOM | JS-一一网

这是我参与更文挑战的第10天，活动详情查看：更文挑战

一、什么是DOM

DOM(Document Object Model) 是 W3C（万维网联盟）的标准,中文名是文档对象模型。

利用DOM可完成对HTML文档内所有元素的获取、访问、标签属性和样式的设置等操作。

DOM HTML指的是为操作 HTML 文档而提供的的对象和属性，以及访问它们的方法。

二、DOM 节点

<html>
	<head>
		<title> -title- </title>
	</head>
	<body>
		<p>hello world!</p>
		<script>
			function f1() {
				var a;
				a = b = c = 9;
				console.log('a'+a);
				console.log('b'+b);
				console.log('c'+c);
			}
			f1();
			console.log('cc'+c);
			console.log('bb'+b);
		</script>
	</body>
</html>
复制代码

通过在上面的代码，我们来简述一下什么是根节点、子节点、父节点、兄弟节点。

根据上面的代码，我们可以很好的理解标签是整个文档的根节点。并且这个根节点是唯一的。
而子节点指的是该节点的下一个节点，例如上面的和是的子节点，是的子节点。
父节点就是某一个节点的上一个节点，上面的节点就是它们的子节点的父节点。
兄弟节点都有一个共同的父节点，例如和节点是互为兄弟节点的。

三、 HTML元素操作

1.获取元素

我们可以通过Document和Element对象提供的方法和属性去获取要操作的元素

<html>
	<head>
		<title> -title- </title>
	</head>
	<body>
		<p name="xk"> xkgf </p>
		<p class="a">class </p>
		<p id="1">hello world!</p>
		<script>
			console.log(document.getElementById("1"));
                  console.log(document.getElementsByClassName("a"));
			console.log(document.getElementsByName("xk"));
		</script>
	</body>
</html>
复制代码

结果是：

3.利用document对象的属性和方法

例：运行document.body 可以获取body元素

例：利用Element对象的方法

<html>
	<head>
		<title> -title- </title>
	</head>
	<body id="body">
		<p name="xk"> xkgf </p>
		<p class="a">class </p>
		<p id="1">hello world!</p>
		<script id="2">
			console.log(document.getElementById("1"));
            console.log(document.getElementsByClassName("a"));
			console.log(document.getElementsByName("xk"));
            var a = document.getElementById('body').getElementsByTagName('p');
            console.log(a);
		</script>
	</body>
</html>
复制代码