目录
一.DOM结构&节点类型
二.DOM编程获得元素的方式
实际应用中直接方式使用较多，间接方式使用较少。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
// **********三种主要的直接获得节点对象的方式**********
function demo1(){
// id方式直接获得一单一对象
var username=window.document.getElementById("username");
alert(username);
}
function demo2(){
//通过标签名称获得元素对象，获得的是多个对象
//window可省略
var input=document.getElementsByTagName("input");
//（对象）数组集合，数组长度，某一个元素
alert(input+'--'+input.length+'--'+input[2]);
}
function demo3(){
//通过name属性获得
var name=document.getElementsByName("hobby");
alert(name+'--'+name.length);
}
// 其他直接获得元素的方式使用较少，自己看看就行
// *************间接获得元素对象的方式************
// 通过父节点获得子节点
function demo4(){
// 获取父节点
var profession=document.getElementById("profession");
// 获得子元素 注意：空白的文档也是一个子节点
var child=profession.childNodes;
console.log(child.length);
console.log(child);
}
// 通过子节点获得父节点
function demo5(){
var p2=document.getElementById("p2");
// 获得父节点
var parent=p2.parentNode;
console.log(parent);
}
// 获得上一个节点或下一个节点
function demo6(){
var p2=document.getElementById("p2");
// 获得下一个节点包含空白的文档
// 下一个是空白文档，下下个才是元素节点
// var next=p2.nextSibling.nextSibling;
//获得下一个非空白文档节点（元素节点）
var next=p2.nextElementSibling;
// 获得上一个节点包含空白的文档
// 上一个是空白文档，上上个才是元素节点
//var up=p2.previousSibling.previousSibling;
var up=p2.previousElementSibling;
console.log(up);
}
</script>
</head>
<body onload="demo6()">
<form action="" id="form1">
用户名：<input type="text" name="username" id="username" value="请输入姓名" />
<br />
密码：<input type="password" name="password" id="password" />
<br />
<!-- 多选框 -->
爱好：<input type="checkbox" name="hobby" value="music" />音乐
爱好：<input type="checkbox" name="hobby" value="sports" />体育
爱好：<input type="checkbox" name="hobby" value="art" />美术
<br />
职业：<select name="profession" id="profession">
<option value="1">工人</option>
<option value="2" id="p2">农民</option>
<option value="3">解放军</option>
<option value="4">知识分子</option>
</select>
<input type="button" value="提交" />
</form>
</body>
</html>
三.操作属性
无论获取还是操作都是方式一用的比较多。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function demo1(){
// 获取方式一：获得id名称是input1的对象节点
var input1=document.getElementById("input1");
// 获得节点对象的属性，获得的是实时的值
var type=input1.type;
var value=input1.value;
var name=input1.name;
// 输出的value随着text文本框里的值得改变而改变
alert(type+"----"+value+'----'+name);
// 操作方式一：操作元素的属性
input1.type="button";
input1.value="测试改变";
// 获取方式二：获得元素得属性，获得的是最初的默认值，即不会改变
var type1=input1.getAttribute("type");
var value1=input1.getAttribute("value");
alert(type1+'----'+value1);
// 操作方式二
// 把type属性设置成button
input1.setAttribute("type","button");
}
</script>
</head>
<body>
<input type="text" id="input1" value="张三" name="username"/>
<hr />
<input type="button" name="" id="" value="测试元素属性" onclick="demo1()" />
</body>
</html>
四.操作样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- <style>
#div1{
width: 200px;
height: 200px;
background-color: palegreen;
}
</style> -->
<script>
function demo1(){
// 获得id名称是div1的对象
var div=document.getElementById("div1");
// 获得css样式，只支持行内样式的css，这是js的一个缺点，但是在后面的jQuery会得到解决。
// 如果css样式用上面嵌套在<head>标签里的方式则无法获取！
var wi=div.style.width;
var hi=div.style.height;
alert(wi+'----'+hi);
// 操作元素的css样式
// 对于background-color格式的样式在js中需要使用驼峰命名法
div.style.width='300px';
div.style.height='300px';
div.style.backgroundColor='red';
// 通过增加class类来增加对应的css样式
div.className='div2';
}
</script>
<style>
.div2{
border: 5px solid blue;
}
</style>
</head>
<body>
<div id="div1" style="width: 200px;height: 200px; background-color: palegreen;" ></div>
<!-- <div id="div1"></div> -->
<hr />
<input type="button" name="" id="" value="css样式的操作" onclick="demo1()" />
</body>
</html>
五.操作文本和值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function demo1(){
// 获得div1元素对象
var div=document.getElementById('div1');
// 获取元素的文本内容
//会获得里面的HTML中的内容
var inn1=div.innerHTML;
//只会获得文本信息
var inn2=div.innerText;
console.log(inn1);
console.log(inn2);
//会识别HTML信息
// +=代表不会覆盖之前的内容
div.innerHTML+='<h1>我们没有什么不同</h1>';
//不会识别HTML信息，而是原样输出了
//div.innerText='<h1>我们没有什么不同</h1>';
/*innerHTML和innerText都只对双标签有作用，例如<div></div>,而对于单标签不起作用，例如input,
而单标签里的文本其实就是value（属性）,用之前学的操作属性的方法操作value就行*/
}//demo1()
function demo2(){
// 获得select对象
var sel=document.getElementById('select');
// 选的是哪个value就是哪个的文本，如果哦option里设置了value值，
// 则sel.value就不是标签之间的文本，而是设置的value值
alert(sel.value);
}
function demo3(){
// 获得多行文本框对象
var textarea=document.getElementById('text1');
/*多行文本框和select下拉框一样，都只能用value获取对应的文本值,
而不能用innerHTML和innerText*/
alert(textarea.value);
}
</script>
</head>
<body>
<div id="div1">
<span>我们不一样</span>
</div>
<input type="button" value="操作div元素的文本内容" onclick="demo1()"/><br />
<!-- 两种特殊情况 -->
<!-- 下拉框 -->
<select id="select" onchange="demo2()">
<option value="1">--请选择--</option>
<option value="2">中国</option>
<option value="3">瑞士</option>
</select>
<hr />
<!-- 多行文本框 -->
<textarea rows="20" cols="15" id="text1">hello,world!</textarea>
<input type="button" value="操作textarea元素的文本内容" onclick="demo3()"/>
</body>
</html>
六.操作元素节点对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function addNode(){
//获得表单对象
var form1=document.getElementById('form1');
// 创建节点的方法
var p=document.createElement('p');
p.innerText='照片：';
var input1=document.createElement('input');
input1.type='file';
// file类型的输入框的value无用
// input1.value="提交";
var input2=document.createElement('input');
input2.type='button';
input2.value='删除';
//这里function后面要加括号！！！！！！！！！！
input2.onclick=function(){
//移除子节点
p.removeChild(input1);
p.removeChild(input2);
//移除本身
p.remove();
/*
其实直接删除本身就行，但是在表格中可能不行，
所以最好还是先删除子节点，再删除本身
*/
}
// 添加节点
// form1.appendChild(p);//自动会加到最后
// 将两个input标签添加到p标签上
p.appendChild(input1);
p.appendChild(input2);
//获取最后一个节点对象
var lastNode=document.getElementById('lastNode');
//再将p标签插入到最后一个标签之前
form1.insertBefore(p,lastNode);
}
</script>
</head>
<body>
<form id="form1">
<!-- p标签自动换行 -->
<p>
用户名：<input type="text" />
</p>
<p>
照片：<input type="file" />
<input type="button" value="添加" onclick="addNode()"/>
</p>
<p id="lastNode">
<!-- input标签不会自动换行 -->
<input type="button" name="" id="" value="提交" />
<input type="button" name="" id="" value="清空" />
</p>
</form>
</body>
</html>
七.DOM编程示例1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
tr{
height: 70px;
}
th,td{
width: 150px;
/* 单元格内的文本居中 */
text-align: center;
}
</style>
<script>
// 添加节点函数
function addNode(){
// 获取table表格对象
var table1=document.getElementById('table1');
// 创建tr对象
var tr=document.createElement('tr');
// 创建td对象
var td1=document.createElement('td');
// 在单元格内添加文本框，可以换一种思路添加
// innerHTML相当于在其中插入了一段HTML代码，onblur是当光标离开时触发，this是当前对象，即input
td1.innerHTML="<input type='text' size='10px' onblur='serveValue(this)' />";
var td2=document.createElement('td');
td2.innerHTML="<input type='text' size='10px' onblur='serveValue(this)' />";
var td3=document.createElement('td');
//注意是两段字符串相加，不要把加号写到一段字符串里面！！！！
td3.innerHTML="<input type='button' value='添加' onclick='addNode()' />" +
"<input type='button' value='删除' onclick='removeNode(this)' />";
// 组装
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
table1.appendChild(tr);
}
//当光标离开时触发函数，将输入文本框的输入值赋给单元格
function serveValue(thi){
// 获得父节点
var td=thi.parentNode;
// 将input文本框输入的值赋给td
td.innerText=thi.value;
}
//添加时添加一整行，删除时也是删除一整行,所以先找tr标签，然后把tr标签删了就行
function removeNode(thi){
// 删除按钮的父节点的父节点就是tr
var tr=thi.parentNode.parentNode;
// 删除本身
tr.remove();
}
</script>
</head>
<body>
<!-- 快捷方式：table>tr*3>td*3 -->
<table border="1px" align="center" id="table1">
<tr>
<th>图书名称</th>
<th>图书价格</th>
<th>操作</th>
</tr>
<tr>
<td>javaSE</td>
<td>19</td>
<td>
<input type="button" name="" id="" value="添加" onclick="addNode()"/>
<input type="button" name="" id="" value="删除" />
</td>
</tr>
<tr>
<td>javaEE</td>
<td>28</td>
<td>
<input type="button" name="" id="" value="添加" onclick="addNode()"/>
<input type="button" name="" id="" value="删除" />
</td>
</tr>
</table>
</body>
</html>
效果：自己运行体会，简单易懂！
八.DOM编程示例2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
background-image: url(../../../01HTML/img/starry_night.jpg);
background-repeat: no-repeat;
/* 宽，高 */
background-size: 1550px 770px;
}
a{
font-size: 25px;
color: limegreen;
}
div{
width: 200px;
height: 180px;
background-color: gray;
text-align: center;
}
input{
width: 35px;
height: 35px;
}
/* h3{
line-height: 180px;
} */
</style>
<script>
var i=0;//i要放在外面，放在函数里面就是局部变量了，那么每次访问函数就只能调到第一个图片
function changeBackgroundImage(){
var image=['html5.jpg','JavaScript.jpg','css3.jpg','starry_night.jpg'];
if(i<image.length){
document.body.style.backgroundImage="url(../../../01HTML/img/"+image[i]+")";
i++;
}else{
i=0;
document.body.style.backgroundImage="url(../../../01HTML/img/"+image[i]+")";
}
// 另一种写法
// i=i%image.length;
// document.body.style.backgroundImage="url(../../../01HTML/img/"+image[i]+")";
// i++;
}
function changeOver(){
// 获得div对象
var div=document.getElementById("div1");
//变动位置随机
div.style.marginTop=Math.random()*500+'px';
div.style.marginLeft=Math.random()*800+'px';
}
function changeClick(){
document.body.style.backgroundImage="url(../../../01HTML/img/rb.jpg)";
//隐藏当前div
document.getElementById('div1').style.display='none';
}
</script>
</head>
<body>
<!-- 如下写法那么链接表标签被点击就不是跳转页面了，而是执行响应事件 -->
<a href="javascript:changeBackgroundImage()">点击更换主题</a>
<div class="div1" id="div1">
<h3>我是不是你的小可爱</h3>
<input type="button" value="是" onclick="changeClick()"/>
<!-- onmouseover是当鼠标悬浮于'否'之上时触发相应函数 -->
<input type="button" value="否" onmouseover="changeOver()" />
</div>
</body>
</html>
扫一扫
745
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
