DOM操作（基础版）

DOM操作（基础版）

DOM是document Object Model的缩写，简称文档对象模型。只要记住这是操作文档的就行了。

DOM基础选择器

1、getElementById(id); //获取指定的id元素

2、getElementsByClassName(class); //通过class获取元素，返回值是数组

3、getElementsByTagName(p); //获取相同标签的节点列表，返回值是数组

4、getElementsByName(name); //获取相同元素的节点列表，返回数组

⚠️注：不是所有的标签都有name值。

⚠️注：空格和换行键是文本标签

强大的selector

document.querySelectorAll();

var oD = document.querySelector(); oD.childNode //获取当前元素节点的所有子节点，返回一个数组

oD.parentNode //获取当前元素节点的父元素，返回一个元素

class选择器返回的是数组对象，如果要使用其中的元素，通过索引解析出来

selector会选择第一个符合规则的元素，selectorAll返回一个数组

节点选择器

（节点）关系选择器：都是属性，而不是方法 父选子

 omsg.children             //返回一个数组

子选父

 omsg.parentNode

第一个子

 omsg.firstElementChild

最后一个子

 omsg.lastElementChild

上一个兄弟

 omsg.previousElementSibling

下一个兄弟

 omsg.nextElementSibling

元素属性节点的操作分类

属性的操作：

1、作为属性操作：

可见的操作：

  • 内置：系统提供，按照对象的操作方法进行操作

    可获取，可设置 对属性进行操作

     console.log(obox.title);
     obox.title = "123321";
     console.log(obox.className);        //只能通过className,而不能通过class，因为class是个关键字

  • 非内置：自定义，不可以通过对象的方法进行操作，通过专属方法

    get/set/romove-Attribute(); 对自定义的属性进行操作

    获得、设置、溢出

    以上三种方法也可以操作内置对象，如果通过这三种方法操作class，直接写class就可以，因为class在此时，是一个字符串

     obox.getAttribute("class");

    不可见的操作：

    内置： 对内部内置属性进行操作

    innerHTML

    nodeName

    nodeValue

    nodeType 

    obox.innerHTML;       //会返回标签及内容
 obox.innerText;       //只返回文本的内容
 obox.tagName;         //只能返回，不能操作

    非内置：对象的操作，直接写入对象内 对新增自定义的属性进行操作

     obox.abc = "123456";
     console.log(obox.abc);
     ​

    可以只分为内置属性和非内置属性。除了已经定义在标签内部的非内置属性，其他的都按点调用。而标签内部的非内置属性使用get/set/romove-Attribute();调用。

2、作为属性节点：（专用方法，与其他节点的方法不互通）

attributes 会返回一个数组

 <div class="box" a="10" b=20></div>
 var obox = document.querySeloector(".box");
 console.log(obox.attributes);
 //获取属性节点的节点的属性和属性值
 console.log(obox.attributes[0].nodeName);
 console.log(obox.attributes[0].nodeValue);
 ​

obox本身也就是元素节点

 obox.nodeName;        //节点名称--文本是#text，
 obox.nodeValue;       //节点值--文本是值
 obox.nodeType;        //节点类型--属性节点为2，元素节点为1，文本是3？？？
 ​
 节点类型(nodeType)节点名字(nodeName)节点值(nodeValue)
元素节点 1 标签名 null
文本节点 3 #text 文本
注释节点 8 #comment 注释的文字
文档节点 9 #document null
属性节点 2 属性名 属性值

只要是节点，就是对象

 nodeName;     //名称
 nodeValue;    //值
 nodeType;     //类型
 ​

节点属性

伪数组：假数组

可以使用索引和长度遍历，但是不能使用数组的方法 ​ arguments也是伪数组 ​ DOM选择器返回的数组也是伪数组

真数组：

可以使用索引和长度遍历，但是可以使用数组的方法

操作style

批量操作.cssText

DOM属性基本操作（增/删/改/查）

DOM元素的增加

创建：

 createElement();        //需要配合下面这个函数使用
 appendChild();          //将创建好的元素插入某个标签内的最后

⚠️注：是插入到某个标签内的最后

使用方法：

 <div class="box" a="10" b=20 id="box" title="divTitle">
       <p>这是一个测试文本...</p>
       <span>ssss</span>
       <span>aaaa</span>
 </div>
 var obox = document.getElementById("box");
 var e = document.createElement("input");
 e.value = "name";
 obox.appendChild(e);

删除：

 obox.removeChild(e);            //删除obox内的e元素
 obox.remover();                 //直接删除当前元素

修改：

var a = obox.lastElementChild;
 a.outerHTML = "<p>" + a.innerHTML + "</p>";

非行内样式的操作

 getcomputedStyle(obox,false)            //获取样式，只能获取不能设置
 getcomputedStyle(obox,false).background;

获取非行内样式（兼容问题）   

 function getStyle(obj,attr){             //获取非行间样式，obj是对象，attr是值
         if(obj.currentStyle){                //针对ie获取非行间样式
             return obj.currentStyle[attr];
         }else{
             return getComputedStyle(obj,false)[attr];   //针对非ie
         };
     };

获取元素尺寸类样式

名称描述
offsetParent 获取元素最近的具有定位属性的父级元素。如果都没有则返回body
offsetLeft 获取元素相对具有定位属性的父级元素的左侧偏移距离
offsetTop 获取元素相对具有定位属性的父级元素的顶部偏移距离
scrollLeft/scrollTop 滚动条最顶端和窗口中可见内容最顶端之间的距离--滚动距离
clientWidth/clientHeight 元素视窗宽度/高度
offsetWidth/offsetHeight 元素实际宽度/高度—可以用来测量元素在网页中实际的宽高

事件

<div class="box"> 
 </div>
 var obox = document.querySelector(".box");
 ​
 obox.onclick = function(){
   console.log(1);
 }

事件源：obox，触发事件的源头

 e.target

事件类型：onclick，通过什么行为触发

事件处理函数：function，触发这个行为时，要做的事情

事件的分类：

事件分类描述
onclick 单击
ondblclick 双击
onmousedown 按下
onmousemove 移动
onmouseover 放上去
onmouseout 离开
onmouseup 抬起
onmouseenter 进入
onmouseleave 离开

onmouseleave和onmouseenter不支持事件冒泡

表单事件分类：

表单事件分类描述
onsubmit 提交
onfocuse 获得焦点
onblur 失去焦点
onchange 改变文本区域的内容

页面事件分类

页面事件分类描述
onload 加载完成

事件对象：类似于一个秘书，在本次实践过程中，记录事件发生的所有信息

默认不显示，需要手动获取

只在事件中存在，开始前及结束后，都不存在

获取事件对象

event获取方法

 window.event;         //IE中
 eve                   //直接获取

兼容方法

 function fn(eve){
   var e = eve || window.event;
 }
⚠️注：event需要逐层传递，不要漏掉外部的function

event的使用

 e.button;               //返回按下鼠标按键的返回值，左0，中1，右2
 e.clientX;
 e.clientY;              //检测相对于浏览器的位置
 e.pageX;
 e.pageY;                //检测相对于文档的位置
 e.screenX;
 e.screenY;              //检测相对于屏幕的位置
 e.offsetX;
 e.offsetY;              //检测相对于元素左上角的位置

 

 

冒泡事件：会依次向上触发所有父级的相同事件，如果中间没有父级，则继续向上触发

### 键盘事件

事件源：document

键盘事件描述
onkeydwon 键盘按下
onkeyup 键盘抬起
onkeypress 按下并抬起

事件对象

获得事件对象：event

获得事件对象兼容

 var e = eve || window.event;

获得keycode

 var keyC = eve.keyCode || eve.which

事件流

三个阶段：

  • 冒泡阶段：从里向外

  • 目标（当前事件）阶段

  • 捕获阶段：从外向内

只有事件监听才可以进入捕获，目标状态不区分捕获和冒泡

浏览器默认冒泡

obox.addEventListener("click",function(){},flase);

第三个值默认为false

事件委托

将多个相同元素的相同事件，添加到页面上现存的共同的父元素，利用事件冒泡，配合事件源，找到真正点击的元素

 oul.onclick = function(eve){
              var e = eve || window.event;
              var target = e.target || e.srcElement;
              if(target.nodeName == "LI"){
                  console.log(target.innerHTML);
              }
          }

优势

  1. 节省性能

  2. 可一个页面上暂时不存在的元素绑定事件

缺点

  1. this不够精准

事件委托的封装，可以使用this

var oul = document.querySelector("ul");
     var oli = document.getElementsByTagName("li");
     oul.onclick = fn(oli,function(){
       console.log(this);
       console.log(this.innerHTML)
     })
     function fn(child,callback){
       return function(eve){
         var e = eve || window.event;
         var target = e.target || e.srcElement;
         for(var i = 0;i<child.length;i++){
           if(target == child[i]){
             callback.bind(target)();
           }
         }
       }
     }
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/seanxushuo/p/11438210.html