DOM学习总结

于 2022-05-27 21:43:57 发布
阅读量424 收藏 4
点赞数
文章标签： 学习 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Rewind_lv/article/details/125011554
版权

一、DOM简介

  1. DOM定义

    1. 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可拓展标记语言（HTML或者XML）的标准编程接口
    2. W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容，结构和样式

  2. DOM树

    • 文档：一个页面就是一个文档，DOM中使用document表示

    • 元素：页面中的所有标签都是元素，DOM中使用element表示

    • 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表

      DOM把以上内容都看做是对象

二、获取元素

  1. 根据ID获取，getElementById(‘id名’) 返回匹配id的元素

    1. 因为我们文档页面从上往下加载，所以先得有标签，所以我们script写到标签的下面
    2. get获得,element元素,by通过 驼峰命名法
    3. 参数 id是大小写敏感的字符串
    4. console.dir 打印我们返回的元素对象，更好的查看里面的属性和方法

  2. 根据标签名获取，getElementsByTagName(‘标签名’) 返回带有指定标签名的对象的集合

    1. 返回的是，获取过来元素对象的集合，以伪数组的形式存储
    2. 我们想要依次打印里面的元素对象我们可以采取遍历的方法
    3. 得到的元素对象是动态的，随页面内的元素变化而变化
    4. 如果页面中只有一个li，返回的还是伪数组的形式
    5. 如果页面中没有这个元素，返回的是空的伪数组的形式

    还可以获得某个元素（父元素）内部所有指定标签名的子元素element.getElementsByTagName('标签名')

    父元素必须是单个对象（必须指明是哪一个元素对象），获取的时候不包括父元素自己

  3. 通过H5新增的方法获取，getElementsByClassName(‘类名’)，根据类名获得某些元素的集合

    querySelector(‘选择器’) 根据指定选择器返回第一个元素对象 ，切记里 面的选择器需要加符号.box #nav

    querySelectorAll(‘选择器’) 根据指定选择器返回所有元素对象集合

  4. 获取特殊元素，获取body元素 document.body，

    获取html元素document.documentElement

三、事件基础

JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为（触发-响应机制），网页中每个元素都可以产生某些可以触发JavaScript的事件

  1. 事件是由三部分组成的，事件源，事件类型，事件处理程序我们也称为事件三要素

    1. 事件源 事件被触发的对象 谁 按钮
    2. 事件类型 如何触发 什么事件，比如鼠标点击（onclick）还是鼠标经过还是键盘按下
    3. 事件处理程序 通过一个函数赋值的方式 完成

  2. 执行事件的步骤：1.获取事件源 2.注册事件(绑定事件) 3.通过事件处理程序(采取函数赋值形式）

四、操作元素

JavaScript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等

  1. 改变元素内容

    element.innerText从起始位置到终止位置的内容，但他去除html标签，同时空格换行也会去掉

    element.innerHTML起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行

    书写规范：element.innerHTML = '';

    二者区别：1.innerText 不识别html标签，非标准；2.innerHTML 识别html标签，W3C标准

    ​ 这两个属性是可读写的，可以获取元素里面的内容

  2. 常见元素的属性操作

    书写规范：标签.属性 = '';

  3. 表单元素的属性操作

    表单里面的值 文字内容通过value来修改 ，书写规范input.value = ''

    如果想要某个表单被禁用，不能再点击，btn.disabled = true

    表单2个新事件，获得焦点onfocus，失去焦点onblur

  4. 样式属性操作

    行内样式操作，element.style 类名样式操作element.className

    通过使用element.style获得修改元素样式，如果样式较少或者功能简单的情况下使用

    书写规范：element.style.样式属性（驼峰命名） = ''

    • JS里面的样式采取驼峰命名法
    • JS修改style样式操作，产生的是行内样式，css权重比较高

    通过className修改元素样式，书写规范：element.className = ''

    元素被触发后的样式直接在style中添加对应class名完成修改，事件触发使得当前元素的类名发生改变，适合于样式较多或者功能复杂的情况

    • 如果样式修改较多，可以采取操作类名方式更改元素样式
    • class因为是个保留字，因此使用className来操作元素类名的属性
    • className会直接更改元素的类名，会覆盖原来的类名

    如果想要保留原先的类名，我们可以这么做，多类名选择器element.className = '原 现'

  5. 排他思想

    如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法；

    1.所有元素全部清楚样式 2.给当前元素设置样式 3.注意顺序不能颠倒

  6. 自定义属性的操作

    程序员自己添加的属性称为自定义属性

    1. 获取元素的属性值
      1. element.属性 获取内置属性值（元素本身自带的属性）
      2. element.getAttribute(‘属性’) 主要获得自定义的属性（标准）我们程序员自定义属性
    2. 设置元素的属性值
      1. element.属性 = ‘’ 注意修改class属性时，属性名应为className
      2. element.setAttribute(‘属性’,‘值’) 主要针对于自定义属性，注意class特殊，这里面写的就是class，而不是className
    3. 移除属性
      1. element.removeAttribute(‘属性’)

  7. H5自定义属性

    1. 自定义属性的目的：为了保存并使用数据，有些数据可以保存到页面中而不用保存到数据库中。

    2. 为了避免元素自定义属性和内置属性之前引起歧义，H5新增了自定义属性：

      1. 设置自定义属性data-开头作为属性名并赋值，或使用JS的setAttribute来设置自定义属性

      2. 获取H5自定义属性，兼容性获取，使用JS的getAttribute，或者使用H5新增element.dataset.index或者element.dataset[‘index’]，ie11才能使用

        • dataset是一个集合里面存放了所有以data开头的自定义属性
        • 如果自定义属性里面有多个-链接的单词，我们获取的时候采取驼峰命名法
        • 他只能获取data-开头的

五、节点操作

  1. 节点概述：网页中所有的内容都是节点（标签、属性、文本、注释等），在DOM中，节点使用node来表示

    1. HTML DOM树中的所有节点均可以通过JavaScript进行访问，所有HTML元素（节点）均可被修改，也可以创建和删除
    2. 一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。
    3. 元素节点 nodeType为1，属性节点nodeType为2，文本节点nodeType为3（文本节点包含文字、空格、换行等）；实际开发中，节点操作主要操作的是元素节点

  2. 节点层级

    利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系

    1. 父级节点：node.parentNode ，

      得到的是离元素最近的父级节点，如果找不到父节点就返回为null

    2. 子节点：parentNode.childNodes

      返回包含指定节点的子节点的集合（包含元素节点，文本节点 等），该集合为即时更新的集合

      parentNode.children 获取所有的子元素节点，也是我们实际开发常用的

      1. 获取元素第一个子节点parentNode.firstChild，找不到则返回null。

      2. 获取元素最后一个子节点parentNode.lastChild不管是文本节点还是元素节点

      3. parentNode.firstElementChild 返回第一个子元素节点

      4. parentNode.lastElementChild 返回最后一个子元素节点，二者存在兼容性问题

      5. 实际开发的写法，既没有兼容性问题又返回第一个子元素

        parentNode.children[0] 第一个子元素节点

        parentNode.children[parentNode.children.length-1] 最后一个子元素节点

    3. 兄弟节点：node.nextSibling 返回当前元素的下一个兄弟节点，包含元素节点或文本节点

      ​ node.previousSibling 返回当前元素的上一个兄弟节点，同上

      ​ node.nextElementSibling 返回当前元素下一个兄弟元素节点

      ​ node.previousElementSibling 返回当前元素上一个兄弟元素节点，兼容性问题

  3. 节点操作

    1. 创建节点 document.createElement('tarName')，

      document.createElement()方法创建由tagName指定的HTML元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点

    2. 添加节点node.appendChild(child)

      node.appendChild()方法将一个节点添加到指定父节点的子节点列表末尾。类似于CSS里面的after伪元素，后面追加元素，类似于数组中的push

      node.insertBefore(child,指定元素)

      node.insertBefore()方法将一个节点添加到父节点的指定子节点面前。类似于CSS里面的before

    3. 删除节点 node.removeChild(child)

      node.removeChild()方法从DOM中删除一个子节点，返回删除的节点

      阻止链接跳转需要添加javascript:void(0)；或者javascript:;

    4. 复制节点（克隆节点)node.cloneNode()

      node.cloneNode()方法返回调用该方法的节点的一个副本，也称为克隆节点/拷贝节点

      如果括号参数为空或者为false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点

      如果括号参数为true，则是深度拷贝，会复制节点本身以及里面所有的子节点

  4. 三种动态创建元素的区别

    document.write() 是直接将内容写入页面的内容流，但是文档流执行完毕，则他会导致页面全部重绘。

    innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘

    innerHTML创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂

    createElement（）创建多个元素效率稍低一点点，但是结构更清晰

六、事件高级

6.1 注册事件（绑定事件）

  1. 给元素添加事件，称为注册事件或者绑定事件。

    注册事件有两种方式：传统方式和方法监听注册方式

    1. 传统注册方式：利用on开头的事件onclick

      特点：注册事件的唯一性，同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

    2. 方法监听注册方式：addEvenListener()的方法，ie9之前的浏览器不支持此方法，可使用attachEvent()代替（W3C标准，推荐方式）

    特点: 同一个元素同一个事件可以注册多个监听器，按注册顺序依次执行

  2. addEvenListener事件监听方式

    evenTarget.addEvenListener(type, listener[, useCapture])

    evenTarget.addEvenListener()方法将指定的监听器注册到evenTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。

    1. 该方法接收三个参数：

      • type：事件类型字符串，比如click，mouseover，
      • listener：事件处理函数，事件发生时，会调用该监听函数
      • useCapture：可选参数，是一个布尔值，默认是false。

    2. 注意事项：

      • 里面的事件类型是字符串，必定加引号，而且不带on
      • 同一个元素，同一个事件可以添加多个侦听器（事件处理程序）

  3. attachEvent事件监听方式（ie9以前版本支持，慎重使用）

    eventTarget.attachEvent(eventNameWithOn, callback)

    eventTarget.attachEvent()方法将指定的监听器注册到eventTarget(目标对象)上，当该对象触发指定的事件时，指定的回调函数就会被执行。

    1. 该方法接收两个参数：

      • eventNameWithOn：事件类型字符串，比如onclick，onmouseover
      • callback：事件处理函数，当目标触发事件时回调函数被调用

  4. 注册事件兼容性解决方案

    兼容性处理的原则：首先照顾大多数的浏览器，再处理特殊了浏览器

6.2 删除事件（解绑事件）

  1. 删除事件的方式

    传统方式：eventTarget.onclick = null

    方法监听注册方式： eventTarget.removeEventListener(type,listener[, useCapture]

    与attachEvent相对应的eventTarget.detachEvent(eventNameWithOn,callback)

6.3 DOM事件流

事件流描述的是从页面中接收事件的顺序。

事件发生时会在元素节点之间按照待定的顺序传播，这个传播过程即DOM事件流

DOM事件流分为3个阶段：1.捕获阶段，2.当前目标阶段，3.冒泡阶段

事件冒泡：IE 最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点的过程

事件捕获：网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到到最具体的元素接收的过程

  • JS代码只能执行捕获或者冒泡其中的一个阶段
  • onclick和attachEvent只能得到冒泡阶段
  • addEventListener（type，listener[，useCapture]）第三个参数如果是true，表示在事件捕获阶段调用事件处理程序；如果是false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序
  • 实际开发中我们很少使用事件捕获，我们更关注事件冒泡
  • 有些事件是没有冒泡的，比如onblur、onfocus、onmouseover、onmouseleave
  • 事件冒泡有时候会带来麻烦，有时候又会帮助很巧妙的做某些事情

6.4 事件对象

  1. 事件对象：event就是一个事件对象，写在我们侦听函数的小括号里面，当形参来看

    div.onclick = function(event){}

    event对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。

    简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，他有很多属性和方法。

    比如：谁绑定了这个事件；鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置；键盘触发事件的话，会得到键盘的相关信息，如按了哪个键。

    事件对象是我们事件的一系列相关数据的集合，跟事件相关的，比如鼠标点击里面就包含了鼠标的相关信息：鼠标坐标等，如果是键盘事件里面就包含了键盘事件的信息，比如，判断用户按下了那个键

  2. 使用语法：这个event是个形参，系统帮我们设定为事件对象，不需要传递实参过去。

    当我们注册事件时，event对象就会被系统自动创建，并以此传递给事件监听器（事件处理函数）

    事件对象只有有了事件才会存在，他是系统给我们自动创建的，不需要我们传递参数

    这个事件对象我们可以自己命名，比如event，eve，e

  3. 兼容性问题

    事件对象也有兼容性问题，ie678通过window.event，兼容性的写法e = e || window.event

  4. 常见事件对象的属性和方法

    1. e.target -> 返回触发/点击事件的对象（元素）

      1. 与this的差别：this返回的是绑定事件的对象（元素），

        跟this有个非常相似的属性currentTarget，ie678无法使用

      2. 兼容性问题：ie678使用，e.srcElement

    2. e.type返回事件的类型，比如click，mouseover

    3. 阻止默认行为（事件），让链接不跳转，或者让提交按钮不提交

      1. 监听器注册方式：e.preventDefault(）方法 标准写法

      2. 传统注册方式：e.preventDefault(）方法 标准写法

        e.returnValue 属性 传统浏览器，ie678使用

        我们可以利用 return false 也能阻止默认行为，没有兼容性问题

        特点：return后面的代码不执行了，而且只限于传统的注册方式

6.5 阻止事件冒泡

  1. 阻止事件冒泡的两种方式

    事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点

    阻止事件冒泡标准写法：利用事件对象里面的stopPropagation（）方法

    非标准写法：ie678利用事件对象cancelBubble属性

6.6 事件委托（代理、委派）

  1. 事件委托也称为事件代理，在JQuery里面称为事件委派
  2. 事件委托的原理：不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点；事件委托的作用：只操作了一次DOM，提高了程序的性能

6.7 常用的鼠标事件

  1. 常用的鼠标事件：onclick鼠标点击左键触发，onmouseover鼠标经过触发，onmouseout鼠标离开触发，onfocus获得鼠标焦点触发，onblur失去鼠标焦点触发

    1. 禁止鼠标右键菜单contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消静默的上下文菜单
    2. 禁止鼠标选中（selectstart开始选中）

  2. 鼠标事件对象，MouseEvent

    e.clientX返回鼠标相对于浏览器窗口可视区的X坐标

    e.clientY返回鼠标相对于浏览器窗口可视区的Y坐标

    e.pageX返回鼠标相对于文档页面的X坐标，IE9以上支持

    e.pageY返回鼠标相对于文档页面的Y坐标，IE9以上支持

    e.screenX返回鼠标相对于电脑屏幕的X坐标

    e.screenY返回鼠标相对于电脑屏幕的Y坐标

    鼠标移动事件：mousemove

6.8 常用的键盘事件

  1. 常用的键盘事件：onkeyup某个键盘按键被松开时触发，

    onkeydown某个键盘按键被按下时触发（不松开一直触发）

    onkeypress某个键盘按键被按下时触发，但是他不识别功能键，比如Ctrl，shift箭头等 （不松开一直触发）

    1. 三个事件的执行顺序：keydown – keypress – keyup

  2. 键盘事件对象，keyboardEvent

    keycode返回该键的ASCII值，我们可以利用keycode返回的ASCII值来判断用户按下了那个键

    • keyup和keydown事件不区分字母大小写，a 和 A 得到的都是65
    • keypress事件区分字母大小写，a得到的是97，A 得到的是65
Rewind_lv
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript学习—DOM总结
业精于勤，荒于嬉
04-04 384
DOM概念：      DOM是文档对象模型（Document Object Model）的简称，它的基本思想是把结构化文档（比如HTML和XML）解析成一系列的节点（对象），再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口，以达到使用编程语言操作文档的目的（比如增删内容）。      当网页被加载时，浏览器会创建页面的文档对象模型（Document...
JavaScript：dom心得
hejia729371286的博客
12-27 563
一、什么是 HTML DOM？ 二、HTML DOM 节点 三、dom的访问方式，还有节点的属性，元素，文本
JavaScript基础学习报告：关于JavaScript文本对象模型DOM的学习心得
qq_41096610的博客
04-20 502
JavaScript基础学习报告：关于JavaScript文本对象模型DOM的学习心得 什么是JavaScript DOM 这一段时间在学习JavaScript有关的内容，JavaScript的文档对象模型，通俗的说就是一个接口，中立于平台和语言的接口，它允许程序和脚本动态的访问和更新文档的内容、结构和样式。 DOM定义了访问HTML文档的标准 当网页被加载时，浏览器会创建页面的文档对象模型（Do...
DOM心得
半亩方塘
02-08 996
DOM心得绯雨闲丸本文介绍了DOM（文档对象模型）的结构和常规使用方法。通过本文，读者可以学会用DOM来对XML文档进行常见的处理。本文不讨论DOM的设计和实现技巧。关键词：    XML DOM概述DOM（文档对象模型）是对XML数据的描述体系，它用树型结构的文档来保存XML数据。此外，DOM也包括了解析、处理XML数据的API。在开始使用DOM之前，首先来了解一下它
JavaScript自学心得二（DOM对象、事件详解、内置对象、DOM元素控制HTML元素）
qq_39082301的博客
05-10 252
一：JavaScript DOM对象1、DOM简介：当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）；JavaScript能够改变页面中的所有（HTML元素、HTML属性、CSS样式、）以及对所有事件做出反应。2、DOM操作HTML：①改变HTML输出流（备注：绝对不要在文档加载完成之后使用document.write()；这会覆盖文档）②寻找元素：通过...
JS基础 DOM编程学习总结
qq_40877709的博客
07-16 392
1.JavaScript DOM 概述 每个在浏览器打开的HTML文档都会成为doucment对象。doucment对象可以对页面中所有的元素进行访问，doucment对象是window对象的一部分。 2.JavaScript节点与节点树 在加载html页面时，浏览器会生成一个与之对应的树形结构用来表示页面内部结构。 html标签为根标签，head为html的子标签，meta和title是兄弟关系。 3.JavaScript获取HTML标签元素 getElementById()​ 根据id获取元素，id
DOM知识点总结
m0_47224321的博客
10-26 1362
一、DOM初识 1、DOM—文档对象模型 操作页面元素的 2、DOM又被称为文档树模型 （1）文档：把一个html页面文件可以看成一个文档，由于万物皆对象，所以可以把这个文档看成一个对象。 （2）文档中的所有的标签都可以看成是一个对象 （3）页面中的每个标签都是一个元素（element）,每个元素都可以看成是一个对象。 （4）标签中可以嵌套标签，标签中有标签，元素中有元素 （5）一个html页面都有一个根标签—》html---->根元素，里面有很多个标签（元素）—》很多个对象 ========
DOM学习篇 一
限定小码农的博客
07-23 128
DOM的介绍 Document Object Model：文档对象模型 是XML解析文档；DOM操作，可以简单理解成“元素操作” 原理：将html文档，看成一颗节点树，然后，使用dom提供的API,对应的节点进行增删改查；从而使用通过js 去动态操作html元素 将其用树形表示是为了更好地给每一个元素进行定位，以便让我们找到想要的元素 每一个元素就是一个节点，而每一个节点就是一个对象。也就是说，我们在操作元素时，其实就是把这个元素看成一个对象，然后使用这个对象的属性和方法来进行相关操作 一、查看节点 du
dom学习总结
02-16
dom学习总结
JavaScript DOM 学习总结(五)
10-23
当页面加载时，浏览器会创建页面的文档对象模型（Document Object Model）。文档对象模型定义访问和处理HTML文档的标准方法，本篇文章给大家介绍javascript dom 学习总结(五)，感兴趣的朋友一起学习吧
Dom 学习总结以及实例的使用介绍
09-05
以下是一些关于DOM学习的关键知识点： 1. **DOM操作**： - `document.createElement()`：创建一个新的HTML元素。 - `document.getElementById()`：根据ID查找元素。 - `document.querySelector()`和`document....
DOM事件总结，前端学习
06-30
HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。 事件通常与函数结合使用，函数不会在事件发生前被执行！ (如用户点击按钮)。 提示： 在 W3C 2 级 DOM 事件中规范了事件模型。
jQuery学习之DOM节点的插入方法总结
01-19
本文主要总结了jQuery中DOM节点的插入方法，以及各种方法的注意点，下面话不多说，来看看详细的介绍吧。 一、内部插入append()与appendTo() append：这个操作与对指定的元素执行原生的appendChild方法，将它们添加...
js学习总结之dom2级事件基础知识详解
01-19
我们使用的DOM2事件绑定，其实是让box通过原型链一直找到EventTarget这个内置类原型上的addEventListener方法实现的。 DOM0级事件绑定:只能给一个元素的某一个行为绑定一次方法，第二次绑定的会把前面的覆盖掉。 DOM...
DOM方法总结
12-24
dom方法总结 很详细 新人可以下载来学习
DOM基础操作
ym深的博客
10-14 187
javaScript的组成 js语法：ECMAScript DOM：Document Object Model（文本对象模型），可以操作html+css BOM：Browser Object Model（浏览器对象模型） DOM树结构图 DOM节点类型 基于节点树的查询 childNodes 查询所有的子节点们 firstChild 查询第一子节点 lastChild 查询最后一个子节点...
DOM操作总结
泠泉石上的博客
01-26 407
DOM操作总结 初识DOM DOM是在ECMAScript基础上添加的提供访问和操作网页内容的方法和接口。可操作HTML中的标签内容、样式、结构。 基本选择器 ID选择器： 1.getElementById('ID') 2.直接使用ID名称选择（浏览器会将ID挂在载window对象上，因此在构建页面时，应该少用ID。这种选择方法存在兼容问题） var bo
DOM（一）
勤能补拙，孰能生巧
07-12 332
HTML DOM定义了访问和操作 HTML 文档的标准方法。DOM 以树结构表达HTML 文档。 DOM(文档对象模型 ) 定义了访问 HTML 和 XML 文档的标准：是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。 W3C DOM 标准被分为 3 个不同的部分： 核心 DOM - 针对任何结构化文档的标准模型 XML DOM - 针对 XML 文档的标...
【JavaScript】DOM编程学习总结篇
嗨Sirius
12-04 643
文章目录一、基本类型介绍1.Node类型2.Element类型3.Text类型4. Attr类型5 Comment类型 一、基本类型介绍 1.Node类型 所有DOM节点继承该类型，Node有一个属性nodeType表示Node的类型，它是一个整数，其数值分别表示相应的Node类型 这些Node类型中，我们最常用的就是element，text，attribute，comment，document，document_fragment这几种类型 2.Element类型 Element提供了对元素标签
如何学习html dom对象关于定位的内容
最新发布
08-05
### 回答1： 要学习HTML DOM对象关于定位的内容，可以从了解HTML DOM对象的概念开始，然后研究DOM操作，了解DOM节点、属性和方法等。此外，还可以研究如何使用CSS选择器来查找DOM元素，以及如何使用JavaScript来操作它们。 ### 回答2： 学习HTML DOM对象关于定位的内容可以通过以下几种途径： 1. 理解HTML DOM的基本概念：首先需要理解HTML DOM（文档对象模型）是一种将HTML文档表示为树状结构的方式，可以以树的形式访问和操作HTML元素。了解DOM的基本概念有助于理解DOM对象的定位和操作。 2. 学习HTML DOM对象的层次结构：掌握HTML DOM对象的层次结构非常重要。可以通过查看HTML文档的源代码或者使用浏览器的开发者工具来了解DOM层次结构。了解元素的父元素、子元素、兄弟元素等关系，可以帮助我们更好地定位DOM对象。 3. 使用选择器定位DOM对象：了解如何使用选择器来定位DOM对象是非常重要的。可以使用CSS选择器或JavaScript DOM方法来选择指定的DOM对象。例如，使用getElementById()方法可以通过元素的id属性来定位DOM对象。 4. 学习DOM对象的属性和方法：掌握DOM对象的常用属性和方法可以帮助我们操作DOM对象。例如，使用DOM对象的style属性可以设置元素的样式，使用DOM对象的innerHTML属性可以获取或设置元素的内容。 5. 练习实践和查阅文档：学习DOM对象的定位内容需要不断的练习和实践。可以尝试编写一些简单的HTML页面，然后使用DOM对象来操作和定位元素。同时，及时查阅相关的文档和教程，如MDN（Mozilla开发者网络）上的DOM文档，可以帮助我们进一步理解和学习DOM对象的定位内容。 总结起来，学习HTML DOM对象关于定位的内容需要理解DOM的基本概念和层次结构，掌握选择器和DOM对象的属性方法，并通过实践和查阅文档来深入学习和理解。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值