utton 对象
Button 对象代表一个按钮。
在 HTML 文档中 <button> 标签每出现一次,Button 对象就会被创建。
accessKey 设置或返回访问某个按钮的快捷键。
disabled 设置或返回是否禁用按钮。
form 返回对包含按钮的表单的引用。
id 设置或返回按钮的 id。
name 设置或返回按钮的名称。
tabIndex 设置或返回按钮的 Tab 键控制次序。
type 返回按钮的表单类型。
value 设置或返回显示在按钮上的文本。
下面的例子可返回按钮的 tab 键控制次序:
<html>
<head>
<script type="text/javascript">
function showTabIndex()
{
var b1=document.getElementById('b1').tabIndex;
var b2=document.getElementById('b2').tabIndex;
var b3=document.getElementById('b3').tabIndex;
document.write("Tab index of Button 1: " + b1);
document.write("<br />");
document.write("Tab index of Button 2: " + b2);
document.write("<br />");
document.write("Tab index of Button 3: " + b3);
}
</script>
</head>
<body>
<button id="b1" tabIndex="1">Button 1</button><br />
<button id="b2" tabIndex="2">Button 2</button><br />
<button id="b3" tabIndex="3">Button 3</button><br />
<br />
<input type="button" onclick="showTabIndex()" value="Show tabIndex" />
</body>
</html>
标准属性
className 设置或返回元素的 class 属性。
dir 设置或返回文本的方向。
lang 设置或返回元素的语言代码。
title 设置或返回元素的 title 属性。
lang 属性设置或返回元素的语言。
object.lang=language-code
本例展示了两种获取 <body> 元素的语言的方法:
heckbox 对象
Checkbox 对象代表一个 HTML 表单中的 一个选择框。
在 HTML 文档中 <input type="checkbox"> 每出现一次,Checkbox 对象就会被创建。
您可以通过遍历表单的 elements[] 数组来访问某个选择框,或者通过使用 document.getElementById() 。
Checkbox 对象的属性
accessKey 设置或返回访问 checkbox 的快捷键。
alt 设置或返回不支持 checkbox 时显示的替代文本。
checked 设置或返回 checkbox 是否应被选中。
defaultChecked 返回 checked 属性的默认值。
disabled 设置或返回 checkbox 是否应被禁用。
form 返回对包含 checkbox 的表单的引用。
id 设置或返回 checkbox 的 id。
name 设置或返回 checkbox 的名称。
tabIndex 设置或返回 checkbox 的 tab 键控制次序。
type 返回 checkbox 的表单元素类型。
value 设置或返回 checkbox 的 value 属性的值
checked 属性设置或返回 checkbox 是否应被选中。
checkboxObject.checked=true|false
下面的例子可设置该 checkbox 的状态:
<html>
<head>
<script type="text/javascript">
function check()
{
document.getElementById("check1").checked=true //1
}
function uncheck()
{
document.getElementById("check1").checked=false //0
}
</script>
</head>
<body>
<form>
<input type="checkbox" id="check1" />
<input type="button" onclick="check()" value="Check Checkbox" />
<input type="button" onclick="uncheck()" value="Uncheck Checkbox" />
</form>
</body>
</html>
标准属性
className 设置或返回元素的 class 属性。
dir 设置或返回文本的方向。
lang 设置或返回元素的语言代码。
title 设置或返回元素的 title 属性。
Checkbox 对象的方法
blur() 从 checkbox 上移开焦点。
click() 模拟在 checkbox 中的一次鼠标点击。
focus() 为 checkbox 赋予焦点。
复选框全选、全不选、反选
家好,我是IT共享者,人称皮皮。
相信做网站对JavaScript再熟悉不过了,它是一门脚本语言,不同于Python的是,它是一门浏览器脚本语言,而Python则是服务器脚本语言,我们不光要会Python,还要会JavaScript,因为它对做网页方面是有很大作用的。
这是我们用的最普遍的一个文档对象了,专门用来操作DOM节点时用。
document.getElementById() #通过id查找HTML元素
document.getElementsByName() #通过name查找HTML元素
document.getElementsByTagName() #通过标签名查找HTML元素
document.getElementsByClassName() #通过类名查找HTML元素
document.querySelector(".h") #第一个类名为 "h" 的元素
document.querySelectorAll("div.no, div#h") #所有class为"no"或者id为"h"的div元素
document.body #获取body标签
document.documentElement #获取html标签
document.cookie #网页cookie
document.domain #文档的域名
document.lastModified #文档被最后修改的日期和时间
document.referrer #载入当前文档的文档的URL
document.title #当前文档的标题
document.URL #当前文档的URL
document.doctype #当前文档的doctype
document.baseURI #当前文档的绝对URI
document.documentMode #浏览器使用的模式
document.documentURI #文档的URI
document.implementation #DOM实现
document.inputEncoding #文档的编码(字符集)
document.readyState #文档的(加载)状态
document.strictErrorChecking #是否强制执行错误检查
document.write('hello world') 向文档写入文本
document.writeln('hello world') 向文档写入文本并换行
document.all #所有html元素
document.anchors #所有Anchor引用
document.forms #所有的表单引用
document.images #所有的图片引用
document.links #所有的超链接引用
document.scripts #所有的脚本引用
document.embeds #所有的流媒体引用
childNodes #获取子节点的集合 ,返回数组 ,并把换行和空格也当成是节点信息。
children #获取子节点的集合 ,返回数组
firstChild #获取第一个子元素 并把换行和空格也当成是节点信息
firstElementChild #获取第一个子节点
lastChild #获取最后一个子节点 并把换行和空格也当成是节点信息
lastElementChild #获取最后一个子节点
parentNode #获取父节点
parentElement #获取父节点(IE)
offsetParent #获取所有父节点 对应的值是body下的所有节点信息
previousSibling #获取上一个兄弟节点 匹配字符,包括换行和空格,而不是节点
previousElementSibling #获取上一个兄弟节点 直接匹配节点
nextSibling #获取下一个兄弟节点 匹配字符,包括换行和空格,而不是节点
nextElementSibling #获取下一个兄弟节点 直接匹配节点
ownerDocument #元素的根节点
这里我们获取到了所有的Div元素,我们可以针对性的获取一个ID下的Div的子元素以及它的兄弟和父,子元素,如下:
我们可以自定义节点并添加值,不过要将它添加到文档中去,所以必须添加节点,一般和下方的增加节点配套使用。
document.createElement(标签) #创建HTML元素
document.createTextNode(文本) #给文档添加文本
document.createComment(文本) #创建一个注释节点
document.createDocumentFragment() #创建文档粉碎节点
appendChild(节点) #节点被添加到元素的末尾
insertBefore(a,b) #a节点会插入b节点的前面
removeChild(节点名) #被移除的节点仍在文档中,只是文档中已没有其位置了
replaceChild(插入的节点,被替换的节点)
a.cloneChild() #复制a节点,复制出来的节点作为返回值为true时,则a元素后代也一并复制。否则,仅复制a元素本身
#节点类型 nodeType 有三种情况
#1.元素节点 2.属性节点 3.文本节点
#节点名称 nodeName
#节点值 nodeValue
#元素节点没节点值,为null
#文本节点的节点值就是文本
#属性节点的节点值就是该属性值
#节点属性获取
a.width
a['width']
a.gerAttribute(属性名) 返回指定的属性值
a.gerAttributeNode(属性名) 返回指定的属性节点
节点属性设置
a.width=400
a['width']=400
a.attributes['width']=400
a.setAttribute('width',400) 添加指定的属性
a.setAttributeNode(b) 添加指定的属性节点
#节点属性删除
a.removeChild(子节点) 从元素中移除子节点
a.removeAttribute(属性) 从元素中移除指定属性
a.removeAttributeNode(属性) 移除指定的属性节点,并返回被移除的节点
a.id 获取当前元素的id
a.className 获取当前元素的class
a.classList 获取当前元素的class列表
a.accessKey='w' 设置或返回元素的快捷键
a.namespaceURI 返回指定节点的命名空间的 URI
a.dir 设置或返回元素的内容是否可编辑
a.normalize() 合并元素中相邻的文本节点,并移除空的文本节点
a.tabIndex='3' 设置或返回元素的tab键控制次序
a.tagName 返回元素的标签名
a.textContent 设置或返回节点及其子代的文本内容
a.title 设置或返回元素的标题属性
a.item(num) 返回节点列表中位于指定下标的节点
a.length 返回节点列表中的节点数
a.innerHTML 获取或者设置对象内的HTML
a.innerText 获取或者设置对象内的文本
a.outerHTML 获取或者设置对象外的HTML
a.outerText 获取或者设置对象外的文本
a.value 获取或者设置表单元素的值
这篇文章主要介绍了JavaScript的文档对象。下一篇文章,我们继续介绍JavaScript,敬请期待!
*请认真填写需求信息,我们会在24小时内与您取得联系。