JS学习（DOM）9.1

2024-01-24 16:31:34

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>创建元素</title>
<script type="application/javascript" src="DOM6.js"></script>
</head>

<body>
<ul id="city">
    <li>北京</li>
    <li>上海</li>
</ul>
<input type="button" value="创建插入替换节点" onClick="create()">
<input type="button" value="复制节点" onClick="copy()">
<input type="button" value="删除节点" onClick="del()">
</body>
</html>

// JavaScript Document
//创建插入替换节点
var ul;
//页面加载完成后执行
window.onload=function(){
    ul=document.getElementById("city");
}
//创建插入替换节点
/*function create(){
    //创建li元素节点
    var li=document.createElement("li");
    //添加文本节点
    li.innerHTML="济南";
    //将li元素节点添加到ul标签上
    ul.appendChild(li);
}*/
//插入节点
function create(){
    //创建li元素节点
    var li=document.createElement("li");
    //添加文本节点
    li.innerHTML="淄博";
    //获取第一个li子元素
    var oldli=ul.getElementsByTagName("li")[0];
    //插入节点
    /*ul.insertBefore(li,oldli);*/
    //替换节点
    ul.replaceChild(li,oldli);
}
//复制节点
function copy(){
    //获取要复制的节点
    var oldli=ul.getElementsByTagName("li")[0];
    //复制节点
    //var li=oldli.cloneNode(true);//深复制
    var li=oldli.cloneNode(false);//浅复制
    //将新节点添加至ul标签
    ul.appendChild(li);
}
//删除节点
function del(){
    //获取要删除的元素节点
    var li=ul.lastChild.previousSibling;
    //删除节点
    ul.removeChild(li);
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>查找表单控件</title>
<script type="application/javascript" src="DOM7.js"></script>
</head>

<body id="test">
<input type="button" value="创建一个城市列表框" onClick="create()">
<input type="button" value="一条条删除列表框的内容" onClick="del()">
<input type="button" value="一次性清空列表框内容" onClick="clear2()">
</body>
</html>

// JavaScript Document
var body;
//页面加载完成后执行
window.onload=function(){
    body=document.getElementById("test");
}
var sel;
//创建下拉菜单
function create(){
    //创建下拉菜单元素节点
    sel=document.createElement("select");
    //设置下拉菜单的属性节点
    sel.id="mysel";
    sel.name="city";
    sel.size=3;
    //创建option元素节点
    for(var i=1;i<=6;i++){
        var option=new Option("选项"+i,i);
        //将option添加到select标签上
        sel.options[i-1]=option;
    }
    //将select元素节点添加至body元素节点
    body.appendChild(sel);
}
//一条条删除option
function del(){
    //如果select中还有option元素
    if(sel.length>0){
        sel.remove(sel.length-1);
    }else{
        body.removeChild(sel);
    }
    
}
//清空下拉菜单选项
function clear2(){
    sel.length=0;
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>对表格元素进行增删改操作</title>
<script type="application/javascript" src="DOM8.js"></script>
</head>

<body id="test"> 
<input type="button" value="创建一个5行4列的表格" onClick="create()">
<input type="button" value="删除最后一行" onClick="del()">
<input type="button" value="删除最后一个单元格" onClick="deltd()">
</body>
</html>

// JavaScript Document
var body;
window.onload=function(){
    body=document.getElementById("test");
}
var table;
//创建五行四列表格
function create(){
    //创建table元素节点
    table=document.createElement("table");
    //添加属性节点
    table.id="mytable";
    table.border="1px";
    //循环插入五行
    for(var i=0;i<5;i++){
        var tr=table.insertRow(i);
        //给每一行循环插入四列
        for(var j=0;j<4;j++){
            var td=tr.insertCell(j);
            //添加文本节点
            td.innerHTML="第"+(i+1)+"行，第"+(j+1)+"列";
        }
    }
    //将table元素节点添加至body元素
    body.appendChild(table);
}
//一行一行删除
function del(){
    if(table.rows.length>0){
        //删除单元格最后一行
        table.deleteRow(table.rows.length-1);
    }else{
        //删除表格
        body.removeChild(table);
    }
}
//一个td一个td删除
function deltd(){
    if(table.rows.length>0){
        //获取最后一行元素节点
        var tr=table.rows[table.rows.length-1];
        //如果最后一行有元素
        if(tr.cells.length>0){
            //删除最后一行的最后一个td
            tr.deleteCell(tr.cells.length-1);
        }else{
            table.deleteRow(table.rows.length-1);
        }
    }else{
        //删除table元素
        body.removeChild(table);
    }
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>通用性的事件监听方法</title>
<script type="application/javascript" src="DOM9.js"></script>
</head>

<body>
<a href="https://www.baidu.com/" onClick="get()">百度</a>
<a href="https://www.baidu.com/">点击我</a>
<input type="button" value="测试1" id="mytest1" onClick="get2(this)">
<button type="button" id="test2"><b>测试2</b></button>

</body>
</html>

// JavaScript Document
function get(){
    alert("百度");
    return false;
}
//this代表本元素节点对象
//操作元素节点的css样式：元素节点.style.样式名=值；
function get2(node){
    node.value="你好";
    node.style.background="red";
}
//页面加载完成后执行
window.onload=function(){
    //绑定HTML事件监听
    //document.getElementById("test2").onclick=get3;
    document.getElementById("test2").onclick=function(){
        alert(this.type);
    }
}
function get3(){
    alert(this.id);
}

码农公寓

相关文章