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; //获取元素在当前视窗的相对偏移,返回的对象包含两个属性
IE 属性 除了上面的鼠标/事件属性,IE 浏览器还支持下面的属性: 属性 描述 cancelBubble 如果事件句柄想阻止事件传播到包容对象,必须把该属性设为 true。...srcElement 对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。...标准 Event 属性 下面列出了 2 级 DOM 事件标准定义的属性。 属性 描述 bubbles 返回布尔值,指示事件是否是起泡事件类型。...type 返回当前 Event 对象表示的事件的名称。 标准 Event 方法 下面列出了 2 级 DOM 事件标准定义的方法。...IE 的事件模型不支持这些方法: 方法 描述 initEvent() 初始化新创建的 Event 对象的属性。 preventDefault() 通知浏览器不要执行与事件关联的默认动作。
HTML 模板<html> <head> <title>我是网站标题</title> </head> <body> ...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vie...
什么是节点属性?比如一个 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”); // 获取属性节点列表
第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对象) 只有这一种方法;
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
在 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对象:使用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对象
从对象来说,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
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对象
关于如何判断是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
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中的两个方法都返回一个包含两个属性的对象
领取专属 10元无门槛券
手把手带您无忧上云