JavaScript Dom 查找

一、直接查找

获取单个元素 document.getElementById('i1')
获取多个元素(列表数组) document.getElementsByTagName('div')
获取多个元素(列表数组) document.getElementsByClassName('c1')

  • // 根据ID获取一个标签
  • document.getElementById

  • // 根据name属性获取标签集合
  • document.getElementsByName

  • // 根据class属性获取标签集合
  • document.getElementsByClassName

  • // 根据标签名获取标签集合
  • document.getElementsByTagName

二、间接查找

指定单个元素 tag = document.getElementById('i1')
查找该元素父级标签 = tag.parentElenment

  • // 父节点
  • parentNode    

  • // 所有子节点      
  • childNodes      

  • // 第一个子节点    
  • firstChild     

  • // 最后一个子节点     
  • lastChild    

  • // 下一个兄弟节点       
  • nextSibling         

  • // 上一个兄弟节点
  • previousSibling     

  • // 父节点标签元素 
  • parentElement   

  • // 所有子标签        
  • children       

  • // 第一个子标签元素         
  • firstElementChild    

  • // 最后一个子标签元素   
  • lastElementChild        

  • // 下一个兄弟标签元素
  • nextElementtSibling    

  • // 上一个兄弟标签元素 
  • previousElementSibling  

JavaScript Dom 查找的更多相关文章

  1. JavaScript, DOM查找元素

    1.document.getElementById("id"); => IE8 及较低版本不区分ID的大小写 => IE7及较低版本中表单元素的name特性和ID都会被 ...

  2. JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;

    JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...

  3. 读书笔记:JavaScript DOM 编程艺术(第二版)

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  4. javaScript DOM JQuery AJAX

    http://www.cnblogs.com/wupeiqi/articles/5369773.html 一 JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript ...

  5. HTML,javaScript,DOM详解

    HTML DOM 教程 DOM 教程 DOM 简介 HTML DOM 定义了访问和操作 HTML 文档的标准方法. DOM 将 HTML 文档表达为树结构. HTML DOM 树 HTML DOM 简 ...

  6. JavaScript DOM编程艺术学习笔记(一)

    嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推 ...

  7. Python 15 html 基础 - CSS &javascript &DOM

    本节内容 CSS基础 javascript基础 DOM 前言,这边这块楼主已经很熟悉了,CSS天天用到,简单的一些javascript也是所以就挑点重点说了.然后就是dom不怎么用,但是其实也用不到, ...

  8. Dom,查找标签和操作标签

    Dom,查找标签和操作标签 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式 ...

  9. 《JavaScript Dom 编程艺术》读书笔记-第4章

    我的前端入门第一本书是<JavaScript Dom 编程艺术>,网上查找资料发现前端的入门推荐书籍最受好评的就是这本和<JavaScript 高级程序设计>了.之所以先选这本 ...

随机推荐

  1. 面向对象编程之Java多态

    我相信从学习计算机面向对象编程起就很多人背下了继承.封装.多态三个特性,可是多态并不是那么好理解的.通常做几道题,背下几次多态的动态绑定规律,可是依旧在一段时间后忘记了多态的存在,为什么要多态,这个程 ...

  2. 微信小程序中显示与隐藏(hidden)

    1.wx.wxml页面部分 <view bindtap='click'>点击</view> //这是显示隐藏的部分 <view hidden="{{hidden ...

  3. WordCount扩展

    码云地址:https://gitee.com/xjtsh/ExpandedWordCount 功能实现: wc.exe -c file.c     //返回文件 file.c 的字符数 wc.exe ...

  4. phjp(ajax)作用知识点

    1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如 ...

  5. UML关系实现、泛化,依赖、组合

    图片via<大话设计模式> UML一目了然

  6. VM装mac10.9教程+报错信息解决办法

    VM装mac10.9教程+报错信息解决办法 教程1: 教你在Vmware 10下安装苹果Mac10.9系统 地址:http://tieba.baidu.com/p/2847457021 教程2: VM ...

  7. 《PHP - CGI/Fastcgi/PHP-FPM》

    先说下我最近看到的一篇文章,哈哈哈,特别好玩. 一步步教你编写不可维护的 PHP 代码 之前一直知道 PHP 在 CGI 模式下运行.命令行下在 CLI 模式下运行. 但是 FPM 和 nginx 配 ...

  8. vue 的进度条组件

    先看效果: 要想实现如上图的,进度跳效果,有两种方式,首先介绍第一种: 1.自己用 div 写一个,代码如下 <template> <div class="mfc-slid ...

  9. Centos配置tomcat服务并且开机自启动

    把要配置成服务的tomcat文件夹中的catalina.sh脚本文件拷一份到/etc/init.d目录,并且改文件名称为tomcat6 cp /usr/web/tomcat/tomcat-/bin/c ...

  10. ionic 需要注意的知识点