常见DOM操作

文章目录

  • 概述
  • DOM常用操作
    • 事件
    • this的用法
    • 创建节点
    • 删除节点

概述

文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),对于任何一个html网页都可以将页面中所有内容当做一颗倒置的文档树理解,可以通过js的dom操作对树中任意节点进行访问(添加,删除,修改,检索)


DOM常用操作

1. 获取文档中的所有元素

  var all = document.all; // 返回一个包含了文档中所有节点的数组对象

2. 根据标签获取元素

  //获取页面中的所有h1元素 (返回数组对象)  let titles = document.getElementsByTagName("h1");  console.log(titles);

3. 根据元素的class名称获取元素(存在兼容性问题,慎用)

  //返回所有class名称为row的元素(返回数组对象)  let rows = document.getElementsByClassName("row");  console.log(rows);

4. 根据元素的name属性获取元素集合(一般只有表单元素才有name属性)

  let langs = document.getElementsByName("lang"); //返回数组
  1. 根据元素的id获取元素(因为id在页面中具备唯一性,因此以下代码只能获取一个元素)
  let selectAll = document.getElementById("selectAll");//返回单个元素对象

以上都是一些比较常规的获取dom的方式,另外javascript还提供了两种更为全面的获取dom对象的方式:

  1. document.querySelector():根据css的选择器获取匹配的单个元素

  2. document.querySelectAll():根据提供的css选择器获取匹配的多个元素

  //根据css的选择器获取指定选择器选中的单个元素  var h2 = document.querySelector("h2");  console.log(h2);    var tds = document.querySelectorAll("td");  console.log(tds);    //获取所有class="row" h1 h2元素?  var elements = document.querySelectorAll(".row,h1,h2");  console.log(elements);

元素上的属性

元素上的属性,比如id,value 可以通过 . 直接访问如果是自定义属性,那么可以通过如下两种方式来获取getAttribute("test")attributes["test"].nodeValue

样式

一个元素节点的style属性即对应的css通过给元素的style.backgroundColor 赋值,修改样式style.backgroundColor 这里的backgroundColor和css中的背景色background-color 是有所不同的

事件

焦点事件

   焦点相关的事件,分别有获取焦点和失去焦点    当组件获取焦点的时候,会触发onfocus事件    当组件失去焦点的时候,会触发onblur事件   <input type="text" onfocus="函数名()" onblur="函数名()" id="input1" placeHolder="输入框" >

鼠标事件

   鼠标事件,由鼠标按下,鼠标弹起,鼠标经过,鼠标进入,鼠标退出几个事件组成   当在组件上鼠标按下的时候,会触发onmousedown事件   当在组件上鼠标弹起的时候,会触发onmouseup事件   当在组件上鼠标经过的时候,会触发onmousemove事件   当在组件上鼠标进入的时候,会触发onmouseover事件   当在组件上鼠标退出的时候,会触发onmouseout事件   注: 当鼠标进入一个组件的时候,onmousemove和onmouseover都会被触发,   区别在于无论鼠标在组件上如何移动,   onmouseover只会触发一次,onmousemove每次移动都会触发

键盘事件

   键盘事件,由键盘按下keydown,键盘按下keypress,键盘弹起几个事件组成   当在组件上键盘按下的时候,会触发onkeydown事件   当在组件上键盘按下的时候,也会触发onkeypress事件   当在组件上键盘弹起的时候,会触发onkeyup事件   注:   都是用于表示键盘按下,onkeydown和onkeypress的区别在什么呢?   onkeydown   可以获取所有键,除了打印键Prts   可以获取用户是否点击了修饰键 (ctrl,shift,alt)   不能判断输入的是大写还是小写   onkeypress   只能获取字符键   不能获取用户是否点击了修饰键 (ctrl,shift,alt)   可以判断输入的是大写还是小写

点击事件

点击事件,由单击,双击按两个事件组成当在组件上单击的时候,会触发onclick事件当在组件上双击的时候,会触发ondblclick事件

变化事件

当组件的值发生变化的时候,会触发onchange事件 注:对于输入框而言,只有在失去焦点的时候,才会触发onchange<input type="text" id="t1" onchange="change()"   >

提交事件

可以在form元素上,监听提交事件当form元素提交的时候,会触发onsubmit事件<form action="路径" onsubmit="login()"></form>

this的用法

   this表示触发事件的组件,可以在调用函数的时候,作为参数传进去   <input type="button" onclick="singleClick(this)" value="">      function singleClick(button){   //这个this就是 button本身   }

父节点关系

   parentNode

同胞节点关系

   分别通过 previousSibling和nextSibling属性获取前一个,以及后一个同胞节点   注意:不是紧挨着情况 标签之间有任何字符、空白、换行都会产生文本元素。 所以获取到的节点是#text.

子节点关系

  子节点关系有:   firstChild 第一个子节点   lastChild 最后一个子节点   childNodes 所有子节点   注:firstChild 如果父节点的开始标签和第一个元素的开始标签之间有文本、空格、换行,那么firstChild第一个子节点将会是文本节点,不会是第一个元素节点 

childNodes和children的区别

   childNodes和children都可以获取一个元素节点的子节点。    childNodes 会包含文本节点    children 会排除文本节点 

创建节点

创建元素节点

   通过createElement 创建一个新的元素节点    接着把该元素节点,通过appendChild加入到另一个元素节点div中   var hr=document.createElement("hr");   var d1 = document.querySelector("#d1");   d1.appendChild(hr);

创建文本节点

   首先创建一个元素节点p段落标签   接着通过createTextNode创建一个内容节点text   把text加入到p   再把p加入到div var p=document.createElement("p"); var text = document.createTextNode("这是通过DOM创建出来的<p>"); p.appendChild(text); var d1 = document.querySelector("#d1"); d1.appendChild(p);

创建属性节点

   首先创建一个元素节点a    接着创建一个内容节点content    把content加入到a    然后通过createAttribute创建一个属性节点 href    设置href的值为http://www.baidu.com   通过setAttributeNode把该属性设置到元素节点a上    最后把a加入到div var a=document.createElement("a"); var content = document.createTextNode("百度"); a.appendChild(content); var href = document.createAttribute("href"); href.nodeValue="http://www.baidu.com"; a.setAttributeNode(href); var d1 = document.querySelector("#d1"); d1.appendChild(a);

删除节点

删除元素节点

   要删除某个元素节点有两步    第一:先获取该元素的父节点    第二:通过父节点,调用removeChild 删除该节点 var parentDiv = document.querySelector("#parentDiv"); var delElement= document.querySelector("#要删除的元素ID"); parentDiv.removeChild(delElement);

删除属性节点

  要删除某个属性节点有两步   第一:先获取该元素节点   第二:元素节点,调用removeAttribute删除指定属性节点var tag= document.querySelector("#id");tag.removeAttribute("属性名");

删除文本节点

   var tag= document.querySelector("#id");   tag.innerHTML="";

替换节点

与删除节点一样,替换节点也需要先获取父节点,然后通过父节点替换子节点。    1. 获取父节点    2. 创建子节点    3. 获取被替换子节点    4. 通过replaceChild进行替换    注: replaceChild 第一个参数是保留的节点,第二个参数是被替换的节点      var newDiv=  document.createElement("div");   var text = document.createTextNode("替换后的文本");   newDiv.appendChild(text);   var replaceElement= document.querySelector("#被替换的元素的ID");   var parentDiv = document.querySelector("#parentDiv");   parentDiv.replaceChild(newDiv,replaceElement);

innerHTML和innerText区别?

- innerHTML可获取或设置指定元素标签内的html内容,从该元素标签的起始位置到终止位置的全部内容(包含html标签)。- document.getElementById('box').innerHTML='<h1>hello</h1>';- innerText可获取或设置指定元素标签内的文本值,从该元素标签的起始位置到终止位置的全部文本内容(不包含html标签)- document.getElementById('box').innerText='<h1>hello</h1>';

以上两种情况结果分别为:
innerHTML:

innerText:

追加节点

通过appendChild追加节点。 追加节点一定是把新的节点插在最后面    1. 创建新节点    2. 获取父节点    3. 通过appendChild追加

在前方插入

有时候,需要在指定位置插入节点,而不是只是追加在后面。    这个时候就需要用到insertBefore    1. 创建新节点    2. 获取父节点    3. 获取需要加入的子节点    4. 通过insertBefore插入    注: insertBefore的第一个参数是新元素,第二个参数是插入位置 parentDiv.insertBefore(新元素,插入位置);

来源:https://www.icode9.com/content-4-800401.html

(0)

相关推荐

  • 常见临床操作图解(收藏)

    临床工作中4个需要洗手的时刻 一张图帮你通过颜色辨识针头,代号越大针头越细 试管和枕头颜色的秘密 静脉穿刺角度 不同注射方式的进针角度及深度 皮下注射部位 胸腔积液穿刺引流术的正确体位 能够在体表扪及 ...

  • 必须掌握的电脑常见检查操作

    我们在日常使用电脑的过程中,难免会出现一些问题,有时候是外部问题,有时候是质量问题,有时候是使用问题,一出问题可能就抓瞎了,不知道怎么办.经常朋友们问一个问题,我会让你们做相应的检查,但其实我发现大部 ...

  • 供应商关系管理常见的操作误区

    在传统供应商关系管理领域,企业存在以下几种常见错误的操作. 1.无节制压低单价 制造业的行业环境,决定其成本构成中,原材料或零部件占有了相当高的份额.不少企业的领导者将降成本的焦点放在了原材料或零部件 ...

  • 实验室十大常见危险操作,关乎生命!

    来源:赛弗安全 实验室安全事故的发生多半是由于平时实验人员对实验基本操作和基本技能的训练不够,有些实验人员动手之前也没有认真准备,因而做实验时,就容易犯这样那样的错误.这些错误虽然简单,但易被人忽视, ...

  • JavaScript之DOM操作

    DOM简介 是什么?    DOM,全称 Document Object Model,文档对象模型. 做什么?    dom 对象就是将标签封装成的 js 对象,而 JavaScript 中内置提供的 ...

  • Vue.js 获得兄弟元素,子元素,父元素(DOM操作)

    e.target 是你当前点击的元素 e.currentTarget 是你绑定事件的元素 e.currentTarget.previousElementSibling.innerHTML 获得点击元素 ...

  • 30分钟视频教你掌握32个PS常见修片操作

    好机友摄影上线了摄影理论文库,汇集了200多篇原创优秀摄影文章,内容涵盖了基本摄影理论,如曝光.测光.构图.用光.白平衡等,以及中级技巧如包围曝光.景深等,内容将持续更新. 许多摄影爱好者在苦练内功, ...

  • js中的DOM操作

    一.前言 DOM 是 W3C(World Wide Web Consortium)标准.同时也 定义了访问诸如 XML 和 HTML 文档的标准: DOM是一个使程序和脚本有能力动态地访问和更新文档的 ...

  • 最全的JavaScript常见的操作数组的函数方法宝典

    JavaScript在其内部封装了一个Array对象,使得我们可以方便地使用数组这种简单的数据结构,同时,也在 Array对象的原型上定义了一些常用并且很有用的操作数组的函数. 本文就将详细介绍一下每 ...