python html标签内容 python修改html标签的值

转载

jordana 2023-06-21 15:21:50

文章标签 python html标签内容 JavaScript Python之路 html ci 文章分类 Python 后端开发

对HTML文件的标签/元素/节点的增删改查

一.对节点增、删、改、查

1.增 (添加新的节点/标签)

用到的方法:

createElement (name)
appendChild( ); 给元素/标签/节点添加子节点

示例HTML：

python html标签内容 python修改html标签的值_html

python html标签内容 python修改html标签的值_JavaScript_02

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>

<div class="div1">
    <button onclick="add()">add</button>
    hello div1
</div>
<div class="div2">
    <button onclick="del()">del</button>
    hello div2
</div>
<div class="div3">
    <button onclick="change()">change</button>
    <p>hello div3</p>
</div>
<div class="div4">hello div4</div>

<script>

    function add() {
        // 添加标签
        var ele=document.createElement("p");   //<p></p>
        ele.innerHTML="hello p";   //<p>hello p</p>
        ele.style.color="red";      //<p style="color:red">hello p</p>
        ele.style.fontSize="10px";  //<p style="color:red; fontSize:10px">hello p</p>
        var father=document.getElementsByClassName("div1")[0];  //找到要添加子标签的父标签对象
        father.appendChild(ele)  //将创建的标签，添加到需要的标签下
    }

</script>

</body>
</html>

View Code

2.删

获得要删除的元素
获得它的父元素
使用removeChild()方法删除

3.改

第一种方式:

使用上面增和删结合完成修改

第二种方式:

使用 setAttribute();方法修改属性
使用 innerHTML 属性修改元素的内容

4.查

使用之前的方法

python html标签内容 python修改html标签的值_html

python html标签内容 python修改html标签的值_JavaScript_02

<script type="text/javascript">
//在第一个div中动态增加一个a标签. 该a标签点击之后跳转到百度首页.
    function addNode(){
        //1.获得 第一个div
        var div = document.getElementById("div_1");
        //2.创建a标签  createElement==>创建一个a标签   <a></a>
        var eleA =  document.createElement("a");
        //3.为a标签添加属性 <a href="http://www.baidu.com"></a>
        eleA.setAttribute("href", "http://www.baidu.com");
        //4.为a标签添加内容 <a href="http://www.baidu.com">百度</a>
        eleA.innerHTML = "百度";    
        //5.将a标签添加到div中
        div.appendChild(eleA);
    }
    //点击后 删除div区域2
    function deleteNode(){
        //1 获得要删除的div区域
            var div = document.getElementById("div_2");
        //2.获得父亲
            var parent = div.parentNode;
        //3 由父亲操刀 
            parent.removeChild(div);
    }
    //点击后 替换div区域3 为一个美女
    function updateNode(){
        //1 获得要替换的div区域3
        var div = document.getElementById("div_3");
        //2创建img标签对象 <img />
        var img = document.createElement("img");
        //3添加属性 <img src="001.jpg" />
        img.setAttribute("src", "001.JPG");
        //4.获得父节点
        var parent = div.parentNode;
        //5.替换
        parent.replaceChild(img, div);
    }
    //点击后 将div区域4 克隆一份 添加到页面底部
    
    function copyNode(){
        //1.获取要克隆的div
        var div = document.getElementById("div_4");
        //2.克隆 参数为true 那么克隆时克隆所有子元素. false 只克隆自己
        var div_copy = div.cloneNode(true);
        //3.获得父亲
        var parent = div.parentNode;
        //4.添加
        parent.appendChild(div_copy);
    }
    
    
</script>

View Code

总结: 以上增、删、改、查的实例HTML如下: (重要)

python html标签内容 python修改html标签的值_html

python html标签内容 python修改html标签的值_JavaScript_02

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>

<div class="div1">
    <button onclick="add()">add</button>
    hello div1
</div>
<div class="div2">
    <button onclick="del()">del</button>
    hello div2
</div>
<div class="div3">
    <button onclick="change()">change</button>
    <h3>hello div3</h3>
</div>
<div class="div4">hello div4</div>

<script>
    var num1=1;

    function add() {
        // 添加标签
        var ele = document.createElement("p");   //<p></p>
        ele.innerHTML = "hello p "+num1;   //<p>hello p</p>
        ele.style.color = "red";      //<p style="color:red">hello p</p>
        ele.style.fontSize = "10px";  //<p style="color:red; fontSize:10px">hello p</p>
        var father = document.getElementsByClassName("div1")[0];  //找到要添加子标签的父标签对象
        father.appendChild(ele);  //将创建的标签，添加到需要的标签下
        num1++;
    }

    function del() {
        //删除标签
        var father = document.getElementsByClassName("div1")[0]; //找到目标标签
        var sons = father.getElementsByTagName("p"); //找到父标签下的字标签数组 (得到的结果是数组，可能存在多个元素)
        var son = sons[sons.length-1]; //提取最后一个元素
        father.removeChild(son) //从父标签下，删除字标签
    }

        function change() {
        //修改标签
        var img=document.createElement("img");   //<img src="">
        //img.setAttribute("src","meinv.jpg");
        img.src="meinv.jpg";

        var ele=document.getElementsByTagName("h3")[0];  //找到需要被替换/修改的标签
        var father=document.getElementsByClassName("div3")[0]; //找到父标签

        father.replaceChild(img,ele) //执行替换
    }

</script>

</body>
</html>

View Code

二、对获取到的html标签，修改样式

1.修改html的标签内容

innerHTML ，innerText 属性。(注意两者的区别。innerHTML不但可以添加文本，还可以添加字标签【写成标签格式的字符串】。而innerText只能添加文本)

2.改变CSS样式

例如，有标签如下

<p id="p2">Hello world!</p>

在js里修改该便签的样式

<script>
    var ele=document.getElementById("p2");
    ele.style.color="blue"; //修改样式
    ele.style.fontSize = "10px";
</script>

等同于直接在html标签里，添加样式

<p id="p2" style="color:red;font-size: 10px">Hello world!</p>

3. 关于html标签的class属性的操作

elementNode.className 获取标签/节点的 class名称值
elementNode.classList.add 对标签/节点的 calss列表，增加一个新的class名称
elementNode.classList.remove 对标签/节点的 calss列表，删除指定的class名称

三、实例练习

1.全选、反选、取消选择

python html标签内容 python修改html标签的值_html

python html标签内容 python修改html标签的值_JavaScript_02

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<button onclick="selectAll()">全选</button>
<button onclick="Cancel()">取消</button>
<button onclick="reverse()">反选</button>
<hr>
<table border="1px" >
    <tr>
        <td><input type="checkbox"></td>
        <td>111</td>
        <td>111</td>
        <td>111</td>
    </tr>
        <tr>
        <td><input type="checkbox"></td>
        <td>222</td>
        <td>222</td>
        <td>222</td>
    </tr>
     <tr>

        <td><input type="checkbox"></td>
        <td>333</td>
        <td>333</td>
        <td>333</td>

    </tr>
</table>

<script>
    function selectAll() {
        //全选
        var inputs=document.getElementsByTagName("input");

        for (var i=0;i<inputs.length;i++){
            var input=inputs[i]
            input.checked=true;
        }

    }

    function Cancel() {
        //取消
         var inputs=document.getElementsByTagName("input");

        for (var i=0;i<inputs.length;i++){
            var input=inputs[i]
            input.checked=false;
        }

    }


    function reverse() {
        //反选
        var inputs=document.getElementsByTagName("input");

        for (var i=0;i<inputs.length;i++){
            var input=inputs[i];
             input.checked=!input.checked;

//            if(input.checked){
//                input.checked=false
//            }else {
//                input.checked=true
//            }
        }
    }
</script>

</body>
</html>

View Code

2.模态对话框 (阴影显示其他区域)

　　思路，通过对具有多个class属性名称的标签，增加、删除一个calss名称

python html标签内容 python修改html标签的值_html

python html标签内容 python修改html标签的值_JavaScript_02

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .content{
            height: 1800px;
            background-color: white;
        }

        .shade{
            position: fixed;
            top:0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: gray;
            opacity: 0.7;
        }

        .model{
            width: 200px;
            height: 200px;
            background-color: bisque;
            position: absolute;
            top:50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -100px;

        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>

<div class="content">
    <button onclick="show()">show</button>
    hellohellohellohellohellohellohellohellohellohellohellohello
</div>

<div class="shade hide"></div>

<div class="model hide">
    <button onclick="cancel()">cancel</button>
</div>


<script>
    function show() {
        var ele_shade=document.getElementsByClassName("shade")[0];
        var ele_model=document.getElementsByClassName("model")[0];

        ele_model.classList.remove("hide");
        ele_shade.classList.remove("hide");

    }
</script>
</body>
</html>

View Code

3.二级联动

python html标签内容 python修改html标签的值_html

python html标签内容 python修改html标签的值_JavaScript_02

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<select id="provinces">
    <option value="">请选择省份</option>
</select>

<select name="" id="citys">
    <option value="">请选择城市</option>
</select>



<script>

    data={"河北省":["石家庄","廊坊"],"山西":["晋城","大同"],"陕西":["西安","延安"]};
    var pro_ele=document.getElementById("provinces");
    var city_ele=document.getElementById("citys")

    for(var i in data){
        var ele=document.createElement("option");
        ele.innerHTML=i;
        pro_ele.appendChild(ele)
    }

    pro_ele.onchange=function () {
        console.log(this.selectedIndex);  //当前select标签的已选择项的索引
        console.log(this.options[this.selectedIndex])

        var citys=data[this.options[this.selectedIndex].innerHTML];

        city_ele.options.length=1;  //只保留一个option,其它的删除

        for(var i=0;i<citys.length;i++){
            var ele=document.createElement("option");
             ele.innerHTML=citys[i];
            city_ele.appendChild(ele)
        }

    }



</script>


</body>
</html>

View Code

4.搜索框

python html标签内容 python修改html标签的值_html

python html标签内容 python修改html标签的值_JavaScript_02

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1,.div2,.div3,.div4{
            width: 300px;
            height: 100px;
        }
        .div1{
            background-color: green;
        }
         .div2{
            background-color: yellow;
        }
         .div3{
            background-color: rebeccapurple;
        }
         .div4{
            background-color: deeppink;
        }
    </style>
</head>
<body>

<input id="ID1" type="text" value="请输入用户名" onblur="Blurs()" onfocus="Focus()">

<script>

function Focus(){
    var input=document.getElementById("ID1");
    if (input.value=="请输入用户名"){
        input.value="";
    }
};

function Blurs(){
    var ele=document.getElementById("ID1");
    var val=ele.value;
    if(!val.trim()){
        ele.value="请输入用户名";
    }
}

</script>
</body>
</html>

View Code

5.select标签里的option 左右移动

python html标签内容 python修改html标签的值_html

python html标签内容 python修改html标签的值_JavaScript_02

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1, .div2, .div3, .div4 {
            width: 300px;
            height: 100px;
        }

        .div1 {
            background-color: green;
        }

        .div2 {
            background-color: yellow;
        }

        .div3 {
            background-color: rebeccapurple;
        }

        .div4 {
            background-color: deeppink;
        }
    </style>
</head>
<body>

<div id="box1">
    <select multiple="multiple" size="10" id="left">
        <option>book</option>
        <option>book2</option>
        <option>book3</option>
        <option>book4</option>
        <option>book5</option>
        <option>book6</option>
    </select>
</div>


<div id="choice">
    <input class="add" type="button" value="--->添加" onclick="add()"><br>
    <input class="remove" type="button" value="<---移除" onclick="remove();"><br>
    <input class="add-all" type="button" value="====>添加所有" onclick="ADDall()"><br>
    <input class="remove-all" type="button" value="<===移除所有" onclick="remall()">
</div>


<div>
    <select multiple="multiple" size="10" id="right">
        <option>book9</option>
    </select>
</div>

<script>

    function add() {
        //添加
        var right = document.getElementById("right");
        var options = document.getElementById("left").getElementsByTagName("option"); //获取所有的select标签下的所有option

        for (var i = 0; i < options.length; i++) {
            var option = options[i];
            //判断option是否被选中
            if (option.selected == true) {
                right.appendChild(option); //将选中的option添加到另一个select标签里 //原select里的option就没有了
                i--; //注意此处
            }
        }
    }
    
    function ADDall() {
        var right = document.getElementById("right");
        var options = document.getElementById("left").getElementsByTagName("option");
        for (var i = 0; i < options.length; i++) {
            var option = options[i];
            right.appendChild(option);
            i--;
        }
    }

    function remall() {
        var right = document.getElementById("right");
        var options = right.getElementsByTagName("option");
        right.options.length=0; //清空select标签下的所有option
    }


</script>
</body>
</html>

View Code

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：R语言怎么处理离群值 r语言距离判别

下一篇：java 生僻字无法正常显示在pdf java输出不了中文

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯