>>分享Web前端开发技术,并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 26201 个阅读者 刷新本主题
 * 贴子主题:  JavaScript 访问HTML DOM树中的元素 回复文章 点赞(0)  收藏  
作者:sunshine    发表时间:2019-08-15 13:54:49     消息  查看  搜索  好友  邮件  复制  引用

  

JavaScript  HTML DOM

      通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。            

HTML DOM (文档对象模型)

     当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。

     HTML DOM 模型被构造为 对象的树:            

  HTML DOM 树

         点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小

    通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。    
  • JavaScript 能够改变页面中的所有 HTML 元素
  • JavaScript 能够改变页面中的所有 HTML 属性
  • JavaScript 能够改变页面中的所有 CSS 样式
  • JavaScript 能够对页面中的所有事件做出反应

查找 HTML 元素

     通常,通过 JavaScript,您需要操作 HTML 元素。

     为了做到这件事情,您必须首先找到该元素。有三种方法来做这件事:    
  • 通过 id 找到 HTML 元素
  • 通过标签名找到 HTML 元素
  • 通过类名找到 HTML 元素

通过 id 查找 HTML 元素

     在 DOM 中查找 HTML 元素的最简单的方法,是通过使用元素的 id。

     本例查找 id="intro" 元素:            

范例

var x=document.getElementById("intro");

                  如果找到该元素,则该方法将以对象(在 x 中)的形式返回该元素。

      如果未找到该元素,则 x 将包含 null。            

通过标签名查找 HTML 元素

     本例查找 id="main" 的元素,然后查找 id="main" 元素中的所有 <p>  元素:            

范例

    var x=document.getElementById("main");
    var y=x.getElementsByTagName("p");

通过类名找到 HTML 元素

     本例通过getElementsByClassName函数来查找 class="intro" 的元素:            

范例

         var x=document.getElementsByClassName("intro");

程序猿的技术大观园:www.javathinker.net



[这个贴子最后由 flybird 在 2020-02-21 09:45:10 重新编辑]
  Java面向对象编程-->集合(上)
  JavaWeb开发-->Servlet技术详解(Ⅲ)
  JSP与Hibernate开发-->映射一对多关联关系
  Java网络编程-->RMI框架
  精通Spring-->
  Vue3开发-->创建综合购物网站应用
  不可错过的几种JS优化技巧
  vue3 composition API的用法
  axios和vue-axios的关系
  在Typescript脚本中使用axios
  css3中translate、transform和translation,以及动画animati...
  20分钟带你掌握JavaScript Promise和 Async/Await
  Node.js 实现远程桌面监控
  Thinking In Vue:vue指令的封装
  vue+file-saver+jszip实现批量导出图片
  HTML DOM Script 对象
  JavaScript的HTML DOM Parameter 对象
  CSS 表单的用法
  JavaScript的window.screen对象
  JavaScript的比较和逻辑运算符
  jQuery Mobile 安装
  更多...
 IPIP: 已设置保密
楼主      
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


中文版权所有: JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶,分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权,请与本站管理员联系。