Analysis of DOM objects in JavaScript

不言

Release： 2018-07-14 16:21:09

Original

1368 people have browsed it

1. Introduction to DOM

When a web page is loaded, the browser will create the document object model of the page, that is, DOM (Document Object Model ).

2.DOM operation HTML

## 2.1 Change the HTML output stream

Do not use document.write() after the document has been loaded. Will overwrite the document

2.2 Find the element

Find the HTML element

by id Through the tag Find the HTML element

2.3 Change the HTML content

Use the attribute: innerHTML

## 2.4 Change the HTML Attribute

Use attributes: attribute

##Object_HTML.html

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--修改-->
        <p id="pid">Hello</p>
        <button onclick="demo()">按钮</button>
        <script>
            function demo(){                var nv=document.getElementById("pid");
                nv.innerHTML="World";
                document.getElementsByName("p");//p如果相同，相同元素的第一个            }        </script>
        <!--修改属性-->
        <br />
        <a id="aid" href="http://www.baidu.com">百度</a>
        <button onclick="demobd()">跳转</button>
        <script>
            function demobd(){
                document.getElementById("aid").href="index.html";
            }        </script>
        
        <br />
        <img id="iid" src="img/294224.jpg" height="200" width="300"/>
        <button onclick="demoimg()">切换</button>
        <script>
            function demoimg(){
                document.getElementById("iid").src="img/308048.jpg";
            }        </script>
        
    </body></html>

Copy after login

3.DOM operation CSS

Change CSS through DOM object

Syntax: document .getElementById(id).style.property=new style

Object_CSS.html

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/Object_CSS.css" />
    </head>
    <body>
        <p id="p" class="p">
            hello        </p>
        <button onclick="demo()">按钮</button>
        <script>
            function demo(){
                document.getElementById("p").style.background="blue";
                document.getElementById("p").style.color="white";
            }        </script>
        
    </body></html>

Copy after login

css/Object_CSS. css

.p{
    background-color: blueviolet;
    height: 200px;
    width: 300px;
}

Copy after login

4.DOM EventListener 4.1 DOM EventListenter

## Method: addEventListener()

removeEventListener()

4.2 addEventListener()

Method is used to add a handle to a specified element

4.3 removeEventListener()

Remove method is added Handle

EventListener.html

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <button id="btn">按钮</button>
        <script>
            document.getElementById("btn").addEventListener("click",function(){
                alert("hello");
            });        </script>
        
        <button id="btnjb">句柄</button>
        <script>
            var x=document.getElementById("btnjb");
            x.addEventListener("click",hello);
            x.addEventListener("click",world);
            x.removeEventListener("click",hello);            function hello(){
                alert("hello");
            }            function world(){
                alert("world");
            }        </script>
    </body></html>

Copy after login

The above is the entire content of this article, I hope it will help everyone learn Helpful, please pay attention to the PHP Chinese website for more related content!

Related recommendations:

Parsing of built-in objects in js

Code

Customized in js Parsing of objects

The above is the detailed content of Analysis of DOM objects in JavaScript. For more information, please follow other related articles on the PHP Chinese website!