文档对象模型（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. 一维DFT

    学习DIP第3天 傅里叶变换是一个非常大的话题.今天实现了下一维的DFT,兴许将完毕其它傅里叶系的算法实现和实验. DFT公式:                             当中e 是自然 ...

  2. oracle递归函数

    oracle start with connect by 使用方法 oracle中 connect by prior 递归算法  Oracle中start with...connect by prio ...

  3. [Angular 2]ng-class and Encapsulated Component Style2

    Many Components require different styles based on a set of conditions. Angular 2 helps you style you ...

  4. HID 报告描述符精细说明.

    1,报告描述符概述    1.1) 报表描述符        报表描述符和USB的其他描述符是不一样的,它不是一个简单的表格,报表描述符是USB所有描述符中最复杂的.报表描述符非常复杂而有弹性,因为它 ...

  5. Intent 数据传递 总结

    系统API 可以传递的数据类型 1.传递8大基本类型+String+CharSequence及其数组类型 2.传递ArrayList集合     public Intent putIntegerArr ...

  6. 获取checkboxlist选中的值以及绑定来自之前选中的来自数据库的值

    //////ps:一下几句都是一个意思,为的是以后有人搜索关键字的时候能定位到这里///checkboxlist绑定选中值///checkboxlist绑定来之mssql数据的值///checkbox ...

  7. 修改Sharepoint 文档库列表点击Excel文件默认跳转到Excel Service服务 xlviewer.aspx页面

    在Sharepoint 文档库中,当点击库中的一个Excel文件时,Sharepoint默认为转跳到Excel Services上,无论是Sharepoint 的是否开启了Excel Service, ...

  8. hadoop mapreduce 端参数优化

    在MapReduce执行过程中,特别是Shuffle阶段,尽量使用内存缓冲区存储数据,减少磁盘溢写次数:同时在作业执行过程中增加并行度,都能够显著提高系统性能,这也是配置优化的一个重要依据. 下面分别 ...

  9. JQ 遍历节点

    .children() : 取得匹配元素的子元素集合 .next() :取得匹配元素后面紧邻的同辈元素 .prev() :取得匹配元素前面紧邻的同辈元素 .siblings() :取得匹配元素前.后的 ...

  10. grunt之入门实践

    grunt 是基于nodejs的前端项目管理工具,凭借着大量优秀的插件从众多前端项目管理工具中脱颖而出. 确保先安装了nodejs 为了方便使用Grunt,应该在全局范围内安装Grunt的命令行接口( ...