文档对象模型（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. POJ 1386 有向图欧拉通路

    题意:给你一些字符串,这些字符串可以首位相接(末位置如果和另一个字符串的首位置相同的话就可以相连) .然后问你是否可以全部连起来. 思路:就是取出每个字符串的首尾位置,然后求出出度和入度,根据有向欧拉 ...

  2. Java基础知识强化54：经典排序之插入排序（InsertSort）

    1. 插入排序原理图: 算法步骤: 1)将第一待排序序列第一个元素看做一个有序序列,把第二个元素到最后一个元素当成是未排序序列. 2)从头到尾依次扫描未排序序列,将扫描到的每个元素插入有序序列的适当位 ...

  3. redisi配置安装

    一.单机配置 http://www.codeceo.com/article/centos-redis-setup.html 二.测试安装情况 http://blog.sina.com.cn/s/blo ...

  4. JSON格式的各种转换

    /** *JSON 格式的解析 */ // json 去掉转义字符 message = message.replaceAll("\\\\", ""); //转成 ...

  5. mybati之入门demo

    //书写我的第一个mybaits程序,主要讲的是mybatis-config.xml的文件 需求:根据用户名查询用户信息: 1.  通过session调用selectOnt(statme," ...

  6. Java初转型-Maven入门

    原系列名:Maven学习总结(一) 原博文出自于:http://www.cnblogs.com/xdp-gacl/p/3498271.html 感谢! 一.Maven的基本概念 Maven(翻译为&q ...

  7. Calendar( 日历)

    本节课重点了解 EasyUI 中 Canlendar(日历)组件的使用方法,这个组件不依赖于其他组件.一． 加载方式//class 加载方式<div id="box" cla ...

  8. A.indexOf(array[i])表达的含义

    userAgentInfo.indexOf(Agents[v]): //A.indexOf(array[i]):A元素是否存在于数组array里面:如果存在就会返回对应的下标,如果不存在则返回-1. ...

  9. windows server 2003 AD

    本文转载:http://www.cnblogs.com/zfanlong1314/admin/EditPosts.aspx?opt=1 今天教大家用windows server2003系统建立Acti ...

  10. 【Oracle】-【权限-ORA-04043】- ORA-04043: object "SYS"."V_$DATABASE" does not exist

    用非dba账号(但赋予了DBA角色)登录一个新的10g数据库想看下版本号, SQL> desc v$instance; ERROR: ORA-04043: object "SYS&qu ...