本文主要是介绍Java web 学习第八天——js，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
day 08
案例1
实现一个列表后面添加文本
<body>
<ulid="ulid">
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
<br/>
<inputtype="button" value="添加" οnclick="add1();" />
<scripttype="text/javascript">
functionadd1() {
var ul1 =document.getElementById("ulid");//获取ul对象
var li1 =document.createElement("li");//获取li标签
var text1 = document.createTextNode("222");//获取文本对象
li1.appendChild(text1);//把文本添加到标签下面
ul1.appendChild(li1);//把标签加到ul1下面
}
</script>
</body>
2元素对象（Element对象）
要操作element对象。首先要使用document里面的方法获取
方法：获取属性里面的值getAttribute(属性的名字)
<input type="text" id="id"value="aaa">
<script type="text/javascript">
varv=document.getElementById("id");
//alert(v.value);
alert(v.getAttribute("value"));调用了getAttribute()方法
</script>
setAttribute()设置属性的值
v.setAttribute("class","name");
alert(v.getAttribute("class"));
removeAttribute()删除属性，不能删除value
想要获取标签下面的子标签可以使用属性ChileNodes，但是兼容性很差，唯一有效的方法是getElementByTagName()
Node对象属性一
nodeName
nodeType
nodeValue
使用dom解析HTML的时候，需要HTML里面的标签属性和文本都封装从对象
标签节点对应的值：
nodeType:1
nodeName:大写的标签名称
nodeValue:null
属性节点对应的值
nodeType:2
nodeName:属性的名称
nodeValue:属性的值
文本节点对应的值
nodeType:3
nodeName:#text
nodeValue:文本内容
Node对象的属性二
<ul id=”1”> <li id=”2”>qqq</li><liid=”3”>www</li></ul>
父节点：ul是li的父节点，属性parentNode
var li1=document.getElementById(“2”); li1.parentNode可以得到ul节点对象
子节点：li是ul的子节点
Var ul1=document.getElementById(“1”); ul1.childNodes得到左右子节点，兼容性差
Ul1.firstChild得到第一个子节点对象
Ul2.lastChild得到最后一个子节点对象
同辈节点：nextSibling得到这个节点的同辈节点中的下一个节点对象
previouSibling得到这个节点的同辈节点的上一个节点对象
操作Dom数
appendChild方法：添加子节点倒尾部。类似与剪切粘贴的效果
insertBefore(newNode,OldDode)在某个节点之前插入一个节点
参数：要插入的节点 在谁之前插入
步骤：在熊勇前面添加王美华
<input type="button"id="id" value="添加" οnclick="add()">
<script type="text/javascript">
function add() {
//1获取“3”标签
var li3 =document.getElementById("3");
//创建li标签
var li6 =document.createElement("li");
//创建文本
var text6 =document.createTextNode("王美华");
//把文本添加的到标签下
li6.appendChild(text6);
//创建ul标签
var ul1 =document.getElementById("1");
//添加
ul1.insertBefore(li6, li3);
}
</script>
removeChild删除节点
只能通过父节点删除：删除熊勇
<ul id="1">
<li id="2">史文华</li>
<li id="3">熊勇</li>
<li id="4">张翼</li>
</ul>
<input type="button" id="remove" value=删除" οnclick="remove()">
<script type="text/javascript">
//删除熊勇
function remove() {
//获取3号标签
var li3 = document.getElementById("3");
//获取ul标签
var ul1 = document.getElementById("1");
//删除
ul1.removeChild(li3);
}
</script>
replaceChild()替换节点
参数：第一个新节点，第二个旧节点
1、获取旧节点
2、创建新节点标签
3、创建文本
4、将文本添加到标签下
5、获取父标签
6、执行ul.replaceChild(new,old);
cloneNode复制节点
将ul标签复制到div中
<ulid="1">
<li id="2">史文华</li>
<li id="3">熊勇</li>
<li id="4">张翼</li>
</ul>
<div id="divv"></div>
<input type="button" id="cope" value="复制"οnclick="cope()">
<script type="text/javascript">
function cope() {
//1获取ul
var ul31 = document.getElementById("1");
//执行复制方法cloneNode(true)ture复制子节点
var ul666 = ul31.cloneNode(true);
//获取div
var divv = document.getElementById("divv");
//appendChild
divv.appendChild(ul666);
}
</script>
总结：
获取节点使用：getElementById(),getElementsByName(),getElementsByTagName()
插入节点：insertBefore(要插入的节点，目标节点),appendChild()结尾添加
删除节点：removeChild()通过父节点删除
替换节点：replaceChild():通过父节点
innerHTML属性
不是dom的组成部分，但是大多数浏览器都支持的属性
第一个作用：获取文本内容
Var span = document.getElementById(“sid”);alert(span1.innerHTML);
第二个作用：设置文本内容（也可以是HTML代码）
Var divv11= document.getElementById(“divv11”);divv11.innerHTML=”<h1>qq</h1>”
案例2 动态显示时间
</div>
<scripttype="text/javascript">
function getD1(){
var date = new Date();//获取当前时间
var d1 = date.toLocaleString();//格式化时间
var divv =document.getElementById("time");//获取Div
divv.innerHTML=d1;//设置divv的时间
}
//使用定时器
setInterval("getD1();",1000);
</script>
案例三：全选练习
<body>
<input type="checkbox"id="ch1" οnclick="selAllNo()" />全选/全不选
<input type="checkbox"name="love" />篮球
<input type="checkbox"name="love" />足球
<input type="checkbox"name="love" />羽毛球
<input type="checkbox"name="love" />棒球
<input type="button" value="全选" οnclick="selAll();" />
<input type="button" value="全不选" οnclick="selNo();" />
<input type="button" value="反选" οnclick="selOther();" />
<script type="text/javascript">
function selAll() {//全选
var loves =document.getElementsByName("love");//得到数组
for (var i =0; i < loves.length; i++) {
var lovess =loves[i];
lovess.checked = true;}}
function selNo() {//全不选
var loves =document.getElementsByName("love");
for (var i =0; i < loves.length; i++) {
var loves1 =loves[i];
loves1.checked = false;}}
function selOther() {//反选
var loves =document.getElementsByName("love");
for (var i =0; i < loves.length; i++) {
var loves3 =loves[i];
if(loves3.checked == true) {
loves3.checked= false;
} else {
loves3.checked= true;}}}
function selAllNo() {
var check1 =document.getElementById("ch1");
if (check1.checked== true) {selAll();} else {selNo();}}</script></body>
这篇关于Java web 学习第八天——js的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
