This is the 10th day of my participation in Gwen Challenge

What is DOM

DOM(Document Object Model) is a W3C (World Wide Web Consortium) standard, the Chinese name is Document Object Model.

DOM can be used to complete the acquisition, access, tag attributes and style Settings of all elements in HTML documents.

DOM HTML refers to the objects and attributes provided for manipulating HTML documents, as well as methods for accessing them.

DOM node

<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>
Copy the code

Using the code above, we can briefly describe what the root node, child node, parent node, and sibling node are.

  • Based on the above code, we can well understand that the tag is the root node of the entire document. And this root node is unique.
  • The child node refers to the next node of the node, for example, the sum above is the child node, is the child node.
  • A parent node is the previous node of a node, and the nodes above are the parents of their children.
  • Sibling nodes have a common parent, for example, and nodes are siblings of each other.

HTML element manipulation

1. Get elements

The Document and Element objects provide methods and attributes to get the Element to operate on

<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>
Copy the code

The result is:

3. Use the properties and methods of the Document object

Example: Run document.body to get the body element

Example: methods that use Element objects

<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>
Copy the code