文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容。

查找元素

1、直接查找

  • document.getElementById 根据ID获取一个标签
  • document.getElementsByName 根据name属性获取标签集合
  • document.getElementsByClassName 根据class属性获取标签集合
  • document.getElementsByTagName 根据标签名获取标签集合

2、间接查找

  • parentNode // 父节点
  • childNodes // 所有子节点
  • firstChild // 第一个子节点
  • lastChild // 最后一个子节点
  • nextSibling // 下一个兄弟节点
  • previousSibling // 上一个兄弟节点

  • parentElement // 父节点标签元素
  • children // 所有子标签
  • firstElementChild // 第一个子标签元素
  • lastElementChild // 最后一个子标签元素
  • nextElementtSibling // 下一个兄弟标签元素
  • previousElementSibling // 上一个兄弟标签元素

web前端之 DOM的更多相关文章

  1. web前端优化--DOM性能优化

    1.DOM访问与修改的优化: DOM访问是有代价的,修改DOM则会引起DOM的重绘与重排,而这两种操作会消耗性能. (1)缓存DOM:将频繁访问的对象或属性使用变量缓存起来,每次访问的时候,直接使用变 ...

  2. Python之Web前端Dom, jQuery

    Python之Web前端: Dom   jQuery ###Dom 一. 什么是Dom? 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它 ...

  3. 进击的Python【第十五章】:Web前端基础之DOM

    进击的Python[第十五章]:Web前端基础之DOM 简介:文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示 ...

  4. 也许你需要点实用的-Web前端笔试题

    之前发的一篇博客里没有附上答案,现在有空整理了下发出来,希望能帮助到正在找工作的你,还是那句话:技术只有自己真正理解了才是自己的东西,共勉. Web前端笔试题 Html+css 1.对WEB标准以及w ...

  5. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

  6. [转载]Web前端开发工程师编程能力飞升之路

    [背景] 如果你是刚进入web前端研发领域,想试试这潭水有多深,看这篇文章吧:如果你是做了两三年web产品前端研发,迷茫找不着提高之路,看这篇文章吧:如果你是四五年的前端开发高手,没有难题能难得住你的 ...

  7. web前端开发中常用的尺寸和位置

    我们在日常web前端开发过程中,会经常用到各种尺寸和位置.通常是js做动画的时候.轮播图,滚屏动画,粒子,碰撞检测,拖拽,滚动加载等等.这里我将常用的尺寸和位置的获取进行总结,不包括canvas,SV ...

  8. web前端面试总结

    本文由我收集总结了一些前端面试题,初学者阅后也要用心钻研其中的原理,重要知识需要系统学习.透彻学习,形成自己的知识链.万不可投机取巧,临时抱佛脚只求面试侥幸混过关是错误的!也是不可能的! 前端还是一个 ...

  9. web前端知识体系总结

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

随机推荐

  1. 读《MacTalk&#183;人生元编程》及Mac经常使用软件

    引子 池建强的Blog:http://www.cnblogs.com/chijianqiang/ 用了1年多的黑苹果,是用Windows的思维用UI.用Linux的思维用Shell,折腾的是联想E49 ...

  2. android键盘事件

    在main.xml文件中代码如下: <?xml version="1.0" encoding="utf-8"?> <LinearLayout ...

  3. 秀才每天一篇之—SEO是什么?

    [导读]SEO是什么?秀才搁笔七天以来.遇到非常多事情.站点被K ,排名掉了. 却找不出原因,開始迷茫了.以至于没有心情来照应这个博客,不好意思了,各位.在这七天以来.秀才一直在思考,SEO究竟应该怎 ...

  4. 金典 SQL笔记(4)

    由于在本地笔记上写的.CSDN markdown编辑器仅仅支持.md格式导入, 图片没办法直接导进去.写的多了懒的一张一张图片切图上传; 直接整个文章切成图片上传上去了. watermark/2/te ...

  5. php图片上面写文字,输出图片

    <?php /* param $image 图象资源 param size 字体大小 param angle 字体输出角度 param showX 输出位置x坐标 param showY 输出位 ...

  6. OD: Shellcode Encoding

    Shellcode 受到的限制 1. 大多数情况下 shellcode 中不允许出现 0x00 截断符,这个可以通过特殊指令来做到. 2. 有时候 shellcode 必须为可见的 ASCII 字符或 ...

  7. Chrome Browser

    set default search engine as follow for force encrypted searching: https://encrypted.google.com/sear ...

  8. eclipse中安装genymotion

    在eclipse中安装genymotion.安装genymotion需要先安装virtualbox.选择Help选项中的install new software 然后点击进去点击ADD,在locati ...

  9. C# List<T>转为 DataTable

    // remove "this" if not on C# 3.0 / .NET 3.5 public static System.Data.DataTable ConvertTo ...

  10. php 邮件发送代码-php邮件群发

    php 邮件发送如何进行的呢? php邮件发送是通过smtp协议进行的. 下面是一个php邮件发送的类的一个函数. 文件下载 function sendmail($to, $from, $subjec ...