JavaScript DOM对象

朴灿烈づ我的快乐病毒、 2022-06-15 09:20 285阅读 0赞

JavaScript DOM对象

DOM简介

1、HTML DOM

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

DOM操作HTML

1）：JavaScript能够改变页面中的所有HTML元素

2）：JavaScript能够改变页面中的所有HTML属性

3）：JavaScript能够改变页面中的所有CSS样式

4）：JavaScript能够对页面中的所有事件做出反应

1、改变HTML输出流

注意：绝对不要在文档加载完成之后使用document。write()。这会覆盖该文档

2、寻找元素：

通过id找到html元素

通过标签名找到html元素

3、改变html内容

使用属性：innerHTML

4、改变HTML属性

使用属性：attribute

DOM操作CSS

1、通过DOM对象改变CSS

语法：document.getElementById(id).style.property=new style

DOM EventListener给元素添加一个事件句柄

1、DOM EventListener：

  1. 方法：addEventListener():
  2. removeEventListener():

2、addEventListener():

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

3、removeEventListener():

移除方法添加的事件句柄

  1. <p id="pid">Hello</p>
  2.     <button onclick="change()">按钮</button>
  3.     <script> function change() { //当修改change函数的时候，其他调用change的地方都需要修改， // 代码量多的时候就容易出现改错，漏改的问题，这时候就需要用到句柄 document.getElementById("pid") } </script>
  5. <p id="pid02">miao</p>
  6.     <button id="btn">按钮02</button>
  7.     <script> document.getElementById("btn").addEventListener("click", function () { alert("坛") }); </script>
  9. <script> var x = document.getElementById("btn"); x.addEventListener("click",hello); x.addEventListener("click",world);//添加句柄 x.removeEventListener("click",hello);//移除句柄 //不同事件可以添加多个句柄，句柄之间不会覆盖 function hello() { alert("hello"); } function world() { alert("world"); } </script>

发表评论

表情：
评论列表 （有 0 条评论，285人围观）

还没有评论，来说两句吧...

相关阅读

    相关 <javascript>的DOM对象

    DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。DOM 将把整个页面规划成由节点层级构成的文档。HTML 或 XML 页面的每个部分都是一个节点的衍生

    秒速五厘米秒速五厘米/ 0 赞/ 280 阅读