Common methods of adding, deleting, modifying and checking HTML DOM with JavaScript

Time:2020-11-23

This paper describes the common methods of adding, deleting, modifying and querying HTML DOM by JavaScript. For your reference, the details are as follows:

First of all, JS can modify all elements and attributes in HTML. It can also change CSS style, and can listen to all events and respond. This note mainly records how to add, delete, modify and query HTML elements.

1 find DOM

The first method is the most commonly used method: search by ID:

<!DOCTYPE html>
<html>
<head>
  <title>learn javascript</title>
</head>
<body>
  <p>Can you find me? </p>
  < button onclick = "changetext()" > click change text < / button >
</body>
{{--js--}}
<script>
  function changeText(){
    document.getElementById("demo").innerHTML = "ok";
  }
</script>
</html>

Note: when we write HTML, try to ensure that the ID is not repeated.

The second method: search by tag name

<!DOCTYPE html>
<html>
<head>
  <title>learn javascript</title>
</head>
<body>
  <div>
    <p>hi man</p>
  </div>
  < button onclick = "changetext()" > click change text < / button >
</body>
{{--js--}}
<script>
  function changeText(){
    var element = document.getElementById("demo");
    var p = element.getElementsByTagName("p");
    p[0].innerHTML = "yo";
  }
</script>
</html>

We get the div with ID demo, and then there is a P element without ID attribute in div, so we can find it through tagName.

The third method: through the class to find

<!DOCTYPE html>
<html>
<head>
  <title>learn javascript</title>
</head>
<body>
  <div>
    <p>hi man</p>
  </div>
  < button onclick = "changetext()" > click change text < / button >
</body>
{{--js--}}
<script>
  function changeText(){
    var element = document.getElementsByClassName("demo")[0];
    var p = element.getElementsByTagName("p");
    p[0].innerHTML = "yo";
  }
</script>
</html>

2 delete DOM

<!DOCTYPE html>
<html>
<head>
  <title>learn javascript</title>
</head>
<body>
  <div>
    <p>hi man</p>
    <p>hello</p>
  </div>
  < button onclick = "changetext()" > click change text < / button >
</body>
{{--js--}}
<script>
  function changeText(){
    var div1 = document.getElementById("div1");
    var p2 = document.getElementById("p2");
    div1.removeChild(p2);
  }
</script>
</html>

3. Add DOM

<!DOCTYPE html>
<html>
<head>
  <title>learn javascript</title>
</head>
<body>
  <div>
    <p>hi man</p>
    <p>hello</p>
  </div>
  < button onclick = "changetext()" > click change text < / button >
</body>
{{--js--}}
<script>
  function changeText(){
    //Create P label
    var p = document.createElement("p");
    //Create a text node
    var node =  document.createTextNode ("new p tag");
    //Create properties
    var attr = document.createAttribute("class");
    attr.value = "class p";
    //Add text node to tag p
    p.appendChild(node);
    //Add attributes to the P tag
    p.setAttributeNode(attr);
    var div = document.getElementById("div1");
    //Add P tag
    div.appendChild(p);
  }
</script>
</html>

4 modify DOM

4.1 modify the content of DOM

<!DOCTYPE html>
<html>
<head>
  <title>learn javascript</title>
</head>
<body>
  <div>
    <p>hi man</p>
    <p>hello</p>
  </div>
  < button onclick = "changetext()" > click change text < / button >
</body>
{{--js--}}
<script>
  function changeText(){
    var element = document.getElementById("p1");
    element.innerHTML  ="Change the content";
  }
</script>
</html>

4.2 modifying DOM properties

<!DOCTYPE html>
<html>
<head>
  <title>learn javascript</title>
</head>
<body>
  <a href=" https://www.baidu.com "Rel =" external nofollow "> link</a>
</body>
{{--js--}}
<script>
  var element = document.getElementById("link");
  element.href = "https://www.google.com";
</script>
</html>

4.3 modify CSS style of DOM

<!DOCTYPE html>
<html>
<head>
  <title>learn javascript</title>
</head>
<body>
  <p>Text</p>
</body>
{{--js--}}
<script>
  var element = document.getElementById("p1");
  element.style.color = "red";
</script>
</html>

Interested friends can useOnline HTML / CSS / JavaScript code running tool: http://tools.jb51.net/code/HtmlJsRun Test the above code running effect.

More interested readers about JavaScript related content can view the special topic of this website: summary of JavaScript operation DOM skills, summary of JavaScript page element operation skills, complete collection of JavaScript event related operations and skills, summary of JavaScript search algorithm skills, summary of JavaScript data structure and algorithm skills, and summary of JavaScript traversal algorithms and skills Summary of JavaScript errors and debugging skills

I hope this article will help you with JavaScript programming.