Home > Article > Web Front-end > Analysis of DOM objects in JavaScript
Analysis of DOM objects in JavaScript
- 不言Original
- 2018-07-14 16:21:091319browse
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 AttributeUse 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>
3.DOM operation CSSChange 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>
css/Object_CSS. css
.p{
background-color: blueviolet;
height: 200px;
width: 300px;
}
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>
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 jsCodeCustomized 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!