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返回一个数组

节点选择器

(节点)关系选择器:都是属性,而不是方法 父选子

  1.  omsg.children //返回一个数组

子选父

  1.  omsg.parentNode

第一个子

  1.  omsg.firstElementChild

最后一个子

  1.  omsg.lastElementChild

上一个兄弟

  1.  omsg.previousElementSibling

下一个兄弟

  1.  omsg.nextElementSibling

元素属性节点的操作分类

属性的操作:

1、作为属性操作:

可见的操作:

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

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

    1.  console.log(obox.title);
       obox.title = "123321";
       console.log(obox.className); //只能通过className,而不能通过class,因为class是个关键字
  • 非内置:自定义,不可以通过对象的方法进行操作,通过专属方法

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

    获得、设置、溢出

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

    1.  obox.getAttribute("class");

    不可见的操作:

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

    innerHTML

    nodeName

    nodeValue

    nodeType

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

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

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

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

2、作为属性节点:(专用方法,与其他节点的方法不互通)

attributes 会返回一个数组

  1.  <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本身也就是元素节点

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

只要是节点,就是对象

  1.  nodeName; //名称
     nodeValue; //值
     nodeType; //类型
     

节点属性

伪数组:假数组

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

真数组:

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

操作style

批量操作.cssText

DOM属性基本操作(增/删/改/查)

DOM元素的增加

创建

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

⚠️注:是插入到某个标签最后

使用方法

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

删除

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

修改:

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

非行内样式的操作

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

获取非行内样式(兼容问题

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

获取元素尺寸类样式

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

事件

  1. <div class="box">
  2. </div>
  3. var obox = document.querySelector(".box");

  4. obox.onclick = function(){
  5. console.log(1);
  6. }

事件源:obox,触发事件的源头

  1.  e.target

事件类型:onclick,通过什么行为触发

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

事件的分类:

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

onmouseleave和onmouseenter不支持事件冒泡

表单事件分类:

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

页面事件分类

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

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

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

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

获取事件对象

event获取方法

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

兼容方法

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

event的使用

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

 

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

### 键盘事件

事件源:document

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

事件对象

获得事件对象:event

获得事件对象兼容

  1. var e = eve || window.event;

获得keycode

  1. var keyC = eve.keyCode || eve.which

事件流

三个阶段:

  • 冒泡阶段:从里向外

  • 目标(当前事件)阶段

  • 捕获阶段:从外向内

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

浏览器默认冒泡

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

第三个值默认为false

事件委托

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

  1. oul.onclick = function(eve){
  2. var e = eve || window.event;
  3. var target = e.target || e.srcElement;
  4. if(target.nodeName == "LI"){
  5. console.log(target.innerHTML);
  6. }
  7. }

优势

  1. 节省性能

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

缺点

  1. this不够精准

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

  1. var oul = document.querySelector("ul");
  2. var oli = document.getElementsByTagName("li");
  3. oul.onclick = fn(oli,function(){
  4. console.log(this);
  5. console.log(this.innerHTML)
  6. })
  7. function fn(child,callback){
  8. return function(eve){
  9. var e = eve || window.event;
  10. var target = e.target || e.srcElement;
  11. for(var i = 0;i<child.length;i++){
  12. if(target == child[i]){
  13. callback.bind(target)();
  14. }
  15. }
  16. }
  17. }

DOM操作(基础版)的更多相关文章

  1. javascript DOM 操作基础知识小结

    经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的.   DOM添加元素,使用节点属性  <!DOCTYPE html PUBLIC ...

  2. DOM操作基础

    ownerDocument 返回元素的 ownerDocumentoffsetParent 获取父节点(找有定位的父节点,没有定位默认是body,ie7以下定位在自己是html)parentNode ...

  3. js的dom操作(整理)(转)

    js的dom操作整理(整理)(转) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来来更加方便的进行dom操作 1.dom是什么? 对于JavaS ...

  4. js的DOM操作整理(整理)

    js的DOM操作整理(整理) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来更加方便的进行dom操作 1.dom是什么? 对于JavaScrip ...

  5. day29—JavaScript中DOM的基础知识应用

    转行学开发,代码100天——2018-04-14 JavaScript中DOM操作基础知识即对DOM元素进行增删改操作.主要表现与HTML元素的操作,以及对CSS样式的操作.其主要应用知识如下图: 通 ...

  6. 【2017-03-28】JS基础、DOM操作

    一.JS基础 1.javascript功能 ⑴进行数据运算 ⑵控制浏览器功能 ⑶控制元素的属性.样式.内容 2.javascript位置和格式 可以放在html页的任意位置,也可以创建一个以js结尾的 ...

  7. webform(九)——JQuery基础(选择器、事件、DOM操作)

    JQuery -- 一个js函数包 一.选择器 1.基本选择器 ①id选择器:#       ②class选择器:.       ③标签名选择:标签名 ④并列选择:用,隔开          ⑤后代选 ...

  8. jquer 基础篇 dom操作

    DOM操作: 1.新增元素:创建元素:$("HTML")返回的创建成功的新元素新增子元素:元素.append(obj) 在匹配元素的里面新增一个子元素 追加方式 新元素作为最后一个 ...

  9. Jquery基础之DOM操作

    转自:http://www.cnblogs.com/bro-ma/p/3063942.html JQuery中的DOM操作主要对包括:建[新建].增[添加].删[删除].改[修改].查[查找][像数据 ...

随机推荐

  1. 初探java流操作

    在处理集合时,我们通常会迭代遍历它的元素,并从每个元素上执行某项操作.例如,假设我们想要对某本书中的所有长单词进行计数.首先我们要将所有单词放入一个列表中: String contents = new ...

  2. es6,@import一直报错 Can't resolve。。

    最近在项目中新增了一个按钮组的组件页面,但是在其他页面引入时,一直报错 引入方式:

  3. 洛谷 P3387 题解

    题面 裸跑一遍SPFA,统计每个点的入队次数: 如果该点的入队次数>=总点数,那么该点便是一个负环上的点: 重点!!!: 1.不是“YES”,是“YE5”: 2.不是“NO”,是“N0”:(是零 ...

  4. 用python绘制漂亮的图形

    先看效果,没有用任何绘图工具,只是运行了一段python代码. 代码如下: _ = ( 255, lambda V ,B,c :c and Y(V*V+B,B, c -1)if(abs(V)<6 ...

  5. Apache之——多虚拟主机多站点配置的两种实现方案

    Apache中配置多主机多站点,可以通过两种方式实现: 将同一个域名的不同端口映射到不同的虚拟主机,不同端口映射到不同的站点: 将同一个端口映射成不同的域名,不同的域名映射到不同的站点. 我们只需要修 ...

  6. JS节流和防抖函数

    一. 实现一个节流函数 // 思路:在规定时间内只触发一次function throttle (fn, delay) {  // 利用闭包保存时间  let prev = Date.now()  re ...

  7. javascript 异步请求封装成同步请求

    此方法是异步请求封装成同步请求,加上token验证,环境试用微信小程序,可以修改文件中的ajax,进行封装自己的,比如用axios等 成功码采用标准的 200 到 300 和304 ,需要可以自行修改 ...

  8. 什么是Singleton?

    Singleton:在Java中即指单例设计模式,它是软件开发中最常用的设计模式之一. 单:指唯一 例:指实例 单例设计模式,即某个类在整个系统中只能有一个实例对象可被获取和使用的代码模式. 要点: ...

  9. 线性分类 Linear Classification

    软分类:y 的取值只有正负两个离散值,例如 {0, 1} 硬分类:y 是正负两类区间中的连续值,例如 [0, 1] 一.感知机 主要思想:分错的样本数越少越好 用指示函数统计分错的样本数作为损失函数, ...

  10. Java——擦除

    直接代码分析一波: import java.util.*; public class Ex12 { public static void main(String[] args) { Class c1 ...