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是个关键字
- console.log(obox.title);
非内置:自定义,不可以通过对象的方法进行操作,通过专属方法
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);
- }
- }
优势
节省性能
可一个页面上暂时不存在的元素绑定事件
缺点
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)();
- }
- }
- }
- }
DOM操作(基础版)的更多相关文章
- javascript DOM 操作基础知识小结
经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的. DOM添加元素,使用节点属性 <!DOCTYPE html PUBLIC ...
- DOM操作基础
ownerDocument 返回元素的 ownerDocumentoffsetParent 获取父节点(找有定位的父节点,没有定位默认是body,ie7以下定位在自己是html)parentNode ...
- js的dom操作(整理)(转)
js的dom操作整理(整理)(转) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来来更加方便的进行dom操作 1.dom是什么? 对于JavaS ...
- js的DOM操作整理(整理)
js的DOM操作整理(整理) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来更加方便的进行dom操作 1.dom是什么? 对于JavaScrip ...
- day29—JavaScript中DOM的基础知识应用
转行学开发,代码100天——2018-04-14 JavaScript中DOM操作基础知识即对DOM元素进行增删改操作.主要表现与HTML元素的操作,以及对CSS样式的操作.其主要应用知识如下图: 通 ...
- 【2017-03-28】JS基础、DOM操作
一.JS基础 1.javascript功能 ⑴进行数据运算 ⑵控制浏览器功能 ⑶控制元素的属性.样式.内容 2.javascript位置和格式 可以放在html页的任意位置,也可以创建一个以js结尾的 ...
- webform(九)——JQuery基础(选择器、事件、DOM操作)
JQuery -- 一个js函数包 一.选择器 1.基本选择器 ①id选择器:# ②class选择器:. ③标签名选择:标签名 ④并列选择:用,隔开 ⑤后代选 ...
- jquer 基础篇 dom操作
DOM操作: 1.新增元素:创建元素:$("HTML")返回的创建成功的新元素新增子元素:元素.append(obj) 在匹配元素的里面新增一个子元素 追加方式 新元素作为最后一个 ...
- Jquery基础之DOM操作
转自:http://www.cnblogs.com/bro-ma/p/3063942.html JQuery中的DOM操作主要对包括:建[新建].增[添加].删[删除].改[修改].查[查找][像数据 ...
随机推荐
- Tomcat(Linux)
百度云:链接:http://pan.baidu.com/s/1o7MNTJc 密码:cfof 官方下载网址:http://archive.apache.org/dist/tomcat/tomca ...
- SpringMVC表单对象绑定到@ModelAttribute
支持绑定表单对象 jsp: <%@ taglib prefix="form" uri="http://www.springframework.org/tags/fo ...
- python正则-re的使用
今天在刷题的时候用到了正则,用的过程中就感觉有点不太熟练了,很久没有用正则都有点忘了.所以现在呢,我们就一起来review一下python中正则模块re的用法吧. 今天是review,所以一些基础的概 ...
- Js 基础知识1
JS比较运算符,有两种比较运算符: 第一种是==比较,它会自动转换数据类型再比较 第二种是===比较,它不会自动转换数据类型,如果数据类型不一致,返回false,如果一致,再比较. 不要使用==比较, ...
- JDK的命令行工具系列 (一) jps、jstat
概述 在我们进行故障定位和性能分析时, 可以使用Java Dump(也叫Dump文件)来帮助排查问题, 它记录了JVM运行期间的内存占用和线程执行等情况.其中Heap Dump文件是二进制格式, 它保 ...
- 使用Java 编写FTP中的长传文件和下载文件
实现FTP文件上传与下载可以通过以下两种种方式实现(不知道还有没有其他方式,),分别为:1.通过JDK自带的API实现:2.通过Apache提供的API是实现. 第一种方法:通过JDK自带的API实现 ...
- 【Java例题】3.1 7、11、13的倍数
1.找出1~5000范围内分别满足如下条件的数: (1) 7或11或13的倍数 (2) 7.11,或7.13或11.13的倍数 (3) 7.11和13的倍数. package chapter3; pu ...
- (数据科学学习手札66)在ubuntu服务器上部署shiny
一.简介 shiny是R中专门用于开发轻量级web应用的框架,在本地写一个shiny应用并调用非常方便,但如果你希望你的shiny应用能够以远程的方式提供给更多人来使用,就需要将写好的shiny应用部 ...
- Java泛型使用的简单介绍
目录 一. 泛型是什么 二. 使用泛型有什么好处 三. 泛型类 四. 泛型接口 五. 泛型方法 六. 限定类型变量 七. 泛型通配符 7.1 上界通配符 7.2 下界通配符 7.3 无限定通配符 八. ...
- java并发编程(二十六)----ThreadLocal的使用
其实ThreadLocal很多接触过多线程的同学都可能会很陌生,他不像current包里面那些耳熟能详的api一样在我们面前经常出现,更多的他作为一个本地类出现在系统设计里面.我们可以说一下Sprin ...