摘要:和事件可用于处理。循环中的代码块将针对每个属性执行一次。返回值是被找到的值。是被视为节点树的。将新元素作为父元素的最后一个子元素进行添加。返回指定的属性值。把指定属性设置或修改为指定的值。年龄必须是与之间的数字。
JS JS DOM
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。
找到您希望删除的子元素,然后使用其 parentNode 属性来找到父元素:
var child=document.getElementById("p1"); child.parentNode.removeChild(child);JS 对象
JavaScript for...in 语句循环遍历对象的属性。
for...in 循环中的代码块将针对每个属性执行一次。
for (对象中的变量) { 要执行的代码 }
极大或极小的数字可通过科学(指数)计数法来写:
var y=123e5; // 12300000 var z=123e-5; // 0.00123
如果逻辑对象无初始值或者其值为 0、-0、null、""、false、undefined 或者 NaN,那么对象的值为 false。否则,其值为 true(即使当自变量为字符串 "false" 时)!
使用了 Math 对象的 floor() 方法和 random() 来返回一个介于 0 和 10 之间的随机数:
document.write(Math.floor(Math.random()*11))RegExp 对象的方法
test() 方法检索字符串中的指定值。返回值是 true 或 false。
exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配,则返回 null。
//找到第一个 "e",并存储其位置, //如果再次运行 exec(),则从存储的位置开始检索,并找到下一个 "e",并存储其位置 var patt1=new RegExp("e","g"); do { result=patt1.exec("The best things in life are free"); document.write(result); } while (result!=null)
compile() 既可以改变检索模式,也可以添加或删除第二个参数。
var patt1=new RegExp("e"); document.write(patt1.test("The best things in life are free")); //true patt1.compile("d"); document.write(patt1.test("The best things in life are free")); //falseJS Window Window 尺寸
有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:
window.innerHeight - 浏览器窗口的内部高度 window.innerWidth - 浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5:
document.documentElement.clientHeight document.documentElement.clientWidth 或者 document.body.clientHeight document.body.clientWidth
实用的 JavaScript 方案(涵盖所有浏览器):
var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;Window Screen
(返回访问者屏幕的宽度,以像素计,减去界面特性,比如窗口任务栏)
screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度
Window Locationlocation.href 属性返回当前页面的 URL。
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 (80 或 443)
location.protocol 返回所使用的 web 协议(http:// 或 https://)
location.assign("http://www.w3school.com.cn") 方法加载新的文档。
history.back() - 与在浏览器点击后退按钮相同(加载历史列表中的前一个 URL)
history.forward() - 与在浏览器中点击按钮向前相同(加载历史列表中的下一个 URL)
(navigator 数据可被浏览器使用者更改,浏览器无法报告晚于浏览器发布的新操作系统)
特性检测
由于 navigator 可误导浏览器检测,使用对象检测可用来嗅探不同的浏览器。
由于不同的浏览器支持不同的对象,您可以使用对象来检测浏览器。例如,由于只有 Opera 支持属性 "window.opera",您可以据此识别出 Opera。
alert("文本") confirm("文本") prompt("文本","默认值")JS Timing
setTimeout("javascript语句",毫秒) 未来的某时执行代码
setTimeout() 方法会返回某个值。在上面的语句中,值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout(),你可以使用这个变量名来指定它。
clearTimeout() 取消setTimeout()
HTML DOM
在 HTML DOM 中,所有事物都是节点。DOM 是被视为节点树的 HTML。
整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点
document.documentElement - 全部文档
document.body - 文档的主体
DOM 处理中的常见错误是希望元素节点包含文本
可通过节点的 innerHTML 属性来访问文本节点的值
一些常用的 HTML DOM 方法:
getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
appendChild() 将新元素作为父元素的最后一个子元素进行添加。
removeChild() 删除子节点child.parentNode.removeChild(child)。
replaceChild() 替换子节点。
insertBefore() 在指定的子节点前面插入新的子节点。
createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
getAttribute() 返回指定的属性值。
setAttribute() 把指定属性设置或修改为指定的值。
一些常用的 HTML DOM 属性:
innerHTML - 节点(元素)的文本值
parentNode - 节点(元素)的父节点
childNodes - 节点(元素)的子节点
attributes - 节点(元素)的属性节点
nodeName 属性
nodeName 属性规定节点的名称。
nodeName 是只读的
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 与属性名相同
文本节点的 nodeName 始终是 #text
文档节点的 nodeName 始终是 #document
注释:nodeName 始终包含 HTML 元素的大写字母标签名。
nodeValue 属性
nodeValue 属性规定节点的值。
元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值
nodeType 属性
nodeType 属性返回节点的类型。nodeType 是只读的。
比较重要的节点类型有:
元素类型 NodeType
元素 1
属性 2
文本 3
注释 8
文档 9
如需向 HTML DOM 添加新元素,您首先必须创建该元素(元素节点),然后把它追加到已有的元素上。
除了 innerHTML 属性,您也可以使用 childNodes 和 nodeValue 属性来获取元素的内容。
document.getElementById("intro").childNodes[0].nodeValue
向超链接添加快捷键
几乎所有浏览器均 accesskey 属性,除了 Opera。
以下元素支持 accesskey 属性:
< a>, ,
HTML
document.referrer
如果当前文档不是通过超级链接访问的,则为 null。这个属性允许客户端 JavaScript 访问 HTTP 引用头部。
打开一个新的文档,添加一些文本,然后关闭它。
document 文档
文档中锚的数目
document.anchors.length
文档中的图像数目
document.images.length
文档中表单的名字
document.forms[0].name document.getElementById("myForm").reset()//重置
验证表单
选取文本域中的内容
document.getElementById("myText").select()
表单中的下拉列表
document.getElementById("favorite").value=mylist.options[mylist.selectedIndex].text option=no.options[no.selectedIndex].text
当达到文本域的最大字符数时跳至下一个域
这段脚本在达到文本框的最大长度时跳到下一个文本框:
Event 对象
Frame、Frameset 以及 IFrame 对象
可调整大小和不可调整大小的框架
跳出框架
更改下拉列表中的可见行数
select id="mySelect"
document.getElementById("mySelect").size=3
选择下拉列表中的多个选项
document.getElementById("mySelect").multiple=true
下拉列表 禁用
document.getElementById("mySelect").disabled=true
更改被选选项
document.getElementById("orange").selected=true;
从下拉列表中删除选项
var x=document.getElementById("mySelect")
x.remove(x.selectedIndex)
打印该页
window.print()
HTML5 中不再支持下面哪个元素?
在 HTML5 中不再支持