JavaScript DOC节点操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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="atguigu"/>
</body>

Window.onload() 在所有网页内容加载完毕之后就执行内部的代码.

获取元素节点常用3个方法

  • ById
  • ByTagName
  • ByName

赋值方式

1
2
3
4
5
6
var nameNode = document.getElementById("name");
<!--more-->
//2. 再读取指定属性的
alert(nameNode.value);
//3. 设置指定的属性的值.
nameNode.value = "Heiyiren";

子节点的操作

1
2
3
4
5
var cityNode = document.getElementById("city");
var cityLiNodes = cityNode.getElementsByTagName("li");
alert(cityLiNodes.length);
alert(cityNode.firstChild);
alert(cityNode.lastChild);

子节点赋值

1
2
3
4
5
6
7
8
9
10
11
//文本节点一定是元素节点的子节点.
//1. 获取文本节点所在的元素节点
var bjNode = document.getElementById("bj");
//2. 通过 firstChild 定义为到文本节点
var bjTextNode = bjNode.firstChild;
//3. 通过操作文本节点的 nodeValue 属性来读写文本节点的值.
bjTextNode.nodeValue = "尚硅谷";
6. 正则表达式
/ /g ^指定以什么开头
G 代表全局
Vsr a=/^\s*|\s*/g; text.replace(a,"");

Node 节点有3个属性,值Value 可读写,其他只读.

  • nodeValue
  • nodeType
  • nodeName

元素节点的创建

1
Var liNode = document.createEliment("li")

像某个元素节点添加子节点,

1
Node.appendChild(liNode);

创建文本节点

1
document.createTextNode("aaa")

文本节点一般作为 元素节点的子节点来使用,表单提交返回false 即可阻止。

1
Node.clone()   //可以 克隆一个元素

1
node.replace()   //结合以上代码, 达到2个元素互换的目的.
1
document.removeChild()  // 可以删除节点

Confirm 可以弹出对话框