window对象下的属性对象document文档对象.
DOM ：DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范,DOM是一种与浏览器
D：文档 – html 文档 或 xml 文档
O：对象 – document 对象的属性和方法
M：模型
DOM 是针对xml(html)的基于树的API。
DOM树:节点（node）的层次。
DOM 把一个文档表示为一棵家谱树（父，子，兄弟）
DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面
<html>
<head>
<title>文档标题</title>
</head>
<body>
<a href=””>我的链接</a>
<h1>我的标题</h1>
</body>
</html>
Document:整个html文件都成为一个document文档
Element:所有的标签都是Element元素
Attribute：标签里面的属性
Text：标签中间夹着的内容为text文本
Node:document、element、attribute、text统称为节点node.
在DOM中获取元素对象的三种方式:
//getElementById() 返回对拥有指定 id 的第一个对象的引用。
var div = document.getElementById("divId");
print(div);
print(div.innerHTML);
//getElementsByName() 返回带有指定名称的对象集合。
var favs =document.getElementsByName("favs");
print(favs);
//getElementsByTagName() 返回带有指定标签名的对象集合。
var divs = document.getElementsByTagName("div");
print(divs);
function print(str){
document.write(str);
}
以下两个方法很重要，但是在手册中查不到！
创建文本节点：document.createTextNode()
创建元素节点：document.createElement()
Element元素对象
html页面中所有的标签都是element元素
(1)element.appendChild() 向元素添加新的子节点，作为最后一个子节点。
(2)element.firstChild 返回元素的首个子节点。
(3)element.getAttribute() 返回元素节点的指定属性值。
(4)element.innerHTML 设置或返回元素的内容。
(5)element.insertBefore() 在指定的已有的子节点之前插入新节点。
(6)element.lastChild 返回元素的最后一个子元素。
(7)element.setAttribute() 把指定属性设置或更改为指定值。
(8)element.removeChild() 从元素中移除子节点。
(9)element.replaceChild() 替换元素中的子节点。
Attribute对象
html页面中所有标签里面的属性都是attribute
var ele = document.getElementById("userId");
ele.getAttribute().value;//获取到属性。
ele.value;//直接获取属性值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>深圳</li>
</ul>
<input type="button" value="add()" id="buttonAdd"/>
</body>
<script>
window.onload = function(){
//点击按钮添加重庆
document.getElementById("buttonAdd").onclick=function(){
var ulEle = document.getElementsByTagName("ul")[0];
alert(typeof ulEle)
//使用document创建文本节点
var textNode = document.createTextNode("重庆");
//创建li标签
var liEle = document.createElement("li")
//把文本节点添加到li标签
liEle.appendChild(textNode);
console.info(liEle);
//把li标签添加到ul标签最后面
ulEle.appendChild(liEle);
}
}
</script>
</html>
Date对象
getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
解决浏览器缓存问题
Math和number对象
与java里面的基本一致。
String对象
match() 找到一个或多个正则表达式的匹配。
substr() 从起始索引号提取字符串中指定数目的字符。
substring() 提取字符串中两个指定的索引号之间的字符。
例子：
<script>
var str = "-a-b-c-d-e-f-";
var str1 = str.substr(2,4);//-b-c
//alert(str1);
var str2 = str.substring(2,4);//-b
alert(str2);
</script>
RegExp对象
正则表达式对象
test 检索字符串中指定的值。返回 true 或 false。
Node对象的属性和方法
- DOM,把XML/HTML中的成员看成是一个个的对象:
Node对象:
Document: 文档节点
Element: 元素节点
Attr: 属性节点
Text: 文本节点
1.常用属性和方法
firstChild
lastChild
childNodes
previousSibling
nextSibling
hasChildNodes()
2.元素节点/文本节点/属性节点的nodeName/nodeValue/nodeType区别
属性操作
1.元素上的原始属性和自定义属性的获取值和设置值
操作元素的原始属性:
获取属性值:
元素对象.属性名;
元素对象["属性名"];
设置属性值:
元素对象.属性名=值;
元素对象["属性名"]=值;
操作元素自定义属性:
获取属性值:
元素对象.getAttribute("属性名");
设置属性值:
元素对象.setAttribute("属性名",值);
2.操作属性名和默认属性值相同的属性.
如:checked,selected
3.操作class属性.-->属性名为:className
4.操作style的属性.如:background-color
5.操作readonly属性:readonly--->readOnly
插入/追加/删除/替换节点
使用JS实现二级联动
下拉框是否选中 selected = selected
options.length;
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<meta name="referrer" content="always">
<title>二级联动</title>
</head>
<body>
<select onchange="changeCity(this.value)">
<option>--请选择--</option>
<option value="0">湖北</option>
<option value="1">湖南</option>
<option value="2">河北</option>
<option value="3">河南</option>
</select>
<select id="city">
<option>--请选择--</option>
</select>
<script>
//1.创建一个二维数组用于存储省份和城市
var cities = new Array(3);
cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
function changeCity(val){
//获取第二个下拉框
var citySelect = document.getElementById("city");
//console.info(citySelect);
//每次长度清零
citySelect.options.length=0;
//遍历这个二维数组
/*
for(index in cities){
console.info("二维数组中的数组:",cities[index]);
}
*/
for(var i=0;i<cities.length;i++){
if(val == i){
for(var j = 0;j<cities[i].length;j++){
//console.info(cities[i][j])
//创建文本节点
var textNode = document.createTextNode(cities[i][j]);
//创建标签
var optionEle = document.createElement("option");
//创建属性
optionEle.setAttribute("value",j);
//把标签进行最佳
optionEle.appendChild(textNode);
citySelect.appendChild(optionEle);
console.info(textNode);
}
}
}
}
</script>
</body>
</html>
事件
给元素添加事件的三种方式:
第一种:
在标签上使用onclick属性配置
该方式:针对于相同类型的事件,只能绑定一个响应函数,JS和HTML混在一起.
获取事件源得在调用的时候,传递this参数,却拿不到事件对象.
最简单.
第二种:
在js代码中,使用 "元素.onclick=响应函数"进行事件监听
针对于相同类型的事件,只能绑定一个响应函数,推荐的方式.
第三种:
使用方法来完成对元素的监听
IE
[Object].attachEvent(“name_of_event_handler”, fnHandler);
name_of_event_handler>>事件操作前,必须加"on"!!!
多次添加监听后,触发顺序: 先添加,后执行
[Object].detachEvent(“name_of_event_handler”, fnHandler);
fnHandler : 移除时,传入的"事件响应函数",必须和添加时,传入的是同一个(通过相同标识符引用的那一个函数)
匿名函数,每次创建的都不同
W3C
[Object].addEventListener(“name_of_event”, fnHandler);
name_of_event>>直接使用事件(操作)名称,没有on,如click,而不是onclick.
多次添加监听后,触发顺序: 先添加,先执行
从IE9开始也支持该方法.
[Object].removeEventListener(“name_of_event”, fnHandler);
fnHandler : 移除时,传入的"事件响应函数",必须和添加时,传入的是同一个(通过相同标识符引用的那一个函数)
匿名函数,每次创建的都不同
--------------------------------------------------
---------------------------------------------------
事件对象中包括了事件源及事件的具体描述信息，一般包括事件源，鼠标事件或键盘事件的相关信息；在监听函数中有时候需要通过事件对象来获取更详细的事件信息，然后再进行处理
oDiv.onclick = function (oEvent) {
//参数oEvent即为事件对象
}
事件:
<form method="post" action="xxx.htm" onsubmit="return checkForm()">
<input type="text" size="30" id="email" onchange="checkEmail()">
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/100788.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...