您的位置：首页 > Web前端 > JavaScript

JavaScript DOM编程

2018-08-09 21:47 218 查看

DOM

DOM：Document Objective Model（文本对象模型）

  •  D: 文档  html文档或 xml文档
  •  O: 对象 document对象的属性和方法
  •  M: 模型
  • DOM 是针对xml(html)的基于树的API。
  • DOM 树：节点（node）的层次。
  • DOM 把一个文档表示为一颗家谱树（父，子，兄弟）
  • DOM 定义了Node的接口以及许多种节点类型来表示XML节点的多个方面

节点及类型

  • 元素节点
  • 属性节点：元素的属性，可以直接通过属性的方式来操作。
  • 文本节点：是元素节点的子节点

 

例子

[code]<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//当整个HTML文档完全加载成功后触发window.onload事件。
window.onload = function () {
//获取所有的button节点，并获得第一个元素
var btn = document.getElementsByTagName("button")[0];
//为btn的onclick事件赋值:当点击button时，执行函数体
btn.onclick = function(){
//弹出helloworld
alert("hello world");
}
}
</script>
</head>
<body>
<button>ClickMe</button>
</body>
</html>

获取元素节点

  • document.getElementById: 根据id属性获取对应的单个节点（该方法为document对象的方法）

  • document.getElementsByTagName: 根据标签名获取指定节点集合（该方法为Node接口的方法，即任何一个节点都有这个方法）

  • document.getElementsByName: 根据节点的name属性获取符合的节点集合（若HTML元素自身没有定义name属性，则用该方法对有些浏览器无效，所以使用时需谨慎）

例子

[code]<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//获取指定元素的节点.
window.onload = function(){
//1.获取id为bj的那个节点.
var bjNode = document.getElementById("bj");
alert(bjNode);

//2.获取所有li节点.
//使用标签名获取指定节点集合
var liNodes = document.getElementsByTagName("li");
alert(liNodes.length);

var cityNode = document.getElementById("city");
var cityLiNodes = cityNode.getElementsByTagName("li");
alert(cityLiNodes.length);

//3.根据HTML 文档元素的 name属性名来过去指定的节点的集合.
var genderNodes = document.getElementsByName("gender");
alert(genderNodes.length);

}
</script>
</head>
<body>
<head>
<p>你喜欢那个城市？</p>
<ul id="city">
<li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>

<br><br>
<p>你喜欢哪款单击游戏？</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>

<br><br>
gender:
<input type="radio" name="gender" value="male"/>Male
<input type="radio" name="gender" value="female"/>Female
</head>
</body>
</html>

读写属性节点

  1. 先获取某一指定的元素节点
  2. 再读指定元素节点的属性
  3. 设置指定元素节点的属性的值

例子 

[code]<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">

//读写属性节点：通过元素节点.的方式来获取属性值和设置属性值
window.onload = function(){
//属性节点为某元素节点的属性。
//1.先获取指定的那个元素节点
var nameNode = document.getElementById("name");

//2.获取指定元素节点的属性的值
alert(nameNode.value);

//3.设置指定的属性的值

nameNode.value = "James";
}
</script>
</head>
<body>
<p>你喜欢那个城市？</p>
<ul id="city">
<li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>

<br><br>
<p>你喜欢哪款单击游戏？</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>

<br><br>
name: <input type="text" name="username" id="name" value="David"/>
</body>
</html>

获取元素节点的子节点

  1. 先获取某节点。
  2. 用childNodes方法获取指定元素节点的所有子节点。
  3. 获取指定节点的指定子节点
  4. 获取指定节点的第一个子节点或者最后一个子节点

例子 

[code]<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">

//获取元素节点的子节点
window.onload = function(){
//1.获取city 节点
var cityNode = document.getElementById("city");

//2.用childNodes方法获取指定元素节点的所有子节点。
//一共有9个（包括文本节点也是元素节点的子节点）
//该方法不实用。
alert(cityNode.childNodes.length);
//3.获取city节点的所有li子节点。
var cityNodes = cityNode.getElementsByTagName("li");
alert(cityNodes.length);

//4.获取指定节点的第一个子节点或者最后一个子节点
alert(cityNode.firstChild);
alert(cityNode.lastChild);
}
</script>
</head>
<body>
<p>你喜欢那个城市？</p>
<ul id="city">
<li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li></ul>

<br><br>
<p>你喜欢哪款单击游戏？</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>

<br><br>
name: <input type="text" name="username" id="name" value="David"/>
</body>
</html>

获取文本节点

  1. 获取文本节点所在的元素节点。

  2. 通过firstChild找到文本节点。

  3. 通过操作文本节点的nodeValue属性来读写文本节点的值。 

 例子

[code]<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">

//获取文本节点
window.onload = function(){
//文本节点一定是元素节点的子节点。
//1. 获取文本节点所在的元素节点。
var bjNode = document.getElementById("bj");

//2. 通过firstChild找到文本节点。
var bjTextNode = bjNode.firstChild;

//3. 通过操作文本节点的nodeValue属性来读写文本节点的值。
alert(bjTextNode.nodeValue);

bjTextNode.nodeValue = "沈阳";

//alert(bjTextNode)

}
</script>
</head>
<body>
<p>你喜欢那个城市？</p>
<ul id="city">
<li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li></ul>

<br><br>
<p>你喜欢哪款单击游戏？</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>

<br><br>
name: <input type="text" name="username" id="name" value="David"/>
</body>
</html>

 

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航