offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。...如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素的引用。 ...指的是offsetLeft只读属性返回当前元素左上角在offsetParent节点内向左偏移的像素数。...六、scrollTop和scrollLeft scrollLeft:对象的最左边到对象在当前窗口显示的范围内的左边的距离，即在出现了横向滚动条的情况下，滚动条拉动的距离。...scrollTop对象的最顶部到对象在当前窗口显示的范围内的顶边的距离，即在出现了纵向滚动条的情况下，滚动条拉动的距离。 下面的图有些复杂，但可以稍微看看。
之前写《再谈BOM和DOM(4):HTML DOM Event 对象》时候，对event对象及各种dom事件没有详细道来，这里些表格。备查。...鼠标事件 属性 描述 DOM onclick 当用户点击某个对象时调用的事件句柄。...框架/对象（Frame/Object）事件 属性 描述 DOM onabort 图像的加载被中断。...DOM Event 对象 https://www.w3school.com.cn/jsref/dom_obj_event.asp XML DOM - Element 对象 https://www.w3school.com.cn.../openbox2008/article/details/85261274 转载本站文章《再谈BOM和DOM(7):HTML DOM Event 对象属性及DOM事件详细列表》, 请注明出处：https
属性是节点（HTML 元素）的值，您能够获取或设置。 ---- 编程接口 可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。...所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。 方法是您能够执行的动作（比如添加或修改元素）。 属性是您能够获取或设置的值（比如节点的名称或内容）。...---- innerHTML 属性 获取元素内容的最简单方法是使用 innerHTML 属性。 innerHTML 属性对于获取或替换 HTML 元素的内容很有用。...---- nodeValue 属性 nodeValue 属性规定节点的值。...nodeType 属性返回节点的类型。
document对象(DOM)–认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理 HTML文档的标准方法。...DOM 将HTML文档呈现为带有元素、属性和文 本的树结构(节点树)。 HTML文档可以说由节点构成的集合，DOM节点有: 1....中的JavaScript、 DOM、CSS等文本。 3. 属性节点:元素属性，如标签的链接属性href="https://www.bai du.com"。...节点属性: 属性 说明 nodeName 返回一个字符串，其内容是给定节点的名字 nodeType 返回一个整数，这个数值代表节点的类型 nodeValue 返回给定节点的当前值 遍历节点树: 方法...console.log("控制类名，复原后 的class值为: "+one.className) } function haveAttribute(){ //2.6 getAttribute()方法 通过元素节点的属性名称获取属性的值
DOM的常用属性 ele.appendChild(dom对象) //向元素添加新的子节点，作为最后一个子节点。...ele.cloneNode(dom对象) //克隆元素。 ele.firstChild //返回元素的首个子元素（含文本节点）。...ele.removeAttribute(属性名) //从元素中移除指定属性。 ele.removeChild(dom对象) //从元素中移除子节点。...ele.replaceChild(dom对象) //替换元素中的子节点。 ele.scrollHeight //返回元素的整体高度。...ele.setAttribute(属性名，属性值) //把指定属性设置或更改为指定值。 ele.style //设置或返回元素的style属性。 ele.tagName //返回元素的标签名。
研究html的对象，事件和方法，从js的角度来思考，这个标签的属性是通过什么方法，触发什么事件来实现的 键盘鼠标事件 页面窗口事件 表单事件 一、window事件属性 针对window对象触发的事件...} 13.onpopstate 当浏览器窗口记录改变时运行的脚本， 14.onredo 当文档执行撤销时触发的事件 二、form事件属性 由html表单内触发的事件，通常使用在form元素中 1.onblur...有相似的地方，都是改变文本内容时触发事件 但是onchange是在input失去焦点时才触发，oninput是立刻触发 demo查看 7.oninvalid oninvalid事件要搭配required属性来使用...required如果使用该属性，代表必填字段，oninvalid是当元素无效时触发的事件 <input type="text" oninvalid="myfun()" required
Document 对象描述 HTMLDocument 接口对 DOM Document 接口进行了扩展，定义 HTML 专用的属性和方法。...很多属性和方法都是 HTMLCollection 对象（实际上是可以用数组或名称索引的只读数组），其中保存了对锚、表单、链接以及其他可脚本元素的引用。 这些集合属性都源自于 0 级 DOM。...Element 对象 在 HTML DOM 中，Element 对象表示 HTML 元素。 Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。...Attribute 对象 在 HTML DOM 中，Attr 对象表示 HTML 属性。 HTML 属性始终属于 HTML 元素。...在 W3C DOM Core 中，Attr (attribute) 对象从 Node 对象继承所有属性和方法。 在 DOM 4 中，Attr 对象不再从 Node 继承。
JQuery中的DOM对象操作 1.查找节点 var li = (“ul li:eq(1)”); //查找元素 $li.attr(“title”); //查找元素的属性值 2，创建和插入节点： var...7，属性操作： $ul.attr({“title”:“yourTitle”, “name”:“theName”}); //同时为两个属性赋值。...$ul.removeAttr(“title”); //删除title属性。...11，CSS-DOM操作： ul.css({fontSize:“30px”, backgroundColor:"#aaafff"}); 或 $ul.height(“10em”); //设置ul的高度为...var offsetObj= $ul.offset(); var vLeft= offsetObj.left; var vTop = offsetObj.top; //获取元素在当前视窗的相对偏移，返回的对象包含两个属性
HTML 模板<html> <head> <title>我是网站标题</title> </head> <body> ...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vie...
IE 属性 除了上面的鼠标/事件属性，IE 浏览器还支持下面的属性： 属性 描述 cancelBubble 如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。...srcElement 对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。...标准 Event 属性 下面列出了 2 级 DOM 事件标准定义的属性。 属性 描述 bubbles 返回布尔值，指示事件是否是起泡事件类型。...type 返回当前 Event 对象表示的事件的名称。 标准 Event 方法 下面列出了 2 级 DOM 事件标准定义的方法。...IE 的事件模型不支持这些方法： 方法 描述 initEvent() 初始化新创建的 Event 对象的属性。 preventDefault() 通知浏览器不要执行与事件关联的默认动作。
第3章 jQuery对象和DOM对象 3.1 jQuery对象和DOM对象的区别 DOM对象 用原生JavaScript获取的DOM对象 通过document.getElementById() 反馈的是元素...伪数组(集合)，集合中的每一个对象是DOM对象 jQuery对象 jQuery对象 用$()的方式获取的对象 jQuery对象又可以叫做包装集(包装的DOM对象的集合) 区别 jQuery对象不能使用DOM...对象的成员，DOM对象不能使用jQuery对象的成员 // DOM对象 var box = document.getElementById...('hello'); 3.2 jQuery对象和DOM对象的相互转换 jQuery对象转换成DOM对象： jQuery对象.get(索引值); jQuery对象[索引值]...jQuery对象是包装集(集合)，从集合中取数据可以使用索引的方式 DOM对象转换成jQuery对象： $(DOM对象) 只有这一种方法;
什么是节点属性？比如一个 Input 元素，它有一些 class、id、name、value 等信息。这些信息就被称作为节点的属性，我们可以通过 DOM 获取和设定这些信息。...HTML 信息 图片 JavaScript 代码 // 获取节点属性 var objInput = document.getElementsByTagName(“input”)[0]; console.log...objInput.className); // class 是 js 关键字，所以需要用 className console.log(objInput.weight); // 非 W3C 属性...，不能使用 .运算符获取 console.log(objInput.getAttribute(“weight”)); // 可以使用 getAttribute 方法 // 设置节点属性 objInput.value...objInput.setAttribute(“class”, “setAttribute newClass”); objInput.setAttribute(“weight”, “200”); // 获取属性节点列表
在 W3C 2 级 DOM 事件中规范了事件模型HTML DOM 事件 指明使用的 DOM 属性级别。 鼠标事件 属性 描述 DOM onclick 当用户点击某个对象时调用的事件句柄。...2 框架/对象（Frame/Object）事件 属性 描述 DOM onabort 图像的加载被中断。...(3) 3 属性 属性 描述 DOM bubbles 返回布尔值，指示事件是否是起泡事件类型。...2 type 返回当前 Event 对象表示的事件的名称。 2 方法 方法 描述 DOM initEvent() 初始化新创建的 Event 对象的属性。...DOM handleEvent() 把任意对象注册为事件处理程序 2 文档事件对象 方法 方法 描述 DOM createEvent() 2 鼠标/键盘事件对象 属性 属性 描述 DOM altKey
DOM中文名文档对象模型，英文名Document Object Model，我们简称为DOM，是针对html和xml文档的一种API，将html以一种树状结构呈现出来，可以更直观去研究文档结构，我们将这种树状文档结构称为...－－DOM树，或者节点树，一样的概念 一、什么是DOM？...DOM中文名文档对象模型，英文名Document Object Model，我们简称为DOM，是针对html和xml文档的一种API，将html以一种树状结构呈现出来，可以更直观去研究文档结构，我们将这种树状文档结构称为...－－DOM树，或者节点树，一样的概念 js通过dom节点，可以对文档的html标签，属性，css样式，以及具体的内容做出修改，并对页面中的所有事件进行响应 二、节点树 1.节点类型 文档节点－－Document...(form2)) //false 两个节点引用的不是一个对象 console.log(form1.isEqualNode(form2)) //true 两个节点具有完全等同属性 console.log
从对象来说，attribute是html文档上标签属性， 而property则是对应dom元素的自身属性。...从操作方法上来看，attribute可以通过dom core规范的接口 getAttribute和setAttribute 进行获取修改，而property可以通过对象访问属性的方式 ....dom对象的特有属性（典型： 可通过getAttribute获取Dom元素的innerHTML和offsetWidth，clientWidth属性，也可通过setAttribute设置；对于w3c浏览器而言...，使用getAttribute和dom对象属性访问结果相同，返回的都是绝对路径，而对于IE8及其以后的IE， 使用getAttribute返回的是在html中的路径，而dom对象属性访问返回绝对路径...DOM Level 2 HTML 规范中指出，当 INPUT 元素 type 属性为 "text"、"file" 或 "password" 时，其对应的 HTMLInputElement 对象的 value
DOM对象：使用JavaScript中的方法获取页面中的元素返回的对象就是DOM对象。 jQuery对象：jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。...jQuery对象其实就是DOM对象的包装集（包装了DOM对象的集合（伪数组）） DOM对象与jQuery对象的方法不能混用。...js对象对象不能调用jq对象的方法 jq对象与js对象的联系（jq对象其实就是js对象的一个集合，伪数组，里面存放了一大堆的js对象）（宏观上） jquery对象能不能调用DOM对象的方法 DOM无法调用...需要把DOM对象转换成jQuery对象。...> jQuery里面放了Dom对象，把jQuery比作一个伪数组，就是没有数组的方法，但是有自己的方法（jQuery的方法） 总结 什么是DOM对象：用js的方式获取到的对象时DOM对象
JQ中非常重要的部分，就是操作DOM的能力 一 属性操作 1 text（）：获取或设置某个文本属性 2 html() ：获取或设置某个元素属性 3 val...l 该方法返回的对象包含两个整型属性：top 和 left ，以像素计。此方法只对可见元素有效。...l 该函数返回一个坐标对象，该对象有一个left属性和top属性。Position()中的坐标参考系是以被定位的祖辈元素的左上角为原点（0，0），向右为正，向下为正。...l 如果当前JQ对象匹配多个元素，返回坐标时，postion()函数只以其中第一个匹配的元素为准。...position().left) //8 }) //第二种 .main{ jquery中offset和position的区别 JQ中的两个方法都返回一个包含两个属性的对象
关于如何判断是jq对象还是dom对象，可以用常用的instanceof方法判断，也可以用只有jq对象才有的jquery属性结合if语句判断。 那么，如何用jq实现上述功能？...： 顺便这里总结下jq对象和dom对象的互相转换。...我们知道，dom对象只能用dom对象自己的方法，jq对象只能用jq对象自己的方法，因此有时候如果jq对象必须使用原生方法时（或者反过来），就需要进行对象转换。...2.1 jq对象 = > dom对象 var $div=$(".div"); //jq对象 // 或者加索引值返回dom对象单体 var div=$div[0]; // 调用get()方法返回dom...对象单体 var div=$div.get(i); 2.2 dom对象 = > jq对象 var div=documnet.getElementsByClassName("div"); //dom
1.jQuery对象和DOM对象 DOM对象，即是我们用传统的方法(javascript)获得的对象，jQuery对象即是用jQuery类库的选择器获得的对象; var domObj = document.getElementById...("id"); //DOM对象 var $obj = $("#id"); //jQuery对象; jQuery对象就是通过jQuery包装DOM对象后产生的对象，它是jQuery独有的。...2.jQuery对象和DOM对象的互相转换 在上面第一点说了，jquery对象和dom对象是不一样的！...这时我们可以将jquer对象转换成dom对象 jquery对象转换成 dom对象 jquery提供了两种方法将一个jquery对象转换成一个dom对象，即[index]和get(index)。...下面代码将演示一个jquery对象转换成dom对象，再使用dom对象的方法 复制代码 代码如下: var $cr=$("#cr"); //jquery对象 var cr = $cr[0]; //dom对象
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
