In the previous section, we talked about most node operations. This section complements some node operations and describes some optimization solutions to browser rendering problems
Get element related nodes
<body>
<div class="item">
<h3 class="title">123</h3>
<p class="des">456</p>
<p class="price">789</p>
</div>
<script>
var oItem = document.querySelector(".item");
var oTitle = oItem.querySelector("h3");
var itemChild = oItem.children;//Gets all child elements of the current object and returns them as a collection
console.log(itemChild);
console.log(oItem.childNodes);//Get the list of nodes in the element. Note that the newline character will also be treated as a text node
console.log(oItem.firstChild);//Get the first child node of the element (label and text)
console.log(oItem.firstElementChild);//Get the first child element of the element (only refers to the label, excluding the text node)
console.log(oItem.lastChild);//Get the last child node of the element (label and text)
console.log(oItem.lastElementChild);//Get the last child element of the element (only refers to the label, excluding the text node)
//Node Element element
console.log(oTitle.parentElement);//Get element parent element
console.log(oTitle.parentNode);//Also get parent element
console.log(oTitle.nextElementSibling);//Next sibling element
console.log(oTitle.nextSibling);//Next sibling node (including text node)
console.log(oTitle.previousElementSibling);//Previous sibling element
console.log(oTitle.previousSibling);//Previous sibling node (including text node)
</script>
</body>
Add node
<script>
var oWrap = document.createElement("div");
//The parameter is tagName, that is, the tag name
oWrap.className = "wrap";//Add class name
oWrap.innerText = "text";//Add some text
oWrap.style.fontSize = "30px";//Set font size
oWrap.style.color = "red";//Set color
//Add labels to the body
document.body.appendChild(oWrap);
//Add another p tag to the added div tag
var oP = document.createElement("p");
oP.innerText = "I am p label";
oWrap.appendChild(oP);
//Add nodes with innerHTML
var elementStr = '<div class="erao"><p style="color: red; font-size: 30px;">I am p yes wrap Child element of</p></div>';
document.body.innerHTML = elementStr;
</script>
Reflow and redraw
The order in which CSS is written affects
Example:
span {
width: 200px;
height: 200px;
margin: 10px;
border: 2px solid red;
background-color: #368;
}
In the css code above, the span tag will not be rendered in the HTML page because the span tag is a line level element and cannot set the width and height values. If we write a line position: absolute; at the bottom;, This will cause the browser to switch computing mode. The browser reads the css code line by line from top to bottom. When it does not read this line of code, the browser first uses the calculation mode of line level elements to read this css code. When it reads position: absolute; In this line of code, the browser implicitly changes the display mode of span to block, and naturally switches the calculation mode to the calculation mode of block level elements, and then reads this css code from the beginning to render.
Node rendering optimization
An html page is a whole. When a part of the whole is changed, the whole page will be rendered again. If we add labels every time, we will re render every page, and the performance will drop sharply
The solution is: Fragment temporary container
Example:
drawDom(3000, 'div');
function drawDom(num, tagName) {
var vDom;
for (var i = 0; i < num; i++) {
vDom = document.createElement(tagName);
document.body.appendChild(vDom); //Repeat N times, rendering one label at a time
}
}
As shown in the above code, when we render 3000 labels one by one, it takes more than a second to open the local page. If it is online, the performance is even worse, so we need to use the Fragment temporary container. If the page rendering is equivalent to the goods on the shelf, the appendChild method is equivalent to sending the goods produced from the factory to the store immediately to put on the shelf, You need to rearrange the goods every time. When using Fragment, it is equivalent to placing a large box between the factory and the shelf. After the factory produces dependent goods, it first places the goods in the Fragment. When the required quantity of goods is produced, it directly mentions the large box of Fragment to the store and puts the goods inside on the shelf at one time. At this time, it only needs to arrange the goods once, The rendering performance is greatly improved.
Modified code:
drawDom(3000, 'div');
function drawDom(num, tagName) {
var vDom;
var fragment = document.createDocumentFragment();//Document fragment
for (var i = 0; i < num; i++) {
vDom = document.createElement(tagName); //
fragment.appendChild(vDom); //Put it in the temporary container fragment
}
document.body.appendChild(fragment); //Render N at a time
}
It should be noted that innerHTML also has the same problem. The solution is not to use innerHTML to change every time, but to change it with a string. After all the changes are completed, it can be directly assigned to innerHTML, which can also greatly improve the performance
Example:
drawHtml(3000, 'div');
function drawHtml(num, tagName) {
var eleStr = '';
for (var i = 0; i < num; i++) {
eleStr += '<' + tagName + '></' + tagName + '>';
}
document.body.innerHTML = eleStr;
}