一、BOM对象 DOM对象
1.BOM和DOM的关系：
2.BOM对象：
1.常用对象方法：window可以省略不写
1.三种弹框
window.alert();//页面弹框(含有确认按钮的弹框)
window.confirm();//页面弹框(含有确认和取消的弹框)
window.prompt();//页面弹窗(含有输入值的弹框)
2.定时器
window.setTimeout("demo1()",2000);//2s后调用demo1函数 一次调用
window.setInteerval("demo1()",2000);//每隔2s调用demo1函数 多次调用
3. 打开或关闭新的页面
window.open("http://www.baidu.com","width=200px,height=200px");//指定打开的窗口，指定打开窗口的大小大小
window.close();//关闭当前窗口2.常用属性：
1.Location对象属性和方法：
window.location.href;//当前网页URL
window.location.host;//IP地址+端口号
window.location.hostname;//IP地址
window.location.port;//端口号
window.location.reload();//重加载页面
[注]window.location.href="http://www.aaa.com";//将当前网页URL替换成指定的地址
2.History对象属性和方法：(以下开始不写window.location.)
length：但会浏览器历史列表的URL数量
back():加载历史列表中前一个URL(后退)
forward():加载历史列表中下一个URL(前进)
go():加载历史列表中前某个具体页面//history.go(1);前进一个页面
3.Screen对象属性：(一般用于返回屏幕分辨率)
width:返回显示屏幕的宽度
height:返回显示屏幕的高度
4.Navigator对象属性和方法:
userAgent:返回由客户端发送服务器的user-agent头部的值
5.Document对象：
太多了，DOM中单独介绍
3.DOM对象：
1.最顶层document，DOM编程就是使用document对象的API完成对网页HTML文档进行动态修改，以实现网页数据和样式动态变化效果的编程
2.DOM节点分类
元素节点 Element 如：<a href="链接地址">我的链接</a>
属性节点 Attribute 如：href="链接地址"
文本节点 Text 如：我的链接
3.DOM操作的内容
- 查询元素(获取元素，进而操作元素，或者元素的属性，文本)
- 操作文本
- 操作属性
- 操作元素
- 操作CSS样式(一个特殊的属性style)
1.获取元素节点对象：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body onload="demo3()"><!-- 加载完整个页面后加载对应的js代码 -->
<span id="sp1">asasas</span>
<span id="sp2">asasas</span>
<span id="sp3">asasas</span>
<div>
<span class="s1">uuu</span>
<span class="s1">ooo</span>
<span class="s1">qqq</span>
</div>
<form>
<input type="text" name="n1" id="" value=""/>
<select style="text" name="n2" id="" ></select>
</form>
<div id="div1">
<span>aaa</span>
<span id="spp">bbb</span>
<span>ccc</span>
<span>ddd</span>
</div>
</body>
<script type="text/javascript">
function demo1(){
//一、直接获取元素
//1.通过id直接获取元素
var sp1=document.getElementById("sp1");
console.log(sp1);
//2.通过标签名获取元素(所有标签名称为xxx的对象)
var spans=document.getElementsByTagName("span");//返回值为一个数组对象
console.log(spans);//打印指定元素
var span3=document.getElementsByTagName("span")[2];//使用下标获得指定某个元素
console.log(span3);
//3.通过class属性获得元素
var ss=document.getElementsByClassName("s1");//返回值为一个数组对象
console.log(ss);
var s1=document.getElementsByClassName("s1")[1];//使用下标获得指定某个元素
console.log(s1);
//4.通过name属性获取元素([注]只有form表单有name属性)
var form1=document.getElementsByName("n1");//返回值为一个数组对象
console.log(form1);
}
function demo2(){
//二、间接获取元素
//通过子节点获取父节点
var spp=document.getElementById("spp");
var p=spp.parentElement;//获取的是父节点的所有元素对象
console.log(p);
//通过父节点获取子节点
var div=document.getElementById("div1");
var chs=div.childNodes;//获取的是所有子节点数组对象
console.log(chs);//[注]空白文档也属于子节点对象
}
function demo3(){
//二、间接获取元素
//通过节点获取兄弟节点
var spp=document.getElementById("spp");
var pe=spp.previousSibling;//获取当前元素上一个节点 空白也属于
var pe2=spp.previousElementSibling;//获取当前元素的上一个元素 空白文本不属于元素
var pe3=spp.nextSibling;//获取当前元素下一个节点 空白也属于
var pe4=spp.nextElementSibling;//获取当前元素的下一个元素 空白文本不属于元素
console.log(spp);
console.log(pe);
console.log(pe2);
console.log(pe3);
console.log(pe4);
}
</script>
</html>[注]：除开通过id直接获取元素，另外几种都返回的是一个数组对象
2.操作元素节点属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>操作元素对象属性</title>
<script type="text/javascript">
function demo1(){
//方式一
//获得元素对象获得input标签对象
var inp=document.getElementById("inp1");
//获得元素对象属性 元素对象.属性="值"
console.log(inp.type);
console.log(inp.name);
console.log(inp.value);
//操作元素属性
inp.type="button";
inp.value="添加";
//方式二
console.log(inp.getAttribute("type"));
console.log(inp.getAttribute("name"));
//操作元素属性
inp.setAttribute("type","button");
inp.setAttribute("value","添加");
}
</script>
</head>
<body>
<input type="button" name="" id="" value="属性测试" onclick="demo1()"/>
<hr />
<input type="text" name="inp1" id="inp1" value=""/>
</body>
</html>3.操作元素节点样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>操作节点样式</title>
<style>
#div2{
width: 200px;
height: 200px;
border: 1px solid red;
}
.yy{
border: 2px solid blue;
border-radius: 50px;//圆角边框
}
</style>
</head>
<body>
<input type="button" name="" id="" value="样式操作" onclick="demo1()">
<hr />
<div id="div1" style="width: 200px; height: 300px; border: 2px solid red; background-color: red;"></div>
<div id="div2"></div>
</body>
<script type="text/javascript">
function demo1(){
//获取元素对象
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
console.log(div1.style.width);
console.log(div1.style.height);
console.log(div1.style.border);
//下面三个为空
//因为js获取css样式方式 仅限行内样式可以获得 其他方式引入css样式无法获得
console.log(div2.style.width);
console.log(div2.style.height);
console.log(div2.style.border);
console.log(div1.style.backgroundColor);
//操作CSS样式
div1.style.width="300px";
div1.style.height="300px";
div1.style.border="3px solid green";
//通过class方式增加样式
div1.className="yy";
}
</script>
</html>4.操作标签内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>操作标签内容</title>
</head>
<body>
<input type="button" name="" id="" value="内容和值操作" onclick="demo1()"/>
<hr />
<span id="sp">aaa</span>
<div id="div1">
<span>bbbb</span>
</div>
<input type="text" name="" id="" value="123"/>
<select id="selt">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
<textarea></textarea>
</body>
<script type="text/javascript">
function demo1(){
//获得div元素对象
var div1=document.getElementById("div1");
//获得双标签的元素内容 Text
var text=div1.innerText;//inner一般只用来获取双标签的内容或标签加内容
console.log(text);
//获得双标签的元素内容+HTML标签
var h1=div1.innerHTML;
console.log(h1);
//操作双标签内容--把设置的内容原封不动输出
div1.innerText="<b>文本已经修改</b>"
//操作双标签内容--解析设置的内容后输出
div1.innerHTML="<b>文本已经修改</b>";
//特殊 下拉框select标签 和 多行文本输入textarea标签 都用.value获得元素内容
var selt=document.getElementById("selt");
var value=selt.value;//获得当前下拉框选中的标签value
console.log(value);
var text=selt.textContent;//获得当前下拉框中的文本内容
console.log(text);
console.log(typeof(text));
}
</script>
</html>5.增加删除节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>增加删除节点</title>
</head>
<body>
<button onclick="add1()">增加</button>
<hr/>
<div id="div1" style="width: 500px;height: auto;border: 1px solid red;">
</div>
</body>
<script type="text/javascript">
function add1(){
//获得父容器对象
var div1=document.getElementById("div1");
//1.动态创建节点对象 createElement()
var inp1=document.createElement("input");//创建一个节点
//设置节点属性
inp1.setAttribute("type","text");
inp1.setAttribute("value","用户名输入");
var inp2=document.createElement("input");//创建一个节点
inp2.setAttribute("type","password");
inp2.setAttribute("value","123456");
var br=document.createElement("br");//创建一个换行节点
var inp3=document.createElement("input");//创建一个节点
inp3.setAttribute("type","button");
inp3.setAttribute("value","删除");
inp3.onclick=function(){//动态添加的元素中事件的添加
// 3.节点删除 removeChild()
div1.removeChild(inp1);
div1.removeChild(inp2);
div1.removeChild(inp3);
div1.removeChild(br);
}
//2.将创建的节点追加到指定父级节点的末尾 appendChild()
//追加元素节点
div1.appendChild(inp1);
div1.appendChild(inp2);
div1.appendChild(inp3);
//追加换行节点
div1.appendChild(br);
}
</script>
</html>二、事件
onclick,ondbclick:单机事件、双击事件：一般会结合按钮使用
onkeydown、onkeyup、onblur、onfocu键盘按下事件 键盘抬起事件 失去焦点事件 得到焦点事件：一般结合文本使用，不会结合按钮使用
onchange 下拉选择事件：一般结合下拉文本框使用
onmouseover、onmouseout 离开块事件 进入块事件:一般结合块元素使用
onload 加载完成事件: 一般结合body使用
onsubmit 按钮被点击事件：一般结合表单使用
三、数组等基本数据类型
《---------------------------------------》
扫一扫
352
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
