DOM简介及获取元素方法属性总结

最新推荐文章于 2024-07-08 22:48:46 发布
最新推荐文章于 2024-07-08 22:48:46 发布
阅读量1.7k 收藏 4
点赞数 4
分类专栏： 正在路上的前端攻城狮的烂笔记 # JavaScript 文章标签： javascript 前端 es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45660621/article/details/121514863
版权

目录

什么是DOM

DOM，全称Documnet Object Model文档 对象 模型。

文档树

在这里插入图片描述

获取元素节点（通过document对象调用）

浏览器为我们提供的文档节点对象Documne,这个对象是window属性，可以直接在页面中直接使用，文档节点代表的是整个网页##

getElementByid()

  • getElementByid("id")通过根据ID属性获取一个节点元素
    <div id="div">我是div</div>
    <script>
        var div = document.getElementById("div");
        console.log(div);
    </script>

在这里插入图片描述

getElementsByTagName()

  • getElementsByTagName("Element标签名")通过标签名获取一组元素节点对象
  • 这个方法会返回一个类数组对象，所有查询到的元素都会封装到对象中
  • 可以通过下标的形式访问里面的内容
  • 通过length方法会返回伪数组的长度
    <ul>
        <li>江流</li>
        <li>心猿</li>
        <li>木龙</li>
        <li>刀圭</li>
        <li>意马</li>
    </ul>
    <script>
        var lis = document.getElementsByTagName("li");//获取所有的li
        console.log(lis);//打印lis
        console.log(lis.length);//打印lis的长度    
    </script>

在这里插入图片描述

getElementsByName()

  • getElementsByName("name")通过name属性获取一组元素节点对象
  • 这个方法会返回一个类数组对象，所有查询到的元素都会封装到对象中
  • 可以通过下标的形式访问里面的内容
  • 通过length方法会返回伪数组的长度
    <div name="xiyou">西游记</div>
    <ul>
        <li name="xiyou">江流</li>
        <li name="xiyou">心猿</li>
        <li name="xiyou">木龙</li>
        <li name="xiyou">刀圭</li>
        <li name="xiyou">意马</li>
    </ul>
    <script>
        var xiyous = document.getElementsByName("xiyou");//获取所有name="xiyou"的元素
        console.log(xiyous);//打印xiyous
        console.log(xiyous.length);//打印xiyous的长度
    </script>

在这里插入图片描述

事件

事件，就是用户和浏览器之间的交互行为，比如：点击按钮，鼠标移动，关闭窗口。
可以在事件对应属性中设置js代码，当事件触发时，这些代码将会执行。

常见的 HTML 事件

onclick

  • 用户点击了HTML元素
<button id="button" onclick="alert('点我干嘛？')">我是button</button>

在这里插入图片描述

onmouseover

  • 用户把鼠标移动到 HTML 元素上
<button id="button" onmouseover="alert('点我干嘛？')">我是button</button>

在这里插入图片描述

onmouseout

  • 用户把鼠标移开 HTML 元素

onchange

  • HTML 元素已被改变

onkeydown

  • 用户按下键盘按键

onload

  • 浏览器已经完成页面加载
  • 通常用为window绑定一个onload事件,就可以把js代码放在里面，然后把script代码放在在head标签前面，便于维护和管理代码。
 window.onload = function(){
		代码块...
	};

绑定事件

  • 可以为HTML元素的对应事件绑定处理函数的形式来响应事件
  • 这样当事件被触发时，其对应的函数将会被调用
    例如以上面的onclick为例：
 <button id="btn">点我</button>
 <script>
     var btn = document.getElementById("btn");//获取按钮对象
     console.log(btn);
     btn.onclick = function () {//绑定单击事件
         alert('叫你点你就点，见不见呀？');
     }
 </script>

在这里插入图片描述

获取元素节点的子节点（通过具体的元素节点调用）

getElementsByTagName()

  • getElementsByTagName("子元素名") ，这是一个方法,该方法通过具体元素节点调用时，会返回当前节点的指定标签名后代节点。（注意：需要分清上面被document调用时的区别）
    <ul id="xiyou">
        <li >江流</li>
        <li >心猿</li>
        <li >木龙</li>
        <li >刀圭</li>
        <li >意马</li>
    </ul>
    <script>
        var xiyou = document.getElementById("xiyou");//获取id="xiyou"的ul元素
        
        var lis = xiyou.getElementsByTagName('li');//通过ul元素调用查询li
        console.log(lis);//打印lis
        console.log(lis.length);//打印lis的长度
    </script>

在这里插入图片描述

childNodes

  • childNodes是一个属性，表示当前节点的所有子节点
  • childNodes属性会获取包括文本节点在内的所有节点
  • 根据DOM标准标签间空白也会当成文本节点
  • 在IE8及以下的浏览器中，不会将空白文本当成子节点
    <ul id="xiyou">
        <li >江流</li>
        <li >心猿</li>
        <li >木龙</li>
        <li >刀圭</li>
        <li >意马</li>
    </ul>
    <script>
        var ul = document.getElementById("xiyou");//获取id="xiyou"的ul元素
        
        var ulChilds = ul.childNodes;//查询ul下所有的子节点
        console.log(ulChilds);//打印ulChilds
        console.log(ulChilds.length);//打印ulChilds的长度
    </script>

在这里插入图片描述

children

  • children属性可以获取当前元素的所有子元素（注意：是子元素，上面childNodes是子节点）
  • 可以弥补上面childNodes的缺点，即不包括空白文本
    <ul id="xiyou">
        <li >江流</li>
        <li >心猿</li>
        <li >木龙</li>
        <li >刀圭</li>
        <li >意马</li>
    </ul>
    <script>
        var ul = document.getElementById("xiyou");//获取id="xiyou"的ul元素
        
        var ulChilds = ul.children;//查询ul下所有的子元素
        console.log(ulChilds);//打印ulChilds
        console.log(ulChilds.length);//打印ulChilds的长度
    </script>

在这里插入图片描述

firstChild

  • firstChild是一个属性，表示当前节点的第一个子节点(包括空白文本)
    <ul id="xiyou">
        <li >江流</li>
        <li >心猿</li>
        <li >木龙</li>
        <li >刀圭</li>
        <li >意马</li>
    </ul>
    <script>
        var ul = document.getElementById("xiyou");//获取id="xiyou"的ul元素
        
        var ulFirstChild = ul.firstChild;//查询ul下第一个子节点
        console.log(ulFirstChild);//打印ulFirstChild
    </script>

在这里插入图片描述

firstElementChild

  • firstElementChild属性获取当前元素的第一个子元素（不包含空白文本）
  • 不支持IE8及以下的浏览器
    <ul id="xiyou">
        <li >江流</li>
        <li >心猿</li>
        <li >木龙</li>
        <li >刀圭</li>
        <li >意马</li>
    </ul>
    <script>
        var ul = document.getElementById("xiyou");//获取id="xiyou"的ul元素
        
        var ulfirstElementChild = ul.firstElementChild;//查询ul下第一个子元素点
        console.log(ulfirstElementChild);//打印ulfirstElementChild
    </script>

在这里插入图片描述

lastChild

  • lastChild是一个属性,表示当前节点的最后一个子节点(包括空白文本)
    <ul id="xiyou">
        <li >江流</li>
        <li >心猿</li>
        <li >木龙</li>
        <li >刀圭</li>
        <li >意马</li>
    </ul>
    <script>
        var ul = document.getElementById("xiyou");//获取id="xiyou"的ul元素
        
        var ullastChild = ul.lastChild;//查询ul下最后一个子节点
        console.log(ullastChild);//打印ullastChild
    </script>

在这里插入图片描述

lastElementChild

  • lastElementChild 属性获取当前元素的最后一个子元素（不包含空白文本）
  • 不支持IE8及以下的浏览器
    <ul id="xiyou">
        <li >江流</li>
        <li >心猿</li>
        <li >木龙</li>
        <li >刀圭</li>
        <li >意马</li>
    </ul>
    <script>
        var ul = document.getElementById("xiyou");//获取id="xiyou"的ul元素
        
        var ullastElementChild = ul.lastElementChild;//查询ul下最后一个子元素点
        console.log(ullastElementChild);//打印ullastElementChild
    </script>

在这里插入图片描述

获取父节点和兄弟节点（通过具体的节点调用）

parentNode

  • parentNode属性，查询当前节点的父元素
    <ul>
        <li >江流</li>
        <li id="monkey">心猿</li>
        <li >木龙</li>
        <li >刀圭</li>
        <li >意马</li>
    </ul>
    <script>
        var li = document.getElementById("monkey");//获取id="monkey"的元素
        
        var liParen = li.parentNode;//查询li的父节点
        console.log(liParen);//打印liParen
     </script>

·

previousSibling

  • previousSibling属性，查询当前节点的前一个兄弟节点(包括空白文本节点)
    <ul>
        <li >江流</li>
        <li id="monkey">心猿</li>
        <li >木龙</li>
        <li >刀圭</li>
        <li >意马</li>
    </ul>
    <script>
        var li = document.getElementById("monkey");//获取id="monkey"的元素
        
        var liPrevious = li.previousSibling;//查询li的前一个节点
        console.log(liPrevious);//打印liPrevious
    </script>

在这里插入图片描述

previousElementSibling

  • previousElementSibling属性，查询当前节点的前一个兄弟元素(不包括空白文本)
    <ul>
        <li >江流</li>
        <li id="monkey">心猿</li>
        <li >木龙</li>
        <li >刀圭</li>
        <li >意马</li>
    </ul>
    <script>
        var li = document.getElementById("monkey");//获取id="monkey"的元素
        
        var liPrevious = li.previousElementSibling;//查询li的前一个元素
        console.log(liPrevious);//打印liPrevious
    </script>

在这里插入图片描述

nextSibling

  • nextSibling属性，查询当前节点的后一个兄弟节点(包括空白文本)
    <ul>
        <li >江流</li>
        <li id="monkey">心猿</li>
        <li >木龙</li>
        <li >刀圭</li>
        <li >意马</li>
    </ul>
    <script>
        var li = document.getElementById("monkey");//获取id="monkey"的元素
        
        var liNext = li.nextSibling;//查询li的前一个节点
        console.log(liNext);//打印liNext
    </script>

在这里插入图片描述

nextElementSibling

  • nextElementSibling属性，查询当前节点的后一个兄弟节点(不包括空白文本)
    <ul>
        <li >江流</li>
        <li id="monkey">心猿</li>
        <li >木龙</li>
        <li >刀圭</li>
        <li >意马</li>
    </ul>
    <script>
        var li = document.getElementById("monkey");//获取id="monkey"的元素
        
        var liNext = li.nextElementSibling;//查询li的后一个元素
        console.log(liNext);//打印liNext
    </script>

在这里插入图片描述

HTML5新增的获取方式（通过document对象调用）

querySelector()

  • querySelector("选择器名")方法用于返回指定选择器的第一个元素对象
  • IE8支持该方法，IE7及以下不支持
    <ul>
        <li class="xiyou" >江流</li>
        <li id="monkey">心猿</li>
        <li class="xiyou" >木龙</li>
        <li class="xiyou" >刀圭</li>
        <li class="xiyou" >意马</li>
    </ul>
    <script>
        var liId = document.querySelector("#monkey");//获取id="monkey"的元素
        var liClass = document.querySelector(".xiyou")//获取第一个class="xiyou"的元素
        var liElement = document.querySelector("li")//获取第一个li的元素
        console.log("通过ID选择器：",liId);
        console.log("通过Class选择器：",liClass);
        console.log("通过Element选择器：",liElement);
    </script>

在这里插入图片描述

querySelectorAll()

  • querySelector("选择器名")方法用于返回指定选择器的所有元素对象集合
  • 该方法会返回一个类数组对象，所有查询到的元素都会封装到对象中
    • IE8支持该方法，IE7及以下不支持
    <ul>
        <li class="xiyou" >江流</li>
        <li id="monkey">心猿</li>
        <li class="xiyou" >木龙</li>
        <li class="xiyou" >刀圭</li>
        <li class="xiyou" >意马</li>
    </ul>
    <script>
        var liClasses = document.querySelectorAll(".xiyou")//获取所有class="xiyou"的元素
        var liElements = document.querySelectorAll("li")//获取所有li的元素
        console.log("通过Class选择器：",liClasses);
        console.log("通过Element选择器：",liElements);
    </script>

在这里插入图片描述

getElementsByClassName()

  • getElementsByClassName("class名")方法，用于通过类名来获取某些元素的集合
  • 该方法会返回一个类数组对象，所有查询到的元素都会封装到对象中
  • IE8及以下版本不支持该方法，IE8可以使用querySelectorAll()替代该方法
    <ul>
        <li class="xiyou" >江流</li>
        <li id="monkey">心猿</li>
        <li class="xiyou" >木龙</li>
        <li class="xiyou" >刀圭</li>
        <li class="xiyou" >意马</li>
    </ul>
    <script>
        var liClasses = document.getElementsByClassName("xiyou")//获取所有class="xiyou"的元素
        console.log("通过Class选择器：",liClasses);
    </script>

在这里插入图片描述

1900's 88 keys
关注
专栏目录
获取Dom元素的方案.
Funny_Man的博客
10-23 141
方案一: 通过ID属性值获取Dom元素 document.getElementById("ID") 该方法最后返回获取到的Dom元素. 方案二: 通过Class属性获取Dom元素 document.getElementsByClassName("Class") 该方法把获取到的Dom元素先存入数组,最后返回一个数组. 方案三: 通过标签名获取Dom元素 document.getElementsByTagName("TagName") 该方法把获取到的Dom元素先存入数组,最后返回一个数组. 方案四:
DOM概念与获取元素
m0_50272558的博客
09-17 167
DOM概念 DOM（Document Object Model）:文档对象模型 通过开发者工具可以看到 整个文档是由一系列的节点对象组成的一棵树 节点（Node）包括元素节点（1）、属性节点（2）、和文本节点（3） Th1代表一个元素节点（nodeType=1），nodeName是标签名（th）元素节点的 nodeValue=null getAttributeNode方法是获取元素的属性节点，此时输出的节点类型是属性节点（2） 节点名称就是属性名，节点值就是属性值 Txt1是一个文本节点（3），节点名称
DOM 基本操作 - 获取元素
最新发布
xy的博客
07-08 351
文档对象模型(Document Object Model),是 W3C 组织推荐的处理可拓展标记语言的标准编程接口。
DOM获取和属性操作
Hbb_000的博客
06-29 612
作用:直观体现了标签与标签之间的关系核心思想:把网页内容当成对象处理根据css选择器来获取DOM元素document.queryselector('css选择器'):只能获取一个元素参数:包含一个或多个有效的css选择器返回值如果没有匹配到返回nulldocument.queryselectorAll('css选择器'):能获取多个元素返回值:匹配到返回一个伪数组,匹配不到返回一个空数组注意:就算只有一个元素也必须用下标来获取目标:获取标签中间内容语法:对象.innerText 对象.innerHTML
DOM--获取元素
JJ_Smilewang的博客
05-24 624
1. 什么是DOM 文档对象模型（Document Object Model，简称 DOM），是 W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。 W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。 2. 什么是DOM树 (1)DOM树：在内存中，集中保存一个网页中所有内容的树状图。 (2)为什么使用DOM树：能够直观的保存上下级包含关系的数据结构，html标签就是包含的关系，所以网页中每一项内容，在内存中，都是存在树形结构.
DOM简介及获取元素
zy_zxcvbnm的博客
04-10 267
DOM简介 1.1什么是DOM 文档对象模型，是W3c组织推荐的处理可扩展标记语言（HTML\XML）的标准编程接口。W3C已经定义了一系列DOM接口，通过这些接口可以改变网页的内容，结构和样式。 DOM树 ...
JavaScript获取DOM元素的11种方法总结
10-24
2. 通过元素name属性获取：`document.getElementsByName(elementName)`方法用于根据name属性获取元素集合。与`getElementById`不同，此方法返回的是一个数组，因为可能存在多个元素共享同一个name属性值。一般在处理...
在vue中获取dom元素内容的方法
08-30
使用 ref 属性获取 DOM 元素内容是 Vue 中最常用的方法，这种方法可以让开发者轻松地获取到 DOM 元素的引用，从而进行各种操作。下面是一个简单的示例： DEMO export default { data () { return { ...
在Vue中使用ref获取dom元素节点及组件内的数据和方法
01-20
本文将详细讲解如何在Vue中使用`ref`来获取DOM元素节点以及组件内的数据和方法。 ### 一、获取DOM元素节点 在HTML模板中，给需要引用的DOM元素添加`ref`属性，如： ```html <div ref="mytitle">This is title ...
遍历DOM对象内的元素属性示例代码
09-04
总结来说，遍历DOM对象内的元素属性是通过JavaScript实现的，主要利用`for...in`循环配合`hasOwnProperty()`方法，以确保只处理对象自身的属性，而不包括继承的属性。通过这样的方式，我们可以方便地查看和操作HTML...
DOM获取元素的几种方式
qq_46492364的博客
05-25 2309
文章目录一、对象1.对象的概念2.对象字面量 # 前言 这部分学习Web API,包括DOM和BOM。JavaScript包括ES、DOM、BOM三个部分，其中ES是ECMAScript，是JavaScript的核心，是一套 一、对象 1.对象的概念 JavaScript中的对象其实就是生活中对象的一个抽象。JavaScript的对象是无序属性的集合。 其属性可以包含基本值、对象或函数。对象就是一组没有顺序的值。我们可以把JavaScript 中的对象想象成键值对，其中值可以是数据和函数。 2.对象字面
认识DOM及元素的获取
Twistedzs的博客
08-13 276
认识DOM及元素的获取
DOM 简介and获取元素
m0_64749865的博客
08-25 82
DOM简介and获取元素
DOM介绍及DOM获取元素的方式
YY的博客
11-18 607
getElementByld（）
DOM-DOM的介绍以及通过方法获取元素
qq_58167492的博客
07-14 219
DOM是什么？以及DOM操作获取元素的方法
获取或者设置dom元素的属性：
GuoRongABC的博客
05-11 713
获取或者设置dom元素的属性： 【0】innerText 获取或设置元素的文本内容 【1】innerHTML 获取或者设置 元素的内容（文本和标签） 【2】style 获取或设置元素的样式（只能获取或设置内联样式） 【3】className 获取或者设置class名 【4】id 获取或设置id名 【5】src 获取或设置 有src属性的元素的 src 属性 【6】getAttribute(‘属性’) 获取元素的指定属性的属性值 【7】setAttribute (‘属性’,
DOM：1.获取元素，2.操作元素（样式，属性，类名，内容）
qq_60839348的博客
12-09 1477
DOM：获取元素，操作元素（样式，属性，类名，内容）
DOM之简介、获取元素与事件基础
Gladion的博客
06-29 277
DOM之简介、获取元素与事件基础 前言（作者日记????） 觉得最近是多事之秋，本人也是有些心烦意乱、失魂落魄了。最近感觉对这个世界又有更深刻的认识了。总之这也算是一种成长吧。用小孩子的眼光看世界或做事果然不行。 提示：以下是本篇文章正文内容，下面案例可供参考 一、DOM简介 １.１什么是DOM 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言（ＨＴＭＬ或者XML）的标准编程接口。 W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网
根据自定义属性获取元素
Rainman_的博客
05-13 1594
<div data-id="example"></div> <script> var element = querySelector('div[data-id=example]'); </script>
JavaScript DOM操作详解：元素查找、内容获取与属性管理
本文档总结了JavaScript中关于Document Object Model (DOM)的基本操作方法，帮助开发者更有效地管理网页文档的结构和内容。主要涉及以下几个方面： 1. 查找元素： - `document.getElementById(id)`：通过元素的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值