Manipulate DOM elements

4, Operate on nodes
1. Find node
a. Use the relationship between nodes to get the root node: document.documentElement;
b. Take it by way
document.getElementById();//id name is rarely used in actual development. In general, class id is only used in selectors, and it can't be too dependent on id only in the top level layer

document.getElementsByTagName(); / / tag name
document.getElementsByClassName(); / / class name
document.getElementsByName();//name property value, generally not used
document.querySelector();//css selector pattern, return the first element matching the pattern, and the result is an element; if no matching element is found, return null
document.querySelectorAll()//css selector pattern, returns all elements matching the pattern, and the result is an array of classes

var div1 = document.getElementById("div1");
var p2 = document.getElementsByTagName("p");
var div2 = document.getElementsByClassName("div2");
var div3 = document.getElementsByName("div3")
var div4 = document.querySelector(".div4");
var div5 = document.querySelectorAll(".div5");

2. To delete a node:
removeChild(): use parent node to delete child node

var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);

The remove() method is less common than removeChild(), but very simple. This method does not need to call its parent node, but directly uses the remove() method on the current node to delete the node without return value
The remove() method is often used to delete element nodes and text nodes, not attribute nodes

var parent=document.getElementById("div1");
var child=document.getElementById("p1");
child.remove();

3. Create element node
document.createElement(): create a label node

 var oDiv = document.createElement("div");

All nodes have an ownerDocument attribute, which points to the document node that represents the entire document. When using the createElement() method to create a new element, the ownerDocument attribute is also set for the new element

4. Create attribute node
1.document.write is not commonly used because it will overwrite the original page content
Principle of coverage: by default, a document flow will be formed when the page is loaded. After all the contents of the page are loaded, the document flow (default) will disappear
Starting from a certain time, when you call document.write to add content to the page, a new document flow will be formed, which will overwrite the original default document flow
Do not overwrite: default document is not closed
Overwrite: the default document has been closed, forming a new document flow
2.innerHTML is not commonly used (there is little difference between performance problems within 100)
3. Official recommendation: document.createElement("tag name");
Object. Property = property value
Object. SetAttribute (attribute name, attribute value)
Object. Getattribute (attribute name, attribute value)
Features: 1. Empty label is created by default
2. The created value exists in memory and needs to be added to the page manually
1. Create an empty label
var h2 = document.createElement("h2");
console.log(h2);
Set label properties
h2.innerHTML = "I am the h2 tag";
3. Add to page
document.body.appendChild(h2);

<button id="btn">Click Add</button>
		
		<script type="text/javascript">
			var btn = document.getElementById("btn");
			
			btn.onclick = function(){
				
				//Use innerHTML to add 100 tags to the page / / create 100 Tags: 15ms create 1000: 1.2 seconds
				
//				console.time();
//				
//				for(var i = 0;i < 1000;i++){
//					//Direct assignment will overwrite the previous content. If you want to add it, you need to use+=
//					Document. Body. InnerHTML + = "< p > I am the" + (i+1) + "P tag";
//				}
//				
//				console.timeEnd();
				
				//Use document.createElement to add / / create 100:0.6ms create 1000:3ms
				console.time();
				
				for(var i = 0;i < 1000;i++){
					var p = document.createElement("p");
					p.innerHTML = "I am the first."+(i+1)+"individual P Label";
					document.body.appendChild(p);
				}
				
				console.timeEnd();
				
			}
		</script>

performance comparison
Use innerHTML to add 100 tags to the page / / create 100 Tags: 15ms create 1000: 1.2 seconds
Use document.createElement to add / / create 100:0.6ms create 1000:3ms

1. Operation content
1.innerHTML is used to set or get the content in the object start and hormone tags (identify html tags)
2.innerText is used to set or get the content in the object start and hormone tags (IE)
textContent is used to set or get the content in the object start and hormone tags (FF)
3.outerHTML is used to set or get the contents of the starting and hormone tags including this object (identify html tags)
outerText is used to set or get the contents of the starting and hormone labels including this object

	<body>
		<style type="text/css">
			button{
				border: 1px solid red;
			}
		</style>
		<div class="contain">
			1
			<span>
				2
			</span>
			3
			<p>
				4
			</p>
		</div>
		<input type="button" name="" id="" class="bu" value="Button" />
		<script type="text/javascript">
			var bu = document.getElementsByClassName("bu");
			bu.onclick = function(){
				console.log(event.type);
			}
			var container = document.querySelector("body");
			console.log("textContent The content is:"+container.textContent);
			//Through the textContent attribute, you can get the text of the specified node and the text content of the descendant nodes contained in the specified node, as well as the content of < script > and < style > elements (here, it is not text but CSS style code and JavaScript code)
    	    console.log("innerText The content is:"+container.innerText);
    	    //IE introduces the node.innerText attribute, which will get the text of the specified node and the text in the descendant node, but not the content in < style > and < script >.
    	    console.log("innerHTML The content is:"+container.innerHTML);
    	    //innerHTML just as the name implies is to get the HTML content within the specified element.
    	     console.log("outerHTML The content is:"+container.outerHTML);
    	     //outerHTML is to get the HTML content including tags within the specified element.
    	      console.log("outerText The content is:"+container.outerText);
    	       // //outerText is to get the HTML content including tags within the specified element.
		</script>
	</body>

2. Operation properties
1. Direct operation
Object. Properties
Object. Property = value (set, get, add property (property value))

Point syntax operation element notice
1. You can only get in line attributes, not out of line attributes
2. Get string with unit
3. Properties can be obtained or modified
4. Use classname to get the class name. Class is the keyword

Features of point syntax to obtain elements:
1. Standard properties can be obtained
2. You can get the attributes dynamically added by point syntax
3. Unable to get in line custom attribute
4. Unable to get out of line properties

<style type="text/css">
			#box{
				background-color: #0f0;
				height: 300px;
			}
			.two{
				margin: 30px;
			}
			.one{
				color: #00FF00;
			}
		</style>
	
		<div id="box" class="one" style="width: 100px; background-color: green;">I am div Box</div>
		<h1 id="h1">I'm the title tag</h1>
		<div id="box" class="one" www="sss" style="background-color: yellow; width: 100px;">
			//I'm a div box
		</div>
		
		<script type="text/javascript">
			
			var box = document.getElementById("box");
			
			console.log(box.id);
			console.log(box["id"]);
			console.log(box.className);
			console.log(box.style);
			console.log(box.style.width);
			console.log(box.style.height);//If it doesn't get an empty string
			console.log(box.style.backgroundColor);
			box.style.backgroundColor = "red";
			//Direct assignment will overwrite the original style 
			//box.className = "two";
			
			//Need to save 2 class name string connector + need to have a space
			box.className += " two";

			var box = document.getElementById("box");
			box.aaa = "bbb";
			console.log(box.aaa);//Can get the properties added dynamically by point syntax
			console.log(box.www);//undefined unable to get in line custom properties
			console.log(box.style.height);//Empty string cannot get out of line property
		</script>
  1. Attribute attribute
    Get element attribute: element. getAttribute("attribute name");
    Set element attribute: element. setAttribute("attribute name", attribute value);
    Remove element attribute: element. Removeaattribute ("attribute name");
    Characteristics of attribute getting elements
    1. Standard properties can be obtained
    2. You can get the inline custom attribute (mainly used to operate the inline custom attribute)
    3. Unable to get out of line properties
    4. Unable to get the attribute dynamically added by point syntax
			console.log(box.getAttribute("id"));
			console.log(box.getAttribute("www"));
			console.log(box.getAttribute("style.height"));//null
			console.log(box.getAttribute("aaa"));//null

			//Set element properties
			box.setAttribute("www","123");
			
			//Remove element attributes
			box.removeAttribute("class");//The parameter of removeaattribute is a string. You can use "class"
Published 17 original articles, won praise 1, visited 242
Private letter follow

Tags: Attribute Javascript IE less

Posted on Sun, 15 Mar 2020 03:50:22 -0400 by steve448