JS获取HTML DOM元素的几种方法

目前我只知道下面这几种获取DOM元素的方法

  • 根据ID获取元素     getElementById
  • 根据标签名获取元素     getElementsByTagName
  • 根据className获取标签列表     getElementsByClassName
  • 根据选择器获取到第一个找到的元素     document.querySelector
  • 根据选择器获取到所有的元素     document.querySelectorAll
  •   还有两个特殊的获取标签方式:
      • 获取html的方法  document.documentElement
          (上面这个,单独用来获取html标签的)
      • 获取body的方法  document.body
          (上面这个是单独用来获取body标签的)

  第一种,根据ID获取元素

      document.getElementById("id")

      里面的id,就是你想要获取的那个标签的id名,只能是字符类型的。
      如果没有找到,返回的就是null

  第二种,根据标签名获取元素

      div = document.getElementsByTagName("div")

      括号里面只能填写标签名,前面的div是自己定义的名字,你甚至可以叫zhongyiwjw,一样的。
      getElementsByTagName这个方法除了可以使用document以外,还可以使用元素调用
      如果使用元素调用,就是指当前这个元素的子元素中的标签名是div的

  第三种,根据className获取标签列表

      var div0=diva.getElementsByClassName("div0");

      可以根据元素获取子元素中class是div0的所有元素

  第四种,根据选择器获取到第一个找到的元素

      var div0=document.querySelector("div")

      根据选择器获取到第一个div元素,只能找到第一个噢。它甚至可以这样写

          var div0=document.querySelector("#diva>.div0")

          找到的是id名为diva的下面的class名为div0的第一个元素
    

  第五种,根据选择器获取到所有的元素

     var div0=document.querySelectorAll("div")

        根据选择器,选择到所有的div

  

原文地址:https://www.cnblogs.com/ZhouyuCHen-827/p/12642186.html

时间: 2024-07-31 08:43:40

JS获取HTML DOM元素的几种方法的相关文章

获取DOM元素的三种方法

1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="Generator" content="EditPlus?"> 6 <meta name="Author" content=""> 7 <me

js中常用追加元素的几种方法:append,appendTo,after,before,insertAfter,insertBefore,appendChild

js中常用追加元素的几种方法,点击下面每个按钮,即可查看效果 我是第一个子元素 我是第二个子元素 append appendTo prepend prependTo after before appendChild insertAfter insertBefore

JS获取DOM元素的八种方法

什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准.我们用JavaScript对网页进行的所有操作都是通过DOM进行的. 这篇文章不做深入研究,只把各种用法和坑做一个总结. JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getE

JS获取HTML DOM元素的方法

在JS中获取元素的方法有很多,可以根据实际需要选择合适的方法 一.JS获取元素的方法 1)根据id获取标签元素 var div1=document.getElementById("div1"); 2)根据标签名获取标签列表 var divs=document.getElementsByTagName("div") 3)根据className获取标签列表 var div0=document.getElementsByClassName("div0"

js中删除数组元素的几种方法

1:js中的splice方法 splice(index,len,[item])    注释:该方法会改变原始数组. splice有3个参数,它也可以用来替换/删除/添加数组内某一个或者几个值 index:数组开始下标        len: 替换/删除的长度       item:替换的值,删除操作的话 item为空 如:arr = ['a','b','c','d'] 删除 ----  item不设置 arr.splice(1,1)   //['a','c','d']         删除起始下

js获取屏幕以及元素宽高的方法

一.window相关 网页正文部分上:window.screenTop 网页正文部分左:window.screenLeft 屏幕分辨率的高:window.screen.height 屏幕分辨率的宽:window.screen.width 屏幕可用工作区高度:window.screen.availHeight 屏幕可用工作区宽度:window.screen.availWidth 二.body相关 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.

Js获取单选框radio的几种方法

首先,编写HTML如下:   <form id="form1">         <table  border="0">              <tr>                 <td>年龄段:</td>                 <td>                     <input type="radio" name="age&q

JS获取网页中HTML元素的几种方法分析

getElementById getElementsByName getElementsByTagName 大概介绍 getElementById ,getElementsByName ,getElementsByTagName ###adv### 后两个是得到集合,byid只是得到单个对象 getElementById 的用法 举个例子: <a id="link1" name="link1" href=http://homepage.yesky.com>

Jquery取得iframe中元素的几种方法Javascript Jquery获取Iframe的元素、内容或者ID

query取得iframe中元素的几种方法 在iframe子页面获取父页面元素代码如下: $('#objId', parent.document);// 搞定... 在父页面 获取iframe子页面的元素代码如下: $("#objid",document.frames('iframename').document) 显示iframe中body元素的内容. $(document.getElementById('iframeId').contentWindow.document.body)