DOM

Posted 2021-01-15 eakofdawn-settingsun

DOM对象
什么是DOM
DOM：Document Object Model 文档对象模型，定义访问和操作结构化文档（html）的方式。
创建的结构化文档：html、xml 等
DOM包括：核心DOM、HTML DOM、XML DOM。通常情况下HTML DOM 和XML DOM是可以相互使用的。
HTML DOM 将 整个HTML文档呈现成一颗DOM树，树中有元素、属性、文本等成员。

document 文档对象
标签元素的操作
获得元素对象：
根据id获得一个元素：getElementById(id属性值)
根据标签名称获得多个元素：getElementsByTagName(标签名称)
根据class属性获得多个元素：getElementsByClassName(class的属性值)
根据name属性获得多个元素：getElementsByName(name属性值)
创建一个新元素createElement()
将元素放到某个父元素的内部appendChild()
标签体的获取与设置：innerHTML
属性的操作
获得属性的值：getAtrribute(name)
设置属性的值：setAtrribute(name,value)
删除某个属性：removeAtrribute(name)
1
2
3
DOM练习1：getElementById 练习
<script type="text/javascript">
//输出 <input type="text" name="username" value="传智播客10周年_1" id="tid" >标签value属性的值
var tidElement = document.getElementById("tid");
alert(tidElement.value);
//输出 <input type="text" name="username" value="传智播客10周年_1" id="tid" >标签type属性的值
alert(tidElement.type);
</script>
1
2
3
4
5
6
7
DOM练习2：getElementsByTagName 练习
<script type="text/javascript">
//获取所有的input元素,返回值是数组
var inputs = document.getElementsByTagName("input");
//测试长度
alert(inputs.length);
//遍历value的值
for(var i=0;i<inputs.length;i++){
alert(inputs[i].value);
}
//输出type="text"中 value属性的值 不包含按钮(button)
for(var i=0;i<inputs.length;i++){
if(inputs[i].type=="text")
alert(inputs[i].value);
}
//输出所有下拉选 id="edu"中option标签中 value属性的值
var eduElement = document.getElementById("edu");
var eduOptions = eduElement.getElementsByTagName("option");
for(var i=0;i<eduOptions.length;i++){
alert(eduOptions[i].value);
}

function showSelect(){
//输出所有下拉选select的option标签中value的值
//输出选中的值
var options = document.getElementsByTagName("option");
for(var i=0; i< options.length;i++){
if(options[i].selected)
alert(options[i].value);
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
DOM练习3 getElementsByName 练习
<script type="text/javascript">
//通过元素的name属性获取所有元素的引用 name="tname"
//测试该数据的长度
//遍历元素,输出所有value属性的值
var inputs = document.getElementsByName("tname");
/*for(var i=0;i<inputs.length;i++){
alert(inputs[i].value);
}*/
//为每个文本框(<input type="text">)增加chanage事件,当值改变时,输出改变的值
for(var i=0; i<inputs.length;i++){
inputs[i].onchange=function(){
alert(this.value);
}
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
DOM练习4 getAttribute 练习
<script type="text/javascript">
//<li id="xj" value="xingji">星际争霸</li>节点的value属性的值
var xjElement = document.getElementById("xj");
alert(xjElement.getAttribute("value"));
</script>
1
2
3
4
5
DOM练习5 setAttribute 练习
<script type="text/javascript">
//给这个节点增加 name属性 <li id="xj" value="xingji" name="xingjizhengba">星际争霸</li>
var xjElement = document.getElementById("xj");
xjElement.setAttribute("name","xingjizhengba");
//测试
alert(xjElement.getAttribute("name"));

</script>
1
2
3
4
5
6
7
8
DOM练习6 innerHTML 练习
<script type="text/javascript">
window.onload=function(){
//在div层中插入 <h1>海马</h1>
var cityElement = document.getElementById("city");
cityElement.innerHTML="<h1>海马</h1>";

//在div层中插入“海马” 文本
//cityElement.innerHTML="海马";
//读取div的标签体内容
alert(cityElement.innerHTML);
//读取div的标签体文本内容
alert(cityElement.innerText);
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
DOM练习7 hasChildNodes 练习
<script type="text/javascript">
//查看id="edu"的节点是否含有子节点
var eduElement = document.getElementById("edu");
var flag = eduElement.hasChildNodes();
alert(flag);
//查看id="tid_1"的节点是否含有子节点
var tid_1Element = document.getElementById("tid_1");
flag = tid_1Element.hasChildNodes();
alert(flag);
</script>
1
2
3
4
5
6
7
8
9
10
DOM练习8 removeChild 练习
<script type="text/javascript">
//删除<ul id="city"> 下<li id="bj" name="beijing">北京</li>这个节点</ul>
var cityElement = document.getElementById("city");
var bjElement = document.getElementById("bj");
//cityElement.removeChild(bjElement);
//获取北京的父节点
var parent = bjElement.parentNode;
alert(parent.id);
</script>
1
2
3
4
5
6
7
8
9
DOM练习9 replaceChild 练习
<script type="text/javascript">
//点击北京节点， 将被反恐节点替换
var bjElement = document.getElementById("bj");
bjElement.onclick = function(){
var cityElement = document.getElementById("city");
var fkElement = document.getElementById("fk");
cityElement.replaceChild(fkElement,bjElement);
}
</script>
1
2
3
4
5
6
7
8
9
DOM练习10 createElement 练习
<script type="text/javascript">
//增加城市节点 <li id="tj" v="tianjin">天津</li>放置到city下
var cityElement = document.getElementById("city");
var tjElement = document.createElement("li");
tjElement.innerHTML="天津";
tjElement.setAttribute("id","tj");
tjElement.setAttribute("value","tianjin");
cityElement.appendChild(tjElement);
</script>
1
2
3
4
5
6
7
8
9
<h4<DOM练习11 insertBefore 练习

<script type="text/javascript">
// 在重庆前面插入新的节点 <li id="tj" name="tianjin">天津</li>
var cityElement = document.getElementById("city");
var tjElement = document.createElement("li");
tjElement.innerHTML="天津";
tjElement.setAttribute("id","tj");
tjElement.setAttribute("value","tianjin");
var cityElement = document.getElementById("city");
var cqElement = document.getElementById("cq");
cityElement.insertBefore(tjElement,cqElement);
</script>
---------------------
作者：欧阳子卿
来源：CSDN
原文：https://blog.csdn.net/OYziqing/article/details/82847199
版权声明：本文为博主原创文章，转载请附上博文链接！