html dom中windows对象的4个常用子对象
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html dom中windows对象的4个常用子对象相关的知识，希望对你有一定的参考价值。
参考技术A 1、document对象每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。
2、element对象
在 HTML DOM 中，Element 对象表示 HTML 元素。
Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。
NodeList 对象表示节点列表，比如 HTML 元素的子节点集合。
元素也可以拥有属性。属性是属性节点。
3、attribute对象
在 HTML DOM 中，Attr 对象表示 HTML 属性。
HTML 属性始终属于 HTML 元素。
NamedNodeMap 对象
在 HTML DOM 中，NamedNodeMap 对象表示元素属性节点的无序集合。
NamedNodeMap 中的节点可通过名称或索引（数字）来访问。
4、event对象
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！
JS DOM操作 Window.docunment对象——操作属性
1、属性
是对象的性质与对象之间关系的统称。HTML中标签可以拥有属性，属性为 HTML 元素提供附加信。
属性总是以名称/值对的形式出现，比如：name="value"。
属性值始终被包括在引号内。双引号是最常用的，在某些个别的情况下，比如属性值本身就含有双引号，必须使用单引号，
属性总是在 HTML 元素的开始标签中规定。
2、属性实例
HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：
< a href="http://www.baidu.com"> a </a>
<h1> 定义标题的开始。
<h1 align="center"> 拥有关于对齐方式的附加信息。
<body> 定义 HTML 文档的主体。
<body bgcolor="yellow"> 拥有关于背景颜色的附加信息。
<table> 定义 HTML 表格。
<table border="1"> 拥有关于表格边框的附加信息。
3、对属性的操作
（1）通过定位找到该元素存于变量中
var a = document.getElementById("id")
（2）对该元素的属性进行操作
a.setAttribute( “ 属性名”，“属性值” )； // 添加更改属性
a.getAttribute( " 属性名 " ); // 获取属性的值
a.removeAttribute( " 属性名 " ); //移除属性
最新的属性会覆盖原来的属性不会出现2个相同的属性, 直接用 属性名=属性值 就能给属性修改，给属性赋值
上代码示例
例1、建2个按钮，点击第一个按钮，按钮本身变为不可用，点击第二个按钮第一个按钮变为可用
<head>
<title></title>
</head>
<body>
<input type ="button" value ="第一个按钮" class="c1" />
<input type ="button" value ="第二个按钮" class="c1" />
</body>
</html>
<script type="text/javascript">
var a = document.getElementsByClassName("c1")
a[0].onclick = function () {
a[0].setAttribute("disabled","disabled") // disable="disable" 不可用
}
a[1].onclick = function () {
a[0].removeAttribute("disabled")
}
</script>
例 2、 做一个问题，输入答案如果正确弹出正确，错误弹出错误
<head>
<title></title>
</head>
<body>
5+5=
<input type ="text" class="c1"/>
<input type ="button" value ="验证" " da="10" class="c1"/>
</body>
</html>
<script type ="text/javascript">
var a = document.getElementsByClassName("c1");
a[1].onclick = function () {
var c = a[0].value;
var d = a[1].getAttribute("da");
if (d == c)
alert("正确");
else
alert("笨蛋！！！");
}
</script>
效果
例3、建按钮与有背景色的div，点击按钮背景色改变
<head>
<title></title>
<style type="text/css">
.div {
width: 100px;
height: 100px;
background-color: red;
float: left;
margin-right: 10px;
}
</style>
</head>
<body>
<input type="button" value="验证" id="btn1" /><br />
<div class="div" aa="1"></div>
<div class="div" aa="1"></div>
<div class="div" aa="0"></div>
<div class="div" aa="0"></div>
<div class="div"></div>
<div class="div"></div>
</body>
</html>
<script type="text/javascript">
document.getElementById(\'btn1\').onclick = function () {
var oDivs = document.getElementsByClassName(\'div\');
for (var i = 0; i < oDivs.length; i++) {
if (oDivs[i].getAttribute(\'aa\') == \'1\')
oDivs[i].style.backgroundColor = "blue";
if (oDivs[i].getAttribute(\'aa\') == \'0\')
oDivs[i].style.backgroundColor = "green";
}
}
</script>
效果图
以上是关于html dom中windows对象的4个常用子对象的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript之DOM-7 Window常用子对象(navigator对象location对象history对象screen对象)