HTML DOM
DOM 是Document Object Model( 文档对象模型 )的缩写。
DOM是把html里面的各种数据当作对象进行操作的一种思路。
比如一个超链，作为一个DOM对象，就可以使其隐藏，修改其href指向的地址。
1.1 节点概念
DOM把所有的html都转换为节点
整个文档 是一个节点
元素 是节点
元素属性 是节点
元素内容 是节点
注释 也是节点
如本例
通过document.getElementById获取了id=d1的div标签对应的元素节点
然后通过attributes 获取了该节点对应的属性节点
接着通过childNodes获取了内容节点
<html>
<body>
<div id="d1">hello HTML DOM</div>
</body>
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var div1 = document.getElementById("d1");
p("文档节点"+document);
p("元素"+div1);
p("属性节点"+div1.attributes[0]);
p("内容节点"+div1.childNodes[0]);
</script>
</html>
1.2 获取节点
通过id获取元素节点
在设计html的时候，一个元素对应的id应该是唯一的。
可以通过document.getElementById 获取某个元素对应的元素节点对象
<html>
<div id="d1">hello HTML DOM</div>
<script>
var div1 = document.getElementById("d1");
document.write(div1);
</script>
</html>
通过标签名称获取元素节点
所有的元素都有标签名
通过 getElementsByTagName 根据标签名称获取一个元素数组。
<html>
<div >hello javascript</div>
<div >hello BOM</div>
<div >hello DOM</div>
<br>
<script>
var divs = document.getElementsByTagName("div");
for(i=0;i<divs.length;i++){
document.write(divs[i]);
document.write("<br>");
}
</script>
</html>
通过类名获取元素节点
与 getElementsByTagName 类似的，也可以通过 getElementsByClassName 根据class返回一个节点数组
<html>
<h1 class="d" >hello javascript</h1>
<h2 class="d" >hello BOM</h2>
<div class="d" >hello DOM</div>
<br>
<script>
var elements= document.getElementsByClassName("d");
for(i=0;i<elements.length;i++){
document.write(elements[i]);
document.write("<br>");
}
</script>
</html>
通过表单元素的name获取元素节点
表单元素都有name属性，通过getElementsByName可以根据name属性的值，获取元素节点。
<html>
用户名 <input name="userName"> <br>
密码 <input name="userPassword">
<br>
<script>
var elements= document.getElementsByName("userName");
for(i=0;i<elements.length;i++){
document.write(elements[i]);
document.write("<br>");
}
</script>
</html>
为什么会获取不到?
参考本例代码，和通过id获取元素节点同样的代码 document.getElementById却无法获取元素节点。
这是因为javascript是解释语言，是顺序执行的。 在执行到 document.getElementById的时候，div标签还没有加载，所以无法获取。
<html>
<script>
var div1 = document.getElementById("d1");
document.write(div1);
</script>
</html>
<div id="d1">hello HTML DOM</div>
获取属性节点
首先通过getElementById获取元素节点，然后通过元素节点的attributes获取其下所有的属性节点。
因为属性节点是多个，所以是以数组的形式返回出来的，接着通过for循环遍历，查看每个节点的nodeName和nodeValue
如果要获取一个指定属性的值，可以采用如下风格，as表示所有的属性，as["id"]取出名称是id的属性
as["id"].nodeValue
注: nodeName和nodeValue表示一个节点的名称和值，详见下一步的学习节点的属性
<html>
<div id="d1" align="center" class="abc">hello HTML DOM</div>
<script>
var div1 = document.getElementById("d1");
var as = div1.attributes;
document.write("div总共有"+as.length +" 个属性");
document.write("分别是:");
for(i = 0; i< as.length; i++){
document.write("<br>");
document.write(as[i].nodeName);
document.write(":");
document.write(as[i].nodeValue);
}
document.write("<br>");
document.write("div的id属性值是："+ as["id"].nodeValue);
</script>
</html>
获取内容节点
首先通过document.getElementById获取元素节点，然后通过childNodes获取其所有的子节点。 其中第一个子节点，就是其内容节点。
然后借助nodeName和nodeValue把内容节点的名称和值打印出来。
注: nodeName和nodeValue表示一个节点的名称和值，详见下一步的学习节点的属性
<html>
<div id="d1" align="center" class="abc">hello HTML DOM</div>
<script>
var div1 = document.getElementById("d1");
var content = div1.childNodes[0];
document.write("div的内容节点名是:"+content.nodeName);
document.write("<br>");
document.write("div的内容节点值是:"+content.nodeValue);
</script>
</html>
1.3 节点的属性
节点名称
nodeName表示一个节点的名字
如本例：
document.nodeName 文档的节点名，是 固定的#document
div1.nodeName 元素的节点名，是对应的标签名 div
div1.attributes[0].nodeName 属性的节点名，是对应的属性名 id
div1.childNodes[0].nodeName 内容的节点名，是固定的 #text
<html>
<div id="d1">hello HTML DOM</div>
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var div1 = document.getElementById("d1");
p("document的节点名称:"+document.nodeName);
p("div元素节点的节点名称:"+div1.nodeName);
p("div下属性节点的节点名称:"+div1.attributes[0].nodeName);
p("div下内容节点的节点名称:"+div1.childNodes[0].nodeName);
</script>
</html>
节点值
nodeValue表示一个节点的值
如本例：
document.nodeValue 文档的节点值，是 null
div1.nodeValue 元素的节点值，是null
div1.attributes[0].nodeValue 属性的节点值，是对应的属性值 d1
div1.childNodes[0].nodeValue 内容的节点值，是内容 即： #text
<html>
<div id="d1">hello HTML DOM</div>
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var div1 = document.getElementById("d1");
p("document是没有nodeValue的："+document.nodeValue);
p("元素节点是没有nodeValue的："+div1.nodeValue);
p("属性节点id的nodeValue："+div1.attributes[0].nodeValue);
p("内容节点的nodeValue："+div1.childNodes[0].nodeValue);
</script>
</html>
节点类型
nodeType表示一个节点的类型
不同的节点类型，对应的节点类型值是不一样的
如本例：
document.nodeType 文档的节点类型，是 9
div1.nodeType 元素的节点类型，是 1
div1.attributes[0].nodeType 属性的节点类型，是 2
div1.childNodes[0].nodeType 内容的节点类型，是 3
<html>
<div id="d1">hello HTML DOM</div>
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var div1 = document.getElementById("d1");
p("document的nodeType是："+document.nodeType);
p("元素节点的nodeType是："+div1.nodeType);
p("属性节点的nodeType是："+div1.attributes[0].nodeType);
p("内容节点的nodeType是："+div1.childNodes[0].nodeType);
</script>
</html>
元素的文本内容
修改与获取内容的值可以通过 childNodes[0].nodeValue进行
还有个简便办法就是通过innerHTML进行。 效果是一样的。
<html>
<div id="d1">hello HTML DOM</div>
<script>
function changeDiv1(){
document.getElementById("d1").childNodes[0].nodeValue= "通过childNode[0].value改变内容";
}
function changeDiv2(){
document.getElementById("d1").innerHTML= "通过innerHTML改变内容";
}
</script>
<button οnclick="changeDiv1()">通过内容节点方式改变div的内容</button>
<button οnclick="changeDiv2()">通过innerHTML改变div的内容</button>
</html>
元素上的属性
元素上的属性，比如id,value 可以通过 . 直接访问
如果是自定义属性，那么可以通过如下两种方式来获取
getAttribute("test")
attributes["test"].nodeValue
注: class需要通过className获取
<html>
<div id="d1">hello HTML DOM</div>
<script>
function get(){
var input1 = document.getElementById("input1");
var s = "id="+input1.id + "<br>";
s += "value="+input1.value + "<br>";
s += "class="+input1.className + "<br>";
s += "test="+input1.getAttribute("test")+ "<br>";
s += "test="+input1.attributes["test"].nodeValue+ "<br>";
document.getElementById("d1").innerHTML= s;
}
</script>
<input id="input1" class="class1 class2" test="t1" value="这是一个输入框">
<br>
<button οnclick="get()">获取input的属性</button>
<div style="height:30px"></div>
</html>
1.4 样式
隐藏和显示
通过给元素的style.display 赋值，改变显示还是隐藏
<button οnclick="hide()">隐藏div</button>
<button οnclick="show()">显示div</button>
<br>
<br>
<div id="d">
这是一个div
</div>
<script>
function hide(){
var d = document.getElementById("d");
d.style.display="none";
}
function show(){
var d = document.getElementById("d");
d.style.display="block";
}
</script>
改变背景色
通过给元素的style.backgroundColor 赋值，修改样式
你也许注意到了style.backgroundColor 这里的backgroundColor和css中的背景色background-color 是有所不同的
换句话说，通过DOM的style去修改样式，需要重新记忆另一套样式名称，这是很累赘的事情。
最好能够通过CSS的属性名，直接就进行修改了。比如通过这样的方式：
d1.css("background-color","green");
这样就仅仅需要使用CSS原本的属性名即可了。
Javascript并不提供这样的解决方案，但是到了JQuery就提供了这样的解决方案,请参考 通过JQuery设置CSS
<div id="d1" style="background-color:pink">Hello HTML DOM</div>
<button οnclick="change()">改变div的背景色</button>
<script>
function change(){
var d1 = document.getElementById("d1");
d1.style.backgroundColor="green";
}
</script>
1.5 事件
焦点事件
焦点相关的事件，分别有获取焦点和失去焦点
当组件获取焦点的时候，会触发onfocus事件
当组件失去焦点的时候，会触发onblur事件
<input type="text" οnfοcus="f()" οnblur="b()" id="input1" placeHolder="输入框1" >
<br>
<br>
<input type="text" id="input2" placeHolder="输入框2">
<br>
<br>
<div id="message"></div>
<script>
function f(){
document.getElementById("message").innerHTML="输入框1获取了焦点";
}
function b(){
document.getElementById("message").innerHTML="输入框1丢失了焦点";
}
</script>
鼠标事件
鼠标事件，由鼠标按下，鼠标弹起，鼠标经过，鼠标进入，鼠标退出几个事件组成
当在组件上鼠标按下的时候，会触发onmousedown事件
当在组件上鼠标弹起的时候，会触发onmouseup事件
当在组件上鼠标经过的时候，会触发onmousemove事件
当在组件上鼠标进入的时候，会触发onmouseover事件
当在组件上鼠标退出的时候，会触发onmouseout事件
注: 当鼠标进入一个组件的时候，onmousemove和onmouseover都会被触发，区别在于无论鼠标在组件上如何移动，onmouseover只会触发一次，onmousemove每次移动都会触发
<input type="button" οnmοusedοwn="down()" οnmοuseup="up()" value="用于演示按下和弹起" >
<br>
<br>
<input type="button" οnmοusemοve="move()" value="用于演示鼠标经过" >
<br>
<br>
<input type="button" οnmοuseοver="over()" value="用于演示鼠标进入" >
<br>
<br>
<input type="button" οnmοuseοut="out()" value="用于演示鼠标退出" >
<br>
<br>
<div id="message"></div>
<script>
var number = 0;
function down(){
document.getElementById("message").innerHTML="按下了鼠标";
}
function up(){
document.getElementById("message").innerHTML="弹起了鼠标";
}
function move(){
document.getElementById("message").innerHTML="鼠标经过次数:"+(++number);
}
function over(){
document.getElementById("message").innerHTML="鼠标进入次数:"+(++number);
}
function out(){
document.getElementById("message").innerHTML="鼠标退出";
number = 0;
}
</script>
键盘事件
键盘事件，由键盘按下keydown，键盘按下keypress,键盘弹起几个事件组成
当在组件上键盘按下的时候，会触发onkeydown事件
当在组件上键盘按下的时候，也会触发onkeypress事件
当在组件上键盘弹起的时候，会触发onkeyup事件
注: onkeypress 是当按下并弹起的组合动作，这个说法是错误的
都是用于表示键盘按下，onkeydown和onkeypress的区别在什么呢？
onkeydown
可以获取所有键，除了打印键Prts
可以获取用户是否点击了修饰键 (ctrl,shift,alt)
不能判断输入的是大写还是小写
onkeypress
只能获取字符键
不能获取用户是否点击了修饰键 (ctrl,shift,alt)
可以判断输入的是大写还是小写
但是！ 在不同的浏览器上，以上规则是不成立的。说这些都没有卵用，你无法控制用户到底使用哪种浏览器。 所以，只要记得keydown和keypress都表示点下了键。。。即可
“记得要先用鼠标选中该组件，然后敲击键盘”
<br>
<input type="button" οnkeydοwn="down(event)" value="用于演示按下keydown" >
<br>
<br>
<input type="button" οnkeypress="press(event)" value="用于演示按下keypress" >
<br>
<br>
<input type="button" οnkeyup="up()" value="用于演示弹起" >
<br>
<br>
<div id="message">
</div>
<script>
var number =0;
function down(e){
var text = "按下了键" + e.keyCode;
if(e.shiftKey==1)
text += " 并且按下了shift键";
document.getElementById("message").innerHTML=text ;
}
function up(){
document.getElementById("message").innerHTML="弹起了键盘";
}
function press(e){
var text = "按下了键" + e.keyCode;
if(e.shiftKey==1)
text += " 并且按下了shift键";
document.getElementById("message").innerHTML=text ;
}
</script>
点击事件
点击事件，由单击，双击按两个事件组成
当在组件上单击的时候，会触发onclick事件
当在组件上双击的时候，会触发ondblclick事件
注1：在组件上，按下空格或则回车键也可以造成单击的效果，但是却不能造成双击的效果
注2: 自定义函数不要使用click()，这是保留函数名。
<input type="button" οnclick="singleClick()" οndblclick="doubleClick()" value="用于演示单击和双击" >
<br>
<br>
<div id="message"></div>
<script>
function singleClick(){
document.getElementById("message").innerHTML="单击按钮";
}
function doubleClick(){
document.getElementById("message").innerHTML="双击按钮";
}
</script>
变化事件
当组件的值发生变化的时候，会触发onchange事件
注：对于输入框而言，只有在失去焦点的时候，才会触发onchange，所以需要点击一下"按钮" 造成输入框失去焦点
<input type="text" id="t1" οnchange="change()" value="" >
<br>
<br>
<input type="button" value="令输入框失去焦点的按钮" >
<br>
<br>
<div id="message"></div>
<script>
function change(){
var message = document.getElementById("message");
var t1 = document.getElementById("t1");
message.innerHTML = "输入框的值变为了: "+ t1.value;
}
</script>
提交事件
可以在form元素上，监听提交事件
当form元素@提交的时候，会触发onsubmit事件
本例使用 提交账号密码 来进行演示
<form action="/study/login.jsp" οnsubmit="login()">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>
<script>
function login(){
alert("提交表单");
}
</script>
加载事件
当整个文档加载成功，或者一个图片加载成功，会触发加载事件
当body元素或者img@加载的时候，会触发onload事件
<script>
function loadBody(){
document.getElementById("message1").innerHTML="文档加载成功";
}
function loadImg(){
document.getElementById("message2").innerHTML="图片加载成功";
}
</script>
<body οnlοad="loadBody()">
<div id="message1"></div>
<div id="message2"></div>
</body>
<img οnlοad="loadImg()" src="http://how2j.cn/example.gif"/>
当前组件
this表示触发事件的组件，可以在调用函数的时候，作为参数传进去
<input type="button" οnclick="singleClick(this)" value="演示this的按钮1" >
<input type="button" οnclick="singleClick(this)" value="演示this的按钮2" >
<br>
<br>
<div id="message"></div>
<script>
function singleClick(button){
var s = "被点击的按钮上的文本是: "+button.value;
document.getElementById("message").innerHTML=s;
}
</script>
阻止事件的发生
比如在提交一个表单的时候，如果用户名为空，弹出提示，并阻止原本的提交
1. 在调用函数的时候，增加一个return
2. 在函数中，如果发现用户名为空，则返回false
3. 当onSubmit得到的返回值是false的时候，表单的提交功能就被取消了
<form method="post" action="/study/login.jsp" οnsubmit="return login()">
账号：<input id="name" type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>
<script>
function login(){
var name = document.getElementById("name");
if(name.value.length==0){
alert("用户名不能为空");
return false;
}
return true;
}
</script>
1.6 节点关系
节点关系图
假设html代码如实例中，那么各个元素节点的关系如下:
d1 d2 d3 的parentNode是parentDiv
parentDiv的firstNode是 d1
parentDiv的lastNode是d3
d2的previousSibling是d1
d2的nextSibling是d3
parentDiv的children是 d1 d2 d3
<div id="parentDiv">
<div id="d1">第一个div</div>
<div id="d2">第二个div</div>
<div id="d3">第三个div</div>
</div>
父节点关系
通过parentNode获取父节点。
本例中从id=d1的div开始递归获取其父节点，分别获取如下父节点
DIV[id=parentDiv] -> body->html->document
<html>
<body>
<script>
var node = null;
function showParent(){
if(null==node)
node = document.getElementById("d1");
if(document == node)
alert("已是根节点:document");
else{
alert(node.parentNode);
node = node.parentNode;
}
}
</script>
<div id="parentDiv">
父Div的内容
<div id="d1">第一个div</div>
<div id="d2">第二个div</div>
<div id="d3">第三个div</div></div>
<button οnclick="showParent()">不断递归d1的父节点</button>
</body>
</html>
同胞节点关系
分别通过 previousSibling和nextSibling属性获取前一个，以及后一个同胞节点。
在本例中，首先获取d2元素节点
通过previousSibling获取前一个节点d1.
注意 d1和d2标签是紧挨着的，所以d2前一个节点是d1。
通过nextSibling 获取后一个节点#text.
注意 d2和d3不是紧挨着 标签之间有任何字符、空白、换行都会产生文本元素。 所以获取到的节点是#text.
<script>
function showPre(){
var d2 = document.getElementById("d2");
alert(d2.previousSibling.innerHTML);
}
function showNext(){
var d2 = document.getElementById("d2");
alert(d2.nextSibling.nodeName);
}
</script>
<div id="parentDiv">
父Div的内容
<div id="d1">第一个div</div><div id="d2">第二个div</div>
<div id="d3">第三个div</div></div>
<button οnclick="showPre()">获取d2的前一个同胞</button>
<button οnclick="showNext()">获取d2的后一个同胞</button>
子节点关系
子节点关系有:
firstChild 第一个子节点
lastChild 最后一个子节点
childNodes 所有子节点
注:firstChild 如果父节点的开始标签和第一个元素的开始标签之间有文本、空格、换行，那么firstChild第一个子节点将会是文本节点，不会是第一个元素节点
注:lastChild 和firstChild同理。 在本例中故意让第3个元素的结束标签与div的结束标签紧挨着，所以最后一个子节点就是第三个标签
注: 子元素个数一共是6个。 因为parentDiv的子节点是 文本节点接着一个元素节点，重复3次。 所以一共是6个。
<script>
function showfirst(){
var div = document.getElementById("parentDiv");
alert(div.firstChild.nodeName);
}
function showlast(){
var div = document.getElementById("parentDiv");
alert(div.lastChild.nodeName);
}
function showall(){
var div = document.getElementById("parentDiv");
alert(div.childNodes.length);
}
</script>
<div id="parentDiv">
父Div的内容
<div id="d1">第一个div</div>
<div id="d2">第二个div</div>
<div id="d3">第三个div</div></div>
<button οnclick="showfirst()">第一个子节点</button>
<button οnclick="showlast()">最后一个子节点</button>
<button οnclick="showall()">所有子节点数量</button>
childNodes和children的区别
childNodes和children都可以获取一个元素节点的子节点。
childNodes 会包含文本节点
children 会排除文本节点
<div id="parentDiv">
<div id="d1">第一个div</div>
<div id="d2">第二个div</div>
<div id="d3">第三个div</div></div>
<button οnclick="showNumber1()">通过childNodes获取子节点总数</button>
<button οnclick="showNumber2()">通过children()获取子节点总数</button>
<script>
function showNumber1(){
alert(document.getElementById("parentDiv").childNodes.length);
}
function showNumber2(){
alert(document.getElementById("parentDiv").children.length);
}
</script>
1.7 创建节点
创建元素节点
通过createElement 创建一个新的元素节点
接着把该元素节点，通过appendChild加入到另一个元素节点div1中
<html>
<div id="d">Hello HTML DOM</div>
<script>
function add(){
var hr=document.createElement("hr");
var div1 = document.getElementById("d");
div1.appendChild(hr);
}
</script>
<button οnclick="add()">在div中追加一个hr元素</button>
</html>
创建文本节点
首先创建一个元素节点p (p是p标签，不是随便命名的变量名)
接着通过createTextNode创建一个内容节点text
把text加入到p
再把p加入到div
<html>
<div id="d">Hello HTML DOM</div>
<script>
function add(){
var p=document.createElement("p");
var text = document.createTextNode("这是通过DOM创建出来的<p>");
p.appendChild(text);
var div1 = document.getElementById("d");
div1.appendChild(p);
}
</script>
<button οnclick="add()">在div中追加一个p元素</button>
</html>
创建属性节点
首先创建一个元素节点a
接着创建一个内容节点content
把content加入到a
然后通过createAttribute创建一个属性节点 href
设置href的值为http:12306.com
通过setAttributeNode把该属性设置到元素节点a上
最后把a加入到div
<html>
<div id="d">Hello HTML DOM<br></div>
<script>
function add(){
var a=document.createElement("a");
var content = document.createTextNode("http://12306.com");
a.appendChild(content);
var href = document.createAttribute("href");
href.nodeValue="http://12306.com";
a.setAttributeNode(href);
var div1 = document.getElementById("d");
div1.appendChild(a);
}
</script>
<button οnclick="add()">在div中追加一个超链</button>
</html>
1.8 删除节点
删除元素节点
要删除某个元素节点有两步
第一：先获取该元素的父节点
第二：通过父节点，调用removeChild 删除该节点
<script>
function removeDiv(){
var parentDiv = document.getElementById("parentDiv");
var div2= document.getElementById("div2");
parentDiv.removeChild(div2);
}
</script>
<div id="parentDiv">
<div id="div1">安全的div</div>
<div id="div2">即将被删除的div</div>
</div>
<button οnclick="removeDiv()">删除第二个div</button>
删除属性节点
要删除某个属性节点有两步
第一：先获取该元素节点
第二：元素节点，调用removeAttribute删除指定属性节点
<script>
function removeHref(){
var link= document.getElementById("link");
link.removeAttribute("href");
}
</script>
<a id="link" href="http://12306.com">http://12306.com</a>
<br>
<button οnclick="removeHref()">删除超链的href属性</button>
删除文本节点
删除文本节点
1. 通过childNodes[0] 获取文本节点
注:children()[0] 只能获取第一个子元素节点，不能获取文本节点
2. 通过removeChild删除该文本节点
但是这种方式比较麻烦，一般都是直接通过innerHTML设置为空即可。
注: 通过innerHTML=""的方式，同样会导致文本子节点被删除。
<script>
function removeDiv1(){
var parentDiv = document.getElementById("parentDiv");
var textNode = parentDiv.childNodes[0];
parentDiv.removeChild(textNode);
}
function removeDiv2(){
var parentDiv = document.getElementById("parentDiv");
parentDiv.innerHTML="";
}
function recover(){
var parentDiv = document.getElementById("parentDiv");
parentDiv.innerHTML="这里是文本 ";
}
</script>
<style>
button{
display:block;
}
</style>
<div id="parentDiv">
这里是文本
</div>
<button οnclick="removeDiv1()">通过removechild删除div下的文本节点</button>
<button οnclick="removeDiv2()">通过innerHTML让内容置空</button>
<button οnclick="recover()">恢复内容</button>
1.9 替换节点
替换节点
与删除节点一样，替换节点也需要先获取父节点，然后通过父节点替换子节点。
1. 获取父节点
2. 创建子节点
3. 获取被替换子节点
4. 通过replaceChild进行替换
注: replaceChild 第一个参数是保留的节点，第二个参数是被替换的节点
<div id="parentDiv">
<div id="d1">第一个div</div>
<div id="d2">第二个div</div>
<div id="d3">第三个div</div>
</div>
<script>
function replaceDiv(){
var d4= document.createElement("div");
var text = document.createTextNode("第四个div");
d4.appendChild(text);
var d3 = document.getElementById("d3");
var parentDiv = document.getElementById("parentDiv");
parentDiv.replaceChild(d4,d3);
}
</script>
<button οnclick="replaceDiv()">替换第3个div</button>
1.10 插入节点
追加节点
通过appendChild追加节点。 追加节点一定是把新的节点插在最后面
1. 创建新节点
2. 获取父节点
3. 通过appendChild追加
<div id="parentDiv">
<div id="d1">第一个div</div>
<div id="d2">第二个div</div>
<div id="d3">第三个div</div>
</div>
<script>
function appendDiv(){
var d4= document.createElement("div");
var text = document.createTextNode("第四个div");
d4.appendChild(text);
var parentDiv = document.getElementById("parentDiv");
parentDiv.appendChild(d4);
}
</script>
<button οnclick="appendDiv()">追加第4个div</button>
在前方插入节点
有时候，需要在指定位置插入节点，而不是只是追加在后面。
这个时候就需要用到insertBefore
1. 创建新节点
2. 获取父节点
3. 获取需要加入的子节点
4. 通过insertBefore插入
注: insertBefore的第一个参数是新元素，第二个参数是插入位置
<div id="parentDiv">
<div id="d1">第一个div</div>
<div id="d2">第二个div</div>
<div id="d3">第三个div</div>
</div>
<script>
function insertDiv(){
var d25= document.createElement("div");
var text = document.createTextNode("第二点五个div");
d25.appendChild(text);
var parentDiv = document.getElementById("parentDiv");
var d3 = document.getElementById("d3");
parentDiv.insertBefore(d25,d3);
}
</script>
<button οnclick="insertDiv()">在第二和第三之间，插入第二点五个div</button>
1.11 常用场景
所谓的常用场景指的是工作中会经常用到的javascript结合HTML DOM运用。
删除行为前的提示
在进行删除操作前，都应该提示用户是否要删除
登陆时候，验证账号密码是否为空
<form method="post" action="/study/login.jsp" οnsubmit="return login()">
账号：<input id="name" type="text" name="name"> <br/>
密码：<input id="password" type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>
<script>
function login(){
var name = document.getElementById("name");
if(name.value.length==0){
alert("用户名不能为空");
return false;
}
var password = document.getElementById("password");
if(password.value.length==0){
alert("密码不能为空");
return false;
}
return true;
}
</script>
提交数据，验证长度
<form method="post" action="/study/register.jsp" οnsubmit="return register()">
账号：<input id="name" type="text" name="name">
<br><br>
<input type="submit" value="注册">
<br>
</form>
<script>
function register(){
var name = document.getElementById("name");
if(name.value.length<3){
alert("用户名至少需要3位长度");
return false;
}
return true;
}
</script>
扫一扫
1859
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
