DOM基本概念

最新推荐文章于 2024-07-26 11:41:15 发布

牛奶味的辣椒水

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量261

点赞数

分类专栏：全栈前端文章标签： javascript js html java

本文链接：https://blog.csdn.net/qq_41469636/article/details/108317124

版权

全栈前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

获取元素节点

var 变量名=document.getElementById("id的属性值");
...
var 变量名=document.querySelector("选择器");
var 数组名=document.querySelectorAll("选择器");

元素上的属性

     <div id="d1">hello HTML DOM</div>

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

节点名称

   //nodeName表示一个节点的名字
   document.nodeName 文档的节点名，是 固定的#document
   d1.nodeName 元素的节点名，是对应的标签名 div
   d1.attributes[0].nodeName 属性的节点名，是对应的属性名 id
   d1.childNodes[0].nodeName 内容的节点名，是固定的 #text
   示例： <div id="d1">hello HTML DOM</div>

节点值

   //nodeValue表示一个节点的值
   document.nodeValue 文档的节点值，是 null
   div1.nodeValue 元素的节点值，是null
   div1.attributes[0].nodeValue 属性的节点值，是对应的属性值 d1
   div1.childNodes[0].nodeValue 内容的节点值，是内容 即： #text
   示例： <div id="d1">hello HTML DOM</div>

节点类型

   nodeType表示一个节点的类型
   不同的节点类型，对应的节点类型值是不一样的
   document.nodeType 文档的节点类型，是 9
   div1.nodeType 元素的节点类型，是 1
   div1.attributes[0].nodeType 属性的节点类型，是 2
   div1.childNodes[0].nodeType 内容的节点类型，是 3
   注释类型，是 8

元素的文本内容

    innerHTML

样式

   一个元素节点的style属性即对应的css
   通过给元素的style.backgroundColor 赋值，修改样式
   你也许注意到了style.backgroundColor 这里的backgroundColor和css中的背景色background-color 是有所不同的
   换句话说，通过DOM的style去修改样式，需要重新记忆另一套样式名称，很繁琐。
   建议使用jquery设置 css()函数就是用于设置样式，参数值和css的一样

事件

焦点事件

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

鼠标事件

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

键盘事件

   键盘事件，由键盘按下keydown，键盘按下keypress,键盘弹起几个事件组成
   当在组件上键盘按下的时候，会触发onkeydown事件
   当在组件上键盘按下的时候，也会触发onkeypress事件
   当在组件上键盘弹起的时候，会触发onkeyup事件
   注: onkeypress 是当按下并弹起的组合动作，这个说法是错误的
   都是用于表示键盘按下，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>

加载图片

  当整个文档加载成功，或者一个图片加载成功，会触发加载事件
  当body元素或者img加载的时候，会触发onload事件
 <body onload="loadBody()">
 <img onload="loadImg()" src="图片地址"/>
 </body>

this的用法

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

阻止事件的发生

   比如在提交一个表单的时候，如果用户名为空，弹出提示，并阻止原本的提交
   1. 在调用函数的时候，增加一个return
   2. 在函数中，如果发现用户名为空，则返回false
   3. 当onSubmit得到的返回值是false的时候，表单的提交功能就被取消了

节点关系

父节点关系

   parentNode

同胞节点关系

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

子节点关系

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

childNodes和children的区别

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

创建节点

创建元素节点

   通过createElement 创建一个新的元素节点 
   接着把该元素节点，通过appendChild加入到另一个元素节点d1中
     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);
   p.innerHTML="文本内容";
   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"); //<a></a>
   var content = document.createTextNode("百度");
   a.appendChild(content); //<a>百度</a>
   var hrefAttr = document.createAttribute("href"); //href=""
   hrefAttr.nodeValue="http://www.baidu.com";//href="http://www.baidu.com"
   a.setAttributeNode(hrefAttr); // <a href="http://www.baidu.com">百度</a>
   var d1 = document.querySelector("#d1");
   d1.appendChild(a); //把a链接放入到d1中

删除节点

删除元素节点

   要删除某个元素节点有两步 
   第一：先获取该元素的父节点 
   第二：通过父节点，调用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"); // <div></div>
     var text = document.createTextNode("替换后的文本"); //替换后的文本
     newDiv.appendChild(text);// <div>替换后的文本</div>
     var replaceElement= document.querySelector("#被替换的元素的ID");
     var parentDiv = document.querySelector("#parentDiv");//找爸爸
     parentDiv.replaceChild(newDiv,replaceElement);

追加节点

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

在前方插入

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

牛奶味的辣椒水

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM基本概念

获取元素节点var 变量名=document.getElementById("id的属性值");...var 变量名=document.querySelector("选择器");var 数组名=document.querySelectorAll("选择器");元素上的属性 <div id="d1">hello HTML DOM</div> 元素上的属性，比如id,value 可以通过 . 直接访问如果是自定义属性，那么可以通过如下两种.
复制链接

扫一扫

专栏目录