js knowledge points, js DOM programming art second edition

How to view nodes or values under a node

Directly output a node set and peel the node bit by bit on the browser console

for example

console.log(Node.childNodes);//

Writing js is a good idea

  1. Note that it can degenerate smoothly (the browser should have similar functions when it is prohibited to support js)
  2. For backward compatibility, pay attention to whether the browser supports the js statement (although each browser supports js better, there are also some). You can check it before use. It can be written in the front of the function. If it cannot be used, it returns false to end, and you can continue to execute, such as:
//You can't add parentheses. You think that if you add parentheses, you will detect the value of this function
if(document.getElementById){
  console.log("have access to");
}
//This can also be detected, which is better than the previous one. If it is not available, it returns false
function test() {
  if(!document.getElementById){
    return false;
  }
}
  1. For backward compatibility, there is browser sniffing technology, but it is not recommended, because browsers may lie and the amount of code is increasing, but it is being replaced by simpler and more robust object detection technology
  2. Don't ignore the impact of scripts on the overall performance of Web applications. For example, externally introduced Js are usually placed at the back of the document.
  3. When using, you should compress the script, delete the unexpected code, delete comments, spaces, etc., simplify the code, and write the variable name simply. Therefore, there can be two script codes, one compressed and one working, and add min(abc.min.js) after the simplified file name
  4. When adding a node, it defaults to the last child node. After you insert data into an element with js, you don't think that the later inserted element will squeeze the first inserted element back.
  5. When writing functions, try to be as abstract as possible and replace specific values with parameters. This can be more abstract and general, and can be applied to other elements. The latter one is more general than the previous one
function setPosition() {
  if(!document.getElementById){
    return  false;
  }
  if(!document.getElementById("one")){
    return false;
  }
  let node=document.getElementById("one");
  node.style.position="absolute";
  node.style.top="20px";
  node.style.left="20px";

--------------------------------------------------------

function setPosition(elementID,top,left,position="absolute") {
  if(!document.getElementById){
    return  false;
  }
  if(!document.getElementById(elementID)){
    return false;
  }
  let node=document.getElementById(elementID);
  node.style.position=position;
  node.style.top=top;
  node.style.left=left;

}
  1. If the tag in html is not the tag of the main content, but the tag added to realize the JS function, we can use js to generate the tag to prevent the confusion of the tag.
    h3 and image1 of the following code can be generated with js, because these two elements are only used to display the information of li above.
<div>
  <section>
    <h1>imageList</h1>
    <ul id="imageList">
      <li><a title="1111" href="../image/u=1642702903,1895459834&fm=26&gp=0.jpg" >Picture 1</a></li>
      <li><a title="2222" href="../image/u=825479939,1378551285&fm=26&gp=0.jpg" >Picture 2</a></li>
    </ul>
    <h3 id="imageDescription"></h3>
    <img id="image1" src="">
  </section>
</div>

1: let and var

  1. let can declare variables with block level scope
  2. JS has only function scope and global scope, but no block level scope, {} (block level scope) can not limit the access scope of var declared variables, but let can be limited in blocks.

var

{
  var s=2;
}
console.log(s);//2

let

{
  let s=2;
}
console.log(s);//s is not defined

2: Little knowledge

  1. JS has only function scope and global scope, but no block level scope, {} (block level scope) can not limit the access scope of var declared variables, but can limit let.
  2. Typeof object returns object, and typeof function returns function
  3. console.log(typeof showImage); No parentheses
  4. Adding a text node and an element node in the same element node are added at one time, for example: < p > this is < EM > your < / EM > food < / P > p - > this... - > em - > food
  5. If you want to complete an event, but you can't use global variables and local variables, you can use attributes, because you can create an attribute in js, because js allows you to create a new attribute.
function setPosition(elementID,top,left,position="absolute") {
  if(!document.getElementById){
    return  false;
  }
  if(!document.getElementById(elementID)){
    return false;
  }
  let node=document.getElementById(elementID);
  node.style.position=position;
  node.style.top=top;
  node.style.left=left;
  node.move=1;//A new attribute move is created for the node element

}

3: Difference between = = and = = =

==The operator first casts the values on both sides and then compares whether they are equal, while the = = = operator does not type== The operator only needs to compare whether two values are equal, while the * * = = = operator requires not only equal values, but also the same type * *= And== similar.

4: DOM interpretation

D:document
O:object object
M: model

5: childNodes

  1. When returned, all child nodes of a node are sometimes different from the number of nodes we think, which is much larger.
  2. Because in DOM, in addition to element nodes and text nodes, everything in the document can be regarded as a node, or even a space.
    How to solve it?
    We can use it with TypeNode
    The nodeTyPe attribute value of the element node is 1.
    The nodeTyPe attribute value of the attribute node is 2.
    The nodeType property value of the text node is 3.

6: nodeValue

  1. For document nodes, nodeValue returns null. For text, comment, and CDATA nodes, nodeValue returns the text content of the node. For attribute nodes, it returns the attribute value of the attribute
  2. For get text, the child node under the get node is text
  3. If no value is set in the text node of the node, nodeValue is undefined and an error will be reported.

7: window.open

Introduction: open another window
Function: window. Open (URL, name, features)
url: jump url
**Name: * * window name
**feature: * * format of the open window.

Take Google browser as an example

  1. If you don't add name, you will open a new label. It seems that the feature doesn't work
  2. Adding name reopens a new window with feature style
  3. After adding name, changing the url will only overwrite the contents of the old window and will not open another window (only it will be closed and open)

8: Insert node appendChild

The code is not finished. I inserted a node,
In the past, I thought that the later inserted ones would squeeze the first inserted ones down

  1. The one inserted first is above
  2. imageList.appendChild(p); imageList.appendChild(img);
  3. imageList.appendChild(img); imageList.appendChild(p);

9: AJAX

  1. The core object of ajax is XMLHttpRequest
  2. Note that the same origin policy is used because ajax can only access data belonging to the same domain
  3. After sending the request (send()), XMLHttpRequest will not stop waiting for the returned result, but will continue to execute.
  4. Its application mainly depends on the server, not the client

10: if judgment correlation

  1. If you want to use undefined as a conditional judgment, you need to use typeof, because in this way, you will not report undefined errors, but convert the errors into strings for comparison
 if(typeof dl.childNodes[0]!=="undefined"){
     return false;
   }

Some html tags

  1. A newline is added before and after the blockquote element, and the outer margin is increased.
<blockquote>
This is a long quotation. This is a long quotation. This is a 
aassdd
</blockquote>
  1. Use Alt + accessKey (or Shift + Alt + accessKey) to access the element with the specified shortcut key,
<a href="#" accesskey="c">ssss</a>

These are some popular shortcut keys

Acquisition of style

  1. You can't get css's external style js. You can only get inline (embedded) styles
  2. Get the style of the middle generation minus sign and convert it into hump naming in js, such as * * CSS * * font size: 20em; JSconsole.log(p.style.fontSize);

Gets the next element node

 function getNest(node) {
    if(node.type===1){
      return node;
    }if(node.nextSibling){
      return getNest(node.nextSibling);
    }
  }

Color change of table rows

  function settingTable() {
    let tables=document.getElementsByTagName("table");
    for(let i=0;i<tables.length;i++){
      let table=tables[i];
      let rows=table.getElementsByTagName("tr");
      let odd=true;
      for(let j=0;j<rows.length;j++){
        if(odd===false){
          rows[j].style.background="red";
          console.log(rows[j]);
          odd=true;
        }else {
          odd=false;
        }
      }
    }
  }

Function note

  1. SetTimeout (function, time). Pay attention to the blank number of the function, otherwise an error will occur. The function still runs, but there is no time limit
    let removeTime=setTimeout("movePosition(img)",4000);

Some new H5 features


form

video

em,px,rem differences

px means "absolute size". It is more accurate to use px to set the font size and the width and height of elements. The disadvantage of px is that it can not adapt to the changes caused by browser scaling, so it is generally not used for responsive websites.

EM represents the relative size, which will change according to the screen size of the corresponding equipment. Its font size relative to the parent container. The default font size of the browser is 16px. If font size is not set in html, the default font size is 16px, which is equal to 1em. For example, if your current screen is 38601080 and font size is set to 50px, 1em is equal to 50px; Now the screen resolution becomes 1366768, so the font size should be 768 * 50 / 1080, about 35.55px, and 1em is equal to 35.55px.

rem also represents the relative size, and its reference object is the font size of the root element. Unlike em, it is not affected by the font size of the parent container
Em, PX and rem are the original articles of the blogger "Bu Juyi"

rem,px,rem

Tags: Javascript html5 html

Posted on Tue, 23 Nov 2021 21:13:45 -0500 by Spudgun