点击下载
本文文档

当前位置：首页 - 科技 - 知识百科 - 正文

对于JavaScript中DOM对象的分析

来源：动视网责编：小采时间：2020-11-27 19:33:39

对于JavaScript中DOM对象的分析

对于JavaScript中DOM对象的分析:1.DOM简介当网页被加载时，浏览器会创建页面的文档对象模型，即DOM（Document Object Model）。2.DOM操作HTML 2.1 改变HTML输出流不要在文档加载完成之后使用document.write（）。会覆盖该文档 2.2 寻找元素通过id找到HTML元素通过标签找到

推荐度：

点击下载本文 文档为doc格式

导读对于JavaScript中DOM对象的分析:1.DOM简介当网页被加载时，浏览器会创建页面的文档对象模型，即DOM（Document Object Model）。2.DOM操作HTML 2.1 改变HTML输出流不要在文档加载完成之后使用document.write（）。会覆盖该文档 2.2 寻找元素通过id找到HTML元素通过标签找到

1.DOM简介

当网页被加载时，浏览器会创建页面的文档对象模型，即DOM（Document Object Model）。

2.DOM操作HTML

2.1 改变HTML输出流

不要在文档加载完成之后使用document.write（）。会覆盖该文档

2.2 寻找元素

通过id找到HTML元素

通过标签找到HTML元素

2.3 改变HTML内容

使用属性：innerHTML

2.4 改变HTML属性

使用属性：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操作CSS

通过DOM对象改变CSS

语法：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

方法：addEventListener()

removeEventListener()

4.2 addEventListener()

方法用于指定元素添加句柄

4.3 removeEventListener()

移除方法添加句柄

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>

对于JavaScript中DOM对象的分析

推荐度：

点击下载本文 文档为doc格式

标签：元素 js 对象

热门焦点

对于JavaScript中DOM对象的分析

对于JavaScript中DOM对象的分析

1.DOM简介

2.DOM操作HTML

4.DOM EventListener

对于JavaScript中DOM对象的分析

最新推荐

猜你喜欢

热门推荐