了解javascript中的Dom操作

DOM(Document Object Model):

结点的概念:整个文档就是由层次不同的多个节点组成,可以说结点代表了全部内容。

结点类型

1.元素结点
2.属性结点
3.文本结点

结点的注意点:

1.文本节点和属性结点都看作元素结点的子结点
2.我们一般所说的结点指的就是元素结点,将html标签看作是一个对象,并用“结点”称呼它
3.结点的关系有:父子关系、兄弟关系

1.获取元素结点

1)直接获取

① document.getElementById()
② document.getElementsByName()
③ document.getElementsByTagName()

2)间接获取

父子关系
firstChild lastChild childNodes

子父关系
parentNode

兄弟关系
nextSibling previousSibling

2.操作属性结点

1)通过对象“.”属性,来操作属性
优:可以动态获取用户修改的属性值
缺:不能获取自定义属性的值

2)getAttribute("key") setAttribute("key","value") removeAttribute("key")
优:可以获取自定义属性的值
缺:不能动态获取用户修改的属性值

3.处理文本结点

1) 通过对象.innerText 获取标签内部的文本信息

2) 通过对象.innerHTML 获取标签内部的HTML代码

4.动态改变DOM结构

1)创建一个结点对象
document.createElement("标签名")

2)(父结点)追加子结点对象
fatherNode.appendChild(子结点对象)

3)(父结点)在指定结点前添加子结点
fatherNode.insertBefore(新结点对象,参考结点对象)

4)(父结点)替换旧的子结点对象
fatherNode.replaceChild(新结点对象,旧结点对象)

5)(父结点)删除旧子结点对象
fahterNode.removeChild(旧结点对象)

5.动态改变元素的CSS样式(不重要)

1)我们通过对象.style属性操作对象的css样式:样式名称中有“-”将“-”去掉,并将“-”后一个字母改为大写来作为样式的新名称

2)我们希望通过class为一个对象添加一个class样式,添加属性名是className,而并非class(class是js的关键字,并能作为属性名存在)

<script type="application/javascript">
//1.获取元素结点
//1)直接获取
// ① document.getElementById()
function getEle1(){
var obj=document.getElementById("userid")
console.log(obj)
}
// ② document.getElementsByName()
function getEle2() {
// 获取的是一个数组
var obj = document.getElementsByName("fav");
console.log(obj)
}
// ③ document.getElementsByTagName()
function getEle3(){
var obj = document.getElementsByTagName("input");
console.log(obj);
}
function getEle4(){
var father = document.getElementById("regForm");
var sons = father.childNodes;
// 获取指定位置
console.log(sons[1]);
// firstChild 获取第一个
console.log(father.firstChild);
// lastChild 获取最后一个
console.log(father.lastChild);
}
// 子父关系 parentNode
function getEle5(){
var son = document.getElementById("userid");
console.log(son.parentNode)
}
// 兄弟关系 nextSibling 下一个对象 
//previousSibling当前结点的前一个结点返回紧邻当前元素之前的元素
function getEle6(){
var bro = document.getElementById("userid");
console.log(bro.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling);
bro.previousSibling
}
function getField1(){
var obj = document.getElementById("nickid");
//console.log(obj.type);
//将昵称的样式改为password
//obj.type = "password";
var objval = obj.getAttribute("name");
console.log(objval);
obj.setAttribute("abcd","5678");
obj.removeAttribute("type");
// 可以获取改变后的属性
console.log(obj.value)
// 只能获取初始定义的属性
console.log(obj.getAttribute("value"));
}
// 1) 通过对象.innerText 获取标签内部的文本信息
function getText1(){
var myDiv = document.getElementById("myDiv");
console.log(myDiv.innerText);
}
// 2) 通过对象.innerHTML 获取标签内部的HTML代码
function getText2(){
var myDiv = document.getElementById("myDiv");
console.log(myDiv.innerHTML);
}
// 添加文本
function getText3(){
var myDiv = document.getElementById("myDiv");
myDiv.innerText = "<img src='1.jpg' />";
}
// 添加代码
function getText4(){
var myDiv = document.getElementById("myDiv");
myDiv.innerHTML = "<img src='1.jpg' />";
}
</script>
</head>
<body>
<button onclick="getEle1();">点我测试1</button>
<button onclick="getEle2();">点我测试2</button>
<button onclick="getEle3();">点我测试3</button>
<button onclick="getEle4();">点我测试4</button>
<button onclick="getEle5();">点我测试5</button>
<button onclick="getEle6();">点我测试6</button>
<hr/>
<button onclick="getField1();">属性测试1</button>
<hr/>
<button onclick="getText1();">文本测试1</button>
<button onclick="getText2();">文本测试2</button>
<button onclick="getText3();">文本测试3</button>
<button onclick="getText4();">文本测试4</button>
<hr/>
<form id="regForm">
用户名:<input id="userid" type="text" name="username"><br/>
密码:<input type="password" name="password"><br/>
昵称:<input id="nickid" type="text" name="nickname" value="大名鼎鼎" abcd="1234" ><br/>
性别:男<input type="radio" name="gender" value="nan">  
女<input type="radio" name="gender" value="nv"><br/>
爱好:狗<input type="checkbox" name="fav" value="dog">
猫<input type="checkbox" name="fav" value="cat">
羊驼<input type="checkbox" name="fav" value="yt"><br/>
<input type="submit" value="注册">
</form>
<div id="myDiv"><b>hello</b></div>
</body>

动态改变DOM结构

1)创建一个结点对象

document.createElement("标签名")

<script type="application/javascript">
function changeDom1(){
var ipt=document.createElement("input");
}
</script>
<button onclick="changeDom1();">创建结点对象</button>

2)(父结点)追加子结点对象

fatherNode.appendChild(子结点对象)

function changeDom2() {
var father = document.getElementById("regForm");
var ipt = document.createElement("input");
ipt.type = "text";
father.appendChild(ipt);
}
<button onclick="changeDom2();">追加子结点对象</button>

3)(父结点)在指定结点前添加子结点

fatherNode.insertBefore(新结点对象,参考结点对象)

function changeDom3() {
var father = document.getElementById("regForm");
var refChild = document.getElementById("brid");
var newChild = document.createElement("input");
newChild.type = "text";
father.insertBefore(newChild, refChild);
}
<button onclick="changeDom3();">插入子结点对象</button>

4)(父结点)替换旧的子结点对象

fatherNode.replaceChild(新结点对象,旧结点对象)

function changeDom4() {
var father = document.getElementById("regForm");
var refChild = document.getElementById("brid");
var newChild = document.createElement("input");
newChild.type = "text";
father.replaceChild(newChild, refChild);
}
<button onclick="changeDom4();">替换子结点对象</button>

5)(父结点)删除旧子结点对象

function changeDom5() {
var father = document.getElementById("regForm");
var refChild = document.getElementById("nickid");
father.removeChild(refChild);
}
<button onclick="changeDom5();">删除子结点对象</button>

动态改变元素的CSS样式(不重要)

<style type="text/css">
.addstyle{
color: red;
font-size: 72px;
text-decoration: underline;
}
</style>
<script type="application/javascript">
/*
5.动态改变元素的css样式
1)我们通过对象.style属性操作对象的css样式:样式名称中有“-”将“-”去掉,并将“-”后一个字母改为大写来作为样式的新名称
2)我们希望通过class为一个对象添加一个class样式,添加属性名是className,而并非class(class是js的关键字,并能作为属性名存在)
*/
function fontGreater(){
var myDiv = document.getElementById("myDiv");
console.log(myDiv);
myDiv.style.fontSize = "36px";
myDiv.style.fontFamily = "宋体";
}
function changeFont(){
var myDiv = document.getElementById("myDiv");
myDiv.className = "addstyle";
//myDiv.setAttribute("class","addstyle");
}
</script>
</head>
<body>
<button onclick="fontGreater()">放大字体</button>
<button onclick="changeFont()">添加样式</button>
<div id="myDiv" >你好世界!</div>
</body>

相关推荐