Javaweb第八天学习

实现一个列表后面添加文本

<body>

<ulid="ulid">

</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(属性的名字)

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)在某个节点之前插入一个节点

参数：要插入的节点在谁之前插入

步骤：在熊勇前面添加王美华

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>

//删除熊勇

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">

</ul>

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" />棒球

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>

posted @ 2022-02-12 21:16 向尧阅读(57) 评论(0) 收藏举报

刷新页面返回顶部

向尧

Javaweb第八天学习

公告