dom对象

JavaWeb(4)-JS对象_bom,dom,document,element,node

不打扰是莪最后的温柔 提交于 2020-02-07 00:50:10
JS对象_2 js的bom对象 对象: navigator screen location history window js的dom对象 解析过程 node接口的特性和方法 DHTML js的document对象 常用方法 getElementById() getElementsByName() getElementsByTagName() write() element对象 getAttribute() setAttribute() removeAttribute() Node对象的属性 nodeName,nodeType,nodeValue 父节点,子节点,同辈节点 操作DOM树 appendChild() insertBefore(newNode,oldNode) removeChild() replaceChild(newNode,oldChild) cloneNode(boolean) innerHTML属性 js的bom对象 browser object model浏览器对象模型 对象: navigator 获取客户机(浏览器)的信息 navigator.appName screen 获取屏幕的信息 screen.width,screen.height location 请求url地址,href属性(获取请求的url地址 location.href 设置url地址)

js Dom为页面中的元素绑定键盘或鼠标事件

淺唱寂寞╮ 提交于 2020-02-05 21:24:00
html鼠标事件 onload 页面加载 onclick 鼠标单击 onmouseover 鼠标移入 onmouseout 鼠标移出 onfocus 获取焦点 onblur 失去焦点 onchange 域的内容改变 在事件触发中,this表示对当前dom对象的引用 1、html事件,在html元素上直接绑定事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .btn{ width:140px; height:30px; background:#abcdef; line-height:30px; text-align: center; font-size:14px; border-radius:5px; cursor:pointer; } div{ width:140px; height:140px; background:#abcdef; line-height:140px; text-align: center; font-size:14px; margin:50px 0; } </style> </head> <body> <button id="btn" class="btn" onclick="alert('我被点击啦!');"

JavaScript----章节二

随声附和 提交于 2020-02-05 17:07:05
5、内部对象 标椎对象 typeof 123 "number" typeof '123' "string" typeof true "boolean" typeof NaN "number" typeof [ ] "object" typeof { } "object" typeof Math . abs "function" typeof undefined "undefined" 5.1、Date 基本使用 var now = new Date ( ) ; //Sat Jan 04 2020 10:47:06 GMT+0800 (中国标准时间) now . getFullYear ( ) ; //年 now . getMonth ( ) ; // 月 0~11 代表月 now . getDate ( ) ; // 日 now . getDay ( ) ; // 星期几 now . getHours ( ) ; // 时 now . getMinutes ( ) ; // 分 now . getSeconds ( ) ; // 秒 now . getTime ( ) ; // 时间戳 全世界统一 1970 1.1 0:00:00 毫秒数 console . log ( new Date ( 1578106175991 ) ) //时间戳转为时间 转换 now = new Date

web前端----JavaScript的DOM(三)

柔情痞子 提交于 2020-02-04 00:32:14
一、JS中for循环遍历测试 for循环遍历有两种 第一种:是有条件的那种,例如 for(var i = 0;i<ele.length;i++){} 第二种:for (var i in li ){} 现在我们来说一下测试一下第二种(数组和obj的) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> var arr = [11,22,33,44,55]; var obj = {'username':'zzz','agr':20}; //js中的这个类似字典的不叫字典,而是一个对象 for (var i in obj){ console.log(i); //拿到的是键 console.log(obj[i]) //值 } for (var j in arr){ console.log(j); //拿到索引 console.log(arr[j]) //拿到值 } </script> </body> </html> 测试for循环 二、获取value属性值 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>获取value值</title>

js之DOM对象三

吃可爱长大的小学妹 提交于 2020-02-03 23:14:07
js之DOM对象三 一、JS中for循环遍历测试 for循环遍历有两种 第一种:是有条件的那种,例如 for(var i = 0;i<ele.length;i++){} 第二种:for (var i in li ){} 现在我们来说一下测试一下第二种(数组和obj的) 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <script> 9 var arr = [11,22,33,44,55]; 10 var obj = {'username':'zzz','agr':20}; //js中的这个类似字典的不叫字典,而是一个对象 11 for (var i in obj){ 12 console.log(i); //拿到的是键 13 console.log(obj[i]) //值 14 } 15 for (var j in arr){ 16 console.log(j); //拿到索引 17 console.log(arr[j]) //拿到值 18 } 19 </script> 20 </body> 21 </html> 二、获取value属性值 1 <!DOCTYPE html> 2 <html lang=

前端之JavaScript:JS之DOM对象三

守給你的承諾、 提交于 2020-02-03 22:55:09
一、JS中for循环遍历测试 for循环遍历有两种 第一种:是有条件的那种,例如 for(var i = 0;i<ele.length;i++){} 第二种:for (var i in li ){} 现在我们来说一下测试一下第二种(数组和obj的) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> var arr = [11,22,33,44,55]; var obj = {'username':'zzz','agr':20}; //js中的这个类似字典的不叫字典,而是一个对象 for (var i in obj){ console.log(i); //拿到的是键 console.log(obj[i]) //值 } for (var j in arr){ console.log(j); //拿到索引 console.log(arr[j]) //拿到值 } </script> </body> </html> 测试for循环 二、获取value属性值 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title

jQuery 对象与 DOM 对象的相互转换

邮差的信 提交于 2020-02-02 20:12:09
jQuery 对象与 DOM 对象的相互转换 虽然 jQuery 对象与 DOM 对象不是同一个对象,但其实两者本质上是一样的,两者可以相互转换。 jQuery 对象转 DOM 对象 这里接着上面的伪数组继续说。 既然 jQuery 对象其实就是 DOM 对象的一个集合,那我们通过取出集合中一个对象,不就相当于是从 jQuery 的众多对象中取出来了一个,然后"转换"成了一个 DOM 对象吗? jQuery 代码如下 $(function () { var $div = $(“div”); $div[0].style.background = “blue”; }); 浏览器运行效果如下: 可以看到,语文的背景色转换成功了。 DOM 对象转 jQuery 对象 DOM 对象转 jQuery 对象就更简单了,只需要将 DOM 对象当做参数传给 $() 就可以了。 这里给语文的 div 一个 chinese 的 id ,然后更改其内容为历史,代码如下所示 $ ( function ( ) { var chinese = document . getElementById ( "chinese" ) ; $ ( chinese ) . text ( "历史" ) ; } ) ; 浏览器运行效果如下所示 内容替换成功,说明 DOM 对象转 jQuery 对象也成功了。 这里之所以将 js

PHP操作XML

帅比萌擦擦* 提交于 2020-02-02 09:13:38
1,首先来创建一个xml文档(xiawei.xml): <?xml version="1.0" encoding="UTF-8"?> <bookshop> <books> <bookType> <name>计算机方面的书</name> <book> <name>JAVA语言程序设计</name> <price>100</price> <author>夏威</author> </book> <book> <name>C语言程序设计</name> <price>80</price> <author>谭浩强</author> </book> </bookType> <bookType> <name>英语方面的书</name> <book> <name>新概念英语</name> <price>80</price> <author>亚历山大</author> </book> </bookType> </books> </bookshop> 2.创建一个SimpleXML对象,如果要从一个字符串中读取XML数据并创建对象,用 simplexml_load_string (string data)方法。但是在这里我们直接从xiawei.xml这个xml文件中获取xml信息,我们用simplexml_load_file(String filename)方法,创建一个php文件test.php: <

DOM事件模型

♀尐吖头ヾ 提交于 2020-02-02 04:37:08
DOM   首先,DOM全称是Document Object Model,即文档对象模型。DOM是W3C的标准,定义了访问 HTML 和 XML 文档的标准。 “W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。” DOM事件   DOM使Javascript有能力对HTML上的事件做出反应。这些事件包括鼠标键盘的点击事件、移动事件以及页面中内容的变化等。HTML元素事件是浏览器内在自动产生的,当有事件发生时html元素会向外界(这里主要指元素事件的订阅者)发出各种事件,如click,onmouseover,onmouseout等等。 DOM事件流   DOM的结构是一个树形,每当HTML元素产生事件时,该事件就会在树的根节点和元素节点之间传播,所有经过的节点都会收到该事件。 DOM事件模型   DOM事件模型分为两类:一类是IE所使用的冒泡型事件(Bubbling);另一类是DOM标准定义的冒泡型与捕获型(Capture)的事件。除IE外的其他浏览器都支持标准的DOM事件处理模型。    冒泡型事件处理模型(Bubbling)    如上图所示,冒泡型事件处理模型在事件发生时,首先在最精确的元素上触发,然后向上传播,直到根节点。反映到DOM树上就是事件从叶子节点传播到根节点。 捕获型事件处理模型(Captrue)

事件对象——DOM中的事件对象

被刻印的时光 ゝ 提交于 2020-02-01 23:54:48
触发DOM上的交互事件会生成一个event对象,用以保存事件的信息。比如鼠标交互的事件会保存鼠标的位置,键盘交互的事件会保存键的值。 1.DOM0级和DOM2级事件处理程序在进行事件处理时都会有一个event对象传入。例如event.type会保存事件类型名称。 2.HTML事件处理程序中的变量event保存有event对象。 3.event对象的属性和方法:    1.bubbles。布尔值,用以表明事件是否冒泡。    2.cancelable。布尔值,用以表明是否可以取消事件的默认行为。通常和preventDefault()配合使用。   3.defaultPrevented。布尔值,值为true表明已经调用了preventDefault()。(DOM3新增)   4.trusted。布尔值,值为true表明事件是浏览器生成的,false表明是开发者通过js创建的。(DOM3新增)    5.currentTarget。Element,事件处理程序当前正在处理事件的那个元素,也就是说事件处理程序被添加的那个元素,即事件处理处理程序的this值的指向。    6.target。Element,事件的目标。   7.detail。与事件相关的细节信息。    8.eventPhase。调用事件处理程序的阶段。1表示捕获阶段,2表示处于目标阶段,3表示冒泡阶段。    9