Native JS Operation Dom

Find Dom

.querySelectorAll()，它接受包含一个CSS选择器的字符串参数，返回一个表示文档中匹配选择器的所有元素的NodeList元素。

.querySelector(),返回第一个匹配的元素

<div class= "wrap" >    <div class= "header" >header</div></div><script>    var Oheader = Document.queryselector (". Wrap. Header");    Console.log (oheader.innerhtml)/*header*/</script>

Cons: .querySelector()或者.querySelectorAll()获取到 the results are not real-time, so when we dynamically add an element that matches that selector, the element collection is not updated.

    var elements1 = Document.queryselectorall (' div ');     var elements2 = document.getelementsbytagname (' div ');     var newelement = document.createelement (' div ');    Document.body.appendChild (newelement);     // false

Element list

<div class= "wrap" >    <div class= "header" >header</div></div><script>    var Oheader = Document.queryselector (". Wrap");    Console.log (Oheader.children);    Console.log (oheader.firstchild);    Console.log (oheader.lastchild);    Console.log (oheader.previoussibling);    Console.log (oheader.nextsibling);    Console.log (Oheader.parentnode);    Console.log (oheader.parentelement); </script>

modifying class and Attributes

Modifying the class of an element is as simple as the following code:

OHeader.classList.add ("active"); OHeader.classList.remove ("wrap"); OHeader.classList.toggle ( "IsError");

Instance:

OHeader.classList.add ("active");

OHeader.classList.remove ("wrap");

OHeader.classList.toggle ("active");

There are .getAttibute() , .setAttribute() and .removeAttribute() these three methods. These methods directly modify the HTML attributes of the element (as opposed to the DOM property), so the browser will be re-rendered. Browser re-rendering is not only more expensive than setting DOM properties, but it also has unintended consequences.

Add CSS Styles

var oheader = Document.queryselector (". Wrap"= "160px"= "160px"= "Red";

If we want to get the value of the CSS rule, we can pass the .style property. However, it only gets the style that we have explicitly set. To get the calculated style value, we can use it .window.getComputedStyle() . It can get this element and return a cssstyledeclaration. This return value includes the entire style of the element's own and inherited from the parent element.

Modifying the DOM

<div class= "wrap" >    <div class= "header" >header</div></div><script>    var owrap = Document.queryselector (". Wrap");     var oP = document.createelement ("P");     = "Native js";    Owrap.appendchild (OP); </script>

Element properties

Each element has a .innerHTML and .textContent (and .innerText , .textContent like, similar, but there are some important differences.) They represent HTML content and plain text content, respectively. They are writable properties, which means that we can modify the elements and their contents directly:

<div class= "wrap" >    <div class= "header" >header</div></div><script>     var oheader = Document.queryselector (". Header");     = "Active" </script>

Adding markup to HTML like the code above is usually a bad idea because it is a modification to the attributes of the affected element before it is lost (unless we are listening to events that have been modified as HTML attributes and have been bound. Settings .innerHTML can be used for scenarios where you need to completely discard the original and replace it with a new tag, such as server-side rendering. So it's better to add elements like this:

<div class= "wrap" >    <div class= "header" >header</div></div><script>    var owrap = Document.queryselector (". Wrap");         var oP = document.createelement ("P");     = "Native js";    Owrap.appendchild (OP); </script>

But this method will cause two times the browser to re-render-each time the element is added will be rendered once-and the set .innerHTML method will only be re-rendered once. We can solve this performance problem by combining all the nodes in a documentfragment and then adding this fragment to the DOM.

<div class= "wrap" >    <div class= "header" >header</div></div><script>    var Oheader = Document.queryselector (". Header");     var fragment  = document.createdocumentfragment ();     var oP = document.createelement ("P");     = "Active";    Fragment.appendchild (OP);    Oheader.appendchild (fragment)</script>

Event Monitoring

<div class= "wrap" >    <div class= "header" >header</div></div><script>    var Oheader = Document.queryselector (". Header");     function OnClick (event) {        + "got Fred")    }</script>

This is probably the most well-known method of binding event snooping

But this is the method that should usually be avoided. Here, .onclick is the attribute of an element, that is, you can modify it, but you cannot use it to bind other listener functions-you can only assign the new function to it, overwriting the old function's reference.

We can use more powerful .addEventListener() methods to add listeners to various types of events. It accepts three parameters: the event type (for example click ), a function that fires whenever the event occurs on the binding element (this function gets an event object passed in as a parameter) and an optional configuration parameter.

var oheader = Document.queryselector (". Header"); Oheader.addeventlistener ("click",function  (event) {    + "got Fired")})

Native JS Operation Dom