js节点操作简单记事本

最新推荐文章于 2024-03-17 21:53:33 发布

乐多

最新推荐文章于 2024-03-17 21:53:33 发布

阅读量397

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/weixin_44769592/article/details/96722393

版权

前端学习专栏收录该内容

60 篇文章 1 订阅

订阅专栏

节点操作

1.节点查找

document.getElementById，document.getElementByTagName，document.getElementByName ，document.getElementByClassName
document.querySelector() 参数为选择器
document.forms 选取页面中的所有表单元素

2.增加节点

增加节点前必须先使用document.createElement()创建元素节点，参数为标签名
m.appendChild(n) 为m元素在末尾添加n节点
m.insertBefore(k,n) 在m元素的k节点前添加n节点
createTextNode（节点文本内容）创建一个文本节点
insertBefore（a,b）是参照节点，意思是a节点会插入b节点的前面。

3.删除节点

m.removeChild(n)删除m元素中的n节点
m.replaceChild(k,n)用n节点取代m元素中的k节点

4.复制节点

m.cloneChild() 复制m节点，并将复制出来的节点作为返回值
参数为true时，则将m元素的后代元素也一并复制。否则，仅复制m元素本身

5.替换节点

replaceChild(插入的节点，被替换的节点) ，用于替换节点，接受两个参数，第一参数是要插入的节点，第二个是要被替换的节点。返回的是被替换的节点。

6.查找节点

childNodes 包含文本节点和元素节点的子节点。
A、children也可以获取子节点，而且兼容各种浏览器。包括IE6-8
B、parentNode：获取父节点
A、firstChild ; firstElementChild查找第一个子节点。此存在浏览器兼容问题：
firstChild是IE兼容，firstElementChild是非IE兼容。

节点属性操作

1.节点属性选取

m.属性名：驼峰形式 m.className
m[“属性名”] ：加引号，驼峰形式 m.[‘className’]
m.getAttribute(“属性名”) ： m.getAttribute(“class”)

2.节点属性修改

前两种选取方法时，直接赋值即可
m.setAttribute(“属性名”，“值”)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <title>最辣鸡的记事本</title>
    <script>
        window.onload=function(){
            var btt=document.getElementById("bt");
            var btt2=document.getElementById("bt2");
            var main=document.getElementById("main");
            btt.onclick=function()
            {
                //增
                var newItem=document.createElement("div");
                var textnode=document.createTextNode("Water");
                newItem.appendChild(textnode);
                newItem.setAttribute("class","name");
                //newItem.setAttribute(.name);
                main.appendChild(newItem);
            }
            btt2.onclick=function(){
                //删除节点 找到父亲节点 找到子节点
                //div bushi yige node
                //var divl=document.getElementsByTagName("div");
                var divl=document.getElementById("name");
                main.removeChild(divl);
            }
        }
    </script>
    <style>
        .name{
            width:100px;
            height:100px;
            border: 1px solid black;
        }  
        button{
            width:10px;
            height: 10px;
            color:black;
            z-index: 999;
            position: relative;
            top: 10px;
        } 
    </style>
</head>
<body>
    <div id="main">
        <div class="name" id="name">
            <button id="bt">
            <button id="bt2">
        </div>
    </div>
    

</body>
</html>

乐多

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js节点操作简单记事本

节点操作1.节点查找document.getElementById，document.getElementByTagName，document.getElementByName ，document.getElementByClassNamedocument.querySelector() 参数为选择器document.forms 选取页面中的所有表单元素2.增加节点增加节点前必须先使用...
复制链接

扫一扫