DOM操作

什么是DOM(超详细解释,建议收藏!!!) 元素节点表示 HTML 元素,属性节点表示属性,文档类型节点表示文档类型,注释节点表示注释。所有的节点和最终的树状结构,都有规范的对外接口。其中,子节点接口包括firstChild(第一个子节点)和lastChild(最后一个子节点)等属性,同级节点接口包括nextSibling(紧邻在后的那个同级节点)和previousSibling(紧邻在前的那个同级节点)属性。文档里面最高的HTML标签,一般是,它构成树结构的根节点(root node),其他HTML标签节点都是它的下级。 阅读详情

DOM操作

DOM(DOcument Object Model,文档对象模型)描绘了一个层次化的节点树,允许开发人员添加、移除和修改页面的某一部分,这使得Javascript操作HTML,不是在操作字符串,而是在操作节点,极大的降低了编程难度。

一、DOM树

1.1、DOM树

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Mhdl7dO0-1635344857988)(C:\Users\web\AppData\Roaming\Typora\typora-user-images\image-20210828154059101.png)]

1.2、DOM常用节点

元素节点1

属性节点2

文本节点3

注释节点8

document 文档节点9

DocumentFragment 文档判断节点 11

1.3、DOM节点属性

在文档对象模型(DOM)中,每一个节点都是一个对象

nodeName:元素节点的标签名,以大写字母的形式表示,只读不能修改

nodeValue:文本节点和注释节点的内容,可读可写

nodeType:节点的类型(最有用的),帮助我们区分节点,只读

attributes:元素节点的属性集合(只能修改属性值),name属性名,value属性值

二、获取DOM元素

2.1、查询DOM节点

document 获取document文档(这是一个对象)

document.head 获取head标签

document.body 获取body标签

document.documentElement 获取HTML标签

2.2、get系列

动态获取,每次使用会重新获取

document.getElementById() 通过id获取元素

element.getElementsByTagName() 通过标签名获取元素

document.getElementsByName 通过name属性获取(注意:只有部分标签可以用,通过name属性获取元素(表单、表单元素、img、iframe))

element.getElementsByClassName() 通过class类名获取

<body>
    <div id="one">你好。世界</div>
    <p>我好想在哪见过你</p>
    <div class="two">童话</div>
    <span>原宿酒店</span>
    <div>你好</div>
    姓名:<input type="text" name="user">
    <script>
      	//1. 通过id获取元素
        var odiv=document.getElementById('one');
        console.log(odiv); 

				//2. 通过标签名 TagName 获取元素  类数组(集合)数组可以有下标,开始是0,最后一项是length-1
        var ap=document.getElementsByTagName('p');
        console.log(ap);
				//这两个方法  所有浏览器全线兼容

				//3. 通过name获取   注意 name不能跟id重名
        var aIn=document.getElementsByName('user');
        console.log(aIn);

				//4. 通过class名获取
        var ad=document.getElementsByClassName('two');
        console.log(ad);
    </script>
</body>

2.3、query系列

静态获取,query系列的好用之处 是参数为css 选择器

element.querySelector() 选到指定选择器下的第一个元素

element.querySelectorAll() 选到指定选择器的所有元素

<body>
    <div id="one">你好。世界</div>
    <p>我好想在哪见过你</p>
    <div class="two">童话</div>
    <div class="two">童话</div>
    <span>原宿酒店</span>
    <div>你好</div>
    姓名:<input type="text" name="user">
    <script>
        //querySelector 获取的是单个元素
        var od=document.querySelector('div#one')
        console.log(od);

        //querySelectorAll  获取的是一个集合
        var ad=document.querySelectorAll('div.two');
        console.log(ad);
    </script>
</body>

2.4、连续打点调用get

先获取一个HTML标签,然后选择这个HTML标签中的所有p标签

<body>
    <div id="three">
        <p></p>
        <p></p>
    </div>
    <script>
        var ap=document.getElementById('three').getElementsByTagName('p');
        console.log(ap);
    </script>
</body>

如果是数组,一定要加上下标,才能变成对象

var ap=document.getElementsByTagName('p')[0];
        console.log(ap);

三、节点的操作

3.1、基于节点树的操作(兼容所有浏览器)

parentNode 父节点(最顶端的parentNode为#document)

childNodes 子节点们

firstChild 第一个子节点

lastChild 最后一个子节点

nextSibling 下一个兄弟节点

previousSibling 上一个兄弟节点

<body>
    <div>你好</div>
    <div id="box" >
        <p>1.你吃饭了没</p>
        <p>2.你吃饭了没</p>
        <p>3.你吃饭了没</p>
        <p>4.你吃饭了没</p>
        <div class="one">没</div>
        <span >你饿了吗</span>
        <span class="one">你饿了吗</span>
    </div>
    <input type="text" name="user">

    <div id="dian">点我</div>
    <script>
        //1.body,body的父节点是html,html的父节点是documen,documen的父节点是null
        var parentNode=box.parentNode;
        console.log(parentNode.parentNode.parentNode.parentNode);  
        
        //2.childNodes :子节点们
        var childNodes=box.childNodes;
        console.log(childNodes);  //NodeList(15) [text, p, text, p, text, p, text, p, text, div.one, text, span, text, span.one, text]


        //3.firstChild:第一个子节点
        var firstChild=box.firstChild;
        console.log(firstChild);  //#text


        //4.lastChild:最后一个子节点
        var lastChild=box.lastChild;
        console.log(lastChild);  //#text


        //5.nextSibling:下一个兄弟节点
        //6.previousSibling :上一个兄弟节点
        var aP=document.getElementsByTagName('p')[1];
        console.log(aP);
        var nextSibling=aP.nextSibling;
        console.log(nextSibling);
        var previousSibling =aP.previousSibling ;
        console.log(previousSibling );
    </script>
</body>

3.2、基于元素节点树的操作(除了children,其他都不兼容IE9及以下)

parentElment 父元素节点

children 子元素节点们

firstElementChild 第一个子元素节点

lastElementChild 最后一个子元素节点

nextElementSibling 下一个兄弟元素节点

previousElementSibling 上一个兄弟元素节点

<body>
    <div>你好</div>
    <div id="box" >
        <p>1.你吃饭了没</p>
        <p>2.你吃饭了没</p>
        <p>3.你吃饭了没</p>
        <p>4.你吃饭了没</p>
        <div class="one">没</div>
        <span >你饿了吗</span>
        <span class="one">你饿了吗</span>
    </div>
    <input type="text" name="user">

    <div id="dian">点我</div>
    <script>
        //1.parentElement:父元素节点
        var parentElement=box.parentElement;
        console.log(parentElement);


        //2.children:子元素节点们
        var children=box.children;
        console.log(children);  //HTMLCollection(7) [p, p, p, p, div.one, span, span.one]


        //3.firstElementChild:第一个子元素节点
        var firstElementChild=box.firstElementChild;
        console.log(firstElementChild);  // <p>1.你吃饭了没</p>


        //4.lastElementChild:最后一个子元素节点
        var lastElementChild=box.lastElementChild;
        console.log(lastElementChild);  //<span class="one">你饿了吗</span>


        //5.nextElementSibling:下一个兄弟元素节点
        var nextElementSibling=box.nextElementSibling;
        console.log(nextElementSibling);  //<input type="text" name="user">


        //6.previousElementChild: 上一个兄弟元素节点
        var previousElementSibling=box.previousElementSibling;
        console.log(previousElementSibling);  //<div>你好</div>
    </script>
</body>

3.3、增、创建DOM节点

document.createElement() 创建元素节点

document.createTextNode() 创建文本节点

document.createComment() 创建注释节点

document.createDocumentFragment 创建文档判断节点

  var createElement=document.createElement('p');
        console.log('createElement',createElement);

        var createTextNode=document.createTextNode('this is text');
        console.log('createTextNode',createTextNode);

        var createComment=document.createComment('this is 注释');
        console.log('createComment',createComment);
        
        var createDocumentFragment=document.createDocumentFragment;
        console.log('createDocumentFragment',createDocumentFragment);

<script>
        var body=document.body;
        var input=document.createElement('input');
        input.type='button';
        input.value='创建一个按钮';
        body.appendChild(input);
    </script>
    <script>
        var body=document.body;
        var input=document.createElement('input');
        // input.type='button';
        // input.value='创建一个按钮';
        input.setAttribute('type','submit');
        input.setAttribute('name','submit');
        input.setAttribute('value','提交');
        input.setAttribute('onclick','javascript:alert("this is a text");');
        body.appendChild(input);
    </script>

3.4、插、添加(剪切操作)

parentNode.appendChild(A) 在parentNode的最后面添加节点A

parentNode.insertBefore(A,B) 把节点A添加在节点B的前面

 <div id="text">
        <p id="x1">HTML</p>
        <p>JAVASCRIPT</p>
    </div>
    <script>
        //在指定节点的最后一个节点列表之后添加一个新的节点
        //appendChild(newnode)    
        //newnode:指定追加的节点
        var otext=document.getElementById('text');
        var newnode=document.createElement('p');  //创建元素节点p
        newnode.innerHTML="this is a new p";
        console.log(newnode);  
        otext.appendChild(newnode);
    </script>
   <div id="text">
        <p id="p1">HTML</p>
        <p>JAVASCRIPT</p>
    </div>
    <script>
        //insertBefore() 方法可在已有的子节点前插入一个新的节点
        //insertBefore(newnode,node)
        //newnode:指要插入的新节点   node:指定此节点前插入节点
        //在指定节点前插入节点
        var otext=document.getElementById('text');
        var node=document.getElementById('p1');
        var newnode=document.createElement('p');
        newnode.innerHTML="this is a new part";
        otext.insertBefore(newnode,node);  //在p1标签之前插入新的节点    node也可以换成otext.childNodes[0],子节点的第一个
    </script>

3.5、删:删除节点

parentNode.removeChild(A) 删除节点A,父节点删除子节点,这个方法返回被删除的节点,以备后悔再使用

child.remove() 删除节点树上的节点,节点之间删除字节,节点自己删除当前节点是没有返回值的

 <div id="div1">
        <h1>HTML</h1>
        <h2>MYSQL</h2>
    </div>
    <script>
        //removeChild()方法从子节点列表中删除某个节点,如删除成功,此方法可返回被删除的节点,如不成功,则返回NULL
   			//把删除的子节点赋值给removeChild,这个子节点不在DOM树中,但是还在内存中,如果要完全删除对象,给removeChild赋null值
        //nodeObject.removeChild(node)
        //node:必需,指定需要删除的节点
        // var oh=div1.getElementsByTagName('h1')[0];  //获取h1的元素
        // var oh=div1.children[0];  //获取h1的元素
        var oh=div1.childNodes[1];   //获取h1的元素
        var removeChild=div1.removeChild(oh);
        document.write(`删除的内容为:${removeChild.innerHTML}`);
    </script>
 <div id="div1">
        <h1>HTML</h1>
        <h2>MYSQL</h2>
    </div>
    <script>
        //removeChild()方法从子节点列表中删除某个节点,如删除成功,此方法可返回被删除的节点,如不成功,则返回NULL
        //nodeObject.removeChild(node)
        //node:必需,指定需要删除的节点
        // var oh=div1.getElementsByTagName('h1')[0];  //获取h1的元素
        // var oh=div1.children[0];  //获取h1的元素
        var oh=div1.childNodes[1];   //获取h1的元素
        oh.remove();
        document.write(`删除的内容为:${oh.innerHTML}`);
    </script>

3.6、替换(剪切操作)

parentNode.replaceChild(A,B) 用节点A代替节点B

<h1 id="oldnode">JAVA</h1>
    <a href="javascript:newnode()">Java替换JavaScript</a>
    <script>
        //replaceChild实现子节点(对象)的替换,返回被替换对象的引用
        //node.replaceChild(newnode,oldnode)
        //newnode:必需,用于替换oldnode的对象     oldnode:必需,被newnode替换的对象
        function newnode(){
            var newnode=document.createElement('h1');  //点击会生成h1标签
            // console.log(newnode);
            var newnodeText=document.createTextNode('javascript');  //点击会生成javascript文字
            // console.log(newnodeText);
            newnode.appendChild(newnodeText);  //将文本内容插入到h1标签
            console.log(newnode);
            var oldnode=document.getElementById('oldnode');
            console.log(oldnode);
            oldnode.parentNode.replaceChild(newnode,oldnode);  //用newnode代替oldnode  javascript代替java
        }
    </script>

3.7、判断一个元素节点有没有子节点方法

element.hasChildNodes() 如果有则返回true,没有则返回false

 var oEle=document.createElement('h1');
        console.log('createElement',oEle);
        var oText=document.createTextNode('你是否吃饭了');
        console.log('createTextNode',oText);
        // var ap=box.appendChild(oEle);
        // console.log('appendChild',ap);
        box.appendChild(oEle);
        box.appendChild(oText);
        box.insertBefore(oEle,oText)
        box.removeChild(oEle);

        var op2=document.getElementsByTagName('p')[1];
        var op1=document.getElementsByTagName('p')[0];
        console.log(op1);
        var res=box.removeChild(op);
        console.log(res);
        console.log(op);
        var res=op.remove();
        console.log(res);
        console.log(op);
        box.replaceChild(op1,op2);
        var res=box.hasChildNodes('p');
        console.log(res);

四、节点的一些属性和方法

4.1、元素节点常用的属性

1.innerHTML获取元素节点的内容,可读可写,如果内容中有符合HTML格式的,会被解析成标签

2.innerText获取元素节点的内容,可读可写,如果内容有符合html格式的,不会被解析成标签

innerText在赋值的时候要注意,会将标签覆盖掉

4.2、元素节点常用的方法

设置或获取标签属性

element.setAttribute(‘class’,‘on’) 设置元素节点的class属性

element.getAttribute(‘class’) 获取元素节点的class属性

element.removeAttribute(‘class’) 删除元素节点的class属性

五、更改HTML的属性

js可以更改HTML的任何属性,方法是两种:1.点语法。2.setAttribut()、getAttribute()

5.1、getAttribute(),setAttribute()

getAttribute(); 获取属性

setAttribute(); 设置属性

 <h1 id="alink" title="今天你吃饭了么" onclick="dianji()">点击我,获取标签的属性值</h1>
    <script>
        //通过元素节点的属性名称获取属性的值
        //elementNode.getAttribute(name)
        //elementNode:使用getElementById()、getElementsByTagName()等方法获取到的元素节点
        //name:要想查询的元素节点的属性名字(例如:id)
        function dianji(){
            var anode=document.getElementById('alink');
            var attr=alink.getAttribute("id");
            var attr2=alink.getAttribute("title");
            document.write(`h1标签的Id为:${attr}<br/>`);
            document.write(`h1标签的title为:${attr2}`);
        }
    </script>
 <h1 id="alink" title="今天你吃饭了么" onclick="dianji()">点击我,获取标签的属性值</h1>
    <script>
        //setAttribute()方法增加一个指定名称和值的新属性,或者把一个属性设定为指定的值
        //elementNode.setAttribute(name,value)
        //1.name:要设置的属性名    2.value:要设置的属性值
        //把指定的属性设置为指定的值,如果不存在具有指定名称的属性,该方法会创建一个新的属性
        function dianji(){
            var alink=document.getElementById("alink");
            alink.setAttribute('name','h1');
            alink.setAttribute('title','今天我没吃饭');
            console.log(alink);
        }
    </script>

5.2、点语法

得到一个元素之后,直接打点调用它的属性名,就能对HTML相应的属性进行更改,可以获取,也可以设置(class这个属性,要换成className,因为class是JS的保留字,如果想要换一个HTML元素的class属性,那么就要打点调用.className属性)

5.3、区别:

第一:所有自定义的属性,都不能通过点语法获取和设置

第二:所有的行内样式,点语法.style得到的是一个样式对象,我们可以通过.style.border继续得到小样式,但是getAttribute()得到的是字符串

六、H5新增元素节点的classList属性

classLast属性是一个类数组。其身上有几个常用的方法

1.add(value)将给定的参数字符串添加到元素的class属性中,如果存在就不添加了

2.remove(value)将给定的参数字符串从class属性中删除

3.contains(value)返回布尔值,表示class属性中是否包含参数字符串

4.toggle(value)检测class属性中是否有参数字符串,有则删除,返回false,没有则添加,返回true

七、H5新增了自定义属性,但是需要data-开头

八、脚本CSS

8.1、获取计算样式表、行内样式表

计算样式表一般用来获取的,行内样式表一般用来设置的

获取计算样式表:

1、只读,不可写

2、获取的值是计算后的绝对值。不是相对值

3、window.getComputedStyle(ele,null).attr 主流浏览器以及IE8以上

第一个参数为获取元素节点上的计算属性

第二个参数获取伪元素

4、ele.currentStyle IE8及其以下

例子:

getComputedStyle(ob).bagckgroundColor;

getComputedStyle(ob)[backgroundColor]

ob.currentStyle.backgroundColor

ob.currentStyle[backgroundColor]

行内样式表:元素节点.style获取的是行内样式表

1.一般用内联样式(行内样式)表来设置某些css属性

2、可读可写,可以通过行内样式间接控制css属性

3、含有连词符的css属性,需要使用小驼峰写法

4、float是js里面的保留字一般使用cssFloat

5、设置的值要求为字符串形式

//行内样式表的使用
<div id="box" style="width: 100px; height: 100px;"></div>
    <script>
        var ob=document.getElementById('box'); 
        // console.log('width为:'+ob.style.width);
        // console.log(`height为:${ob.style["height"]}`);
        ob.style.width='300px';   //通过对象来赋值设置css的属性
        ob.style.backgroundColor='blue';   //在css中有连接符的属性在js中使用对应的驼峰来转换
        ob.style.cssFloat='right';   //float是保留字,因此需要加css
        ob.className='da';   //如果想要换一个HTML元素的class属性,那么就要打点调用.className属性。
    </script>
//getComputedStyle和currentStyle的使用 
<style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 200px !important;  //用!important在嵌入式把css的权限提到最大
            height: 100px;
            background-color:pink;
        }
    </style>
//计算样式表内元素的权重越大就会计算出元素的指定样式
<div id="box" style="width: 100px;"></div>
    <script>
        var ob=document.getElementById('box');
        console.log(getComputedStyle(box).width);  //主浏览器以及IE8以上
        console.log(ob.currentStyle.width);   //IE8及其以下
    </script>
//getComputedStyle的第二个参数使用
<style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 200px !important;
            height: 100px;
            background-color:pink;
        }
        #box::after{
            content: "";
            display: block;
            width: 300px;
            height: 200px;
            background-color: lightblue;
        }
    </style>
      <div id="box" style="width: 100px;"></div>
    <script>
        var ob=document.getElementById('box');
        console.log(getComputedStyle(box,"after").width);  //主浏览器以及IE8以上
        console.log(ob.currentStyle.width);   //IE8及其以下
    </script>
//封装一个函数,让计算样式表的代码在谷歌和IE浏览器下都可以使用
<style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 200px !important;
            height: 100px;
            background-color:pink;
        }
        #box::after{
            content: "";
            display: block;
            width: 300px;
            height: 200px;
            background-color: lightblue;
        }
    </style>
     <div id="box" style="width: 100px;"></div>
    <script>
        var ob=document.getElementById('box');
        function getStyle(dom,attr){
            if(dom.currentStyle){
                return dom.currentStyle[attr];
            }else{
                return getComputedStyle(dom,null)[attr];
            }
        }
        console.log(getStyle(ob,'width'));

        var ob=document.getElementById('box');
        function getStyle(ele,attr){
            if(window.getComputedStyle){
                return getComputedStyle(ele)[attr];
            }else{
                return ele.currentStyle[attr];
            }
        }
        console.log(getStyle(ob,'width'));
    </script>

8.2、设置元素样式

如果设置样式通过行内style来设置元素样式,那么我们可以通过获取计算样式值,然后修改

8.3、快捷位置和尺寸

DOM的API,获取元素的显示尺寸(数字类型的值)

ele.offsetWidth width+左右padding+左右border

ele.offsetHeight height+上下padding+上下border

ele.offsetLeft 水平距离(常用)

ele.offsetTop 竖直距离(常用)

ele.clientWidth width+左右padding(常用)

ele.clientHeight height+上下padding(常用)

dom.clientLeft 上边框的width

dom.clientTop 左边框的width

8.3.1、offsetWidth和offsetHeight
   <div id="box"></div>
        <script>
            var ob=document.getElementById('box');
            console.log(ob.offsetHeight);  //width:100+上下padding:20+20+上下border:10==160
            console.log(ob.offsetWidth);   //width:200+左右padding:30+30+左右border:10==280
        </script>
8.3.2、offsetLeft属性和offsetTop

一个元素的offsetLeft值,就是这个元素左边框外,到自己的offsetParent对象的左边框内的距离每一个元素,天生都有一个属性,叫做offsetParent

offsetParent就是自己祖先元素中,距离自己最近的已经定位的元素,如果自己的祖先元素中,没有任何盒子进行了定位,那么offsetParent对象就是body

IE6、IE7:

情形1:如果自己没有定位属性,那么自己的offsetParent对象就是自己的祖先元素中离自己最近的有width或者有height的元素

情形2:自己如果有定位属性,那么自己的offsetParent就是自己的祖先元素中离自己最近的有定位的元素,数值就是自己的左外边框到offsetParent对象的左内边距的值

IE8:

无论自己是否定位,自己的offsetParent就是自己祖先元素中,离自己最近的已经定位的元素

<style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            position: absolute;
            left: 10px;
            top: 10px;
            width: 300px;
            height: 300px;
            margin-left: 20px;
            margin-top: 40px;
            background-color:pink;
        }
    </style>   
<div id="box">
             <div id="middle"></div>
         </div>
         <script>
             var ob=document.getElementById('box');
             //dom.offsetLeft:获取dom到定位父级的水平距离
             console.log(ob.offsetLeft);  //30  position:absolute;left:10+margin-left:20==30
             //dom.offsetTop:获取dom到定位父级的竖直距离
             console.log(ob.offsetTop);  //50  position:absolute;top:10+margun-top:40==50
         </script>
  <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            position: absolute;
            left: 10px;
            top: 10px;
            width: 300px;
            height: 300px;
            background-color:pink;
        }
        #middle{
            position: absolute;
            left: 20px;
            top: 5px;
            width:200px;
            height: 200px;
            margin-left: 20px;
            background-color: green;
        }
    </style>
<div id="box">
            <div id="middle"></div>
        </div>
        <script>
            var ob=document.getElementById('box');
            //父元素是浏览器窗口
            console.log(ob.offsetLeft);
            console.log(ob.offsetTop);
            //水平距离是40=(position:absolute;left:20+margin-left:20=40)是按照子元素到父元素的水平位置来计算的
            var om=document.getElementById('middle');
            console.log(om.offsetLeft);
            //竖直距离是5=(position:absolute;top:5==5)
            console.log(om.offsetTop);
        </script>
8.3.3、clientWidth和clientHeight

clientWidth就是自己的width+padding的值,也就是说,比offWidth少了border,如果盒子没有高度,用文字撑的,IE6的clientHeight是0,其他浏览器都是数值

   <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 200px !important;
            height: 100px;
            padding: 20px 30px;
            background-color:pink;
        }
    </style>
<div id="box"></div>
    <script>
        var ob=document.getElementById('box');
        console.log(getComputedStyle(ob).width); //200px 
        //但是这个元素在页面真实显示的是260px,用clientWidth获取真实的宽度,clientHeight获取真实的高度
        console.log(ob.clientWidth+'px');  //width:200+左右padding:30+30==260
        console.log(ob.clientHeight+'px'); //width:100+上下padding:20+20==140
    </script>
8.3.4、clientLeft和clientTop
 <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            position: absolute;
            left: 10px;
            top: 10px;
            width: 300px;
            height: 300px;
            background-color:pink;
        }
        #middle{
            position: absolute;
            left: 30px;
            top: 30px;
            width:200px;
            height: 200px;
            border-top: 10px solid red;
            border-left: 15px solid red;
            background-color: green;
        }
    </style>
      <div id="box">
            <div id="middle"></div>
        </div>
        <script>
            var om=document.getElementById('middle');
            console.log(om.clientLeft);  //15  左边框的15
            console.log(om.clientTop);  //10   上边框的10
        </script>

8.4、获取元素的有定位属性的父级

ele.offsetParent 如果没有定位父节点,则返回body

  <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            position: absolute;
            left: 10px;
            top: 10px;
            width: 300px;
            height: 300px;
            margin-left: 20px;
            margin-top: 40px;
            background-color:pink;
        }
    </style>
     <div id="box">
             <div id="middle"></div>
         </div>
         <script>
             var ob=document.getElementById('box');
             console.log(ob.offsetParent);
         </script>

九、获取元素的滚动值

9.1、获取滚动元素的宽高

当元素实际内容超过设置的内容时

dom.scrollWidth ====> 元素实际内容的width

dom.scrollHeight ====> 元素实际内容的height

当内容没有容器高、宽度的时候,scrollWidth和scrollHeight获取的是容器的高度和宽度

<style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 200px;
            height: 100px;
            background-color:pink;
        }
    </style>
<div id="box">
            yellowyellowyellowyellowyellowyellow
            yellowyellowyellowyellowyellowyellow
            yellowyellowyellowyellowyellowyellow
            yellowyellowyellowyellowyellowyellow
            yellowyellowyellowyellowyellowyellow
            yellowyellowyellowyellowyellowyellow
            yellowyellowyellowyellowyellowyellow
         </div>
         <script>
             var ob=document.getElementById('box');
             console.log(ob.scrollWidth);
             console.log(ob.scrollHeight);
         </script>

9.2、获取元素的滚动距离(数字类型的值)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AvHvBRpe-1635344857997)(C:\Users\web\AppData\Roaming\Typora\typora-user-images\image-20210902082000446.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kqWI80x4-1635344857999)(C:\Users\web\AppData\Roaming\Typora\typora-user-images\image-20210902082933145.png)]

dom.scrollLeft 滚动的水平距离

dom.scrollTop 滚动的竖直距离

9.3、滚动距离的兼容写法

1、获取滚动条的滚动距离IE8以上

window.pageXOffset 页面滚动的水平距离

window.pageYOffset 页面滚动的竖直距离

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EBWYw7oE-1635344858000)(C:\Users\web\AppData\Roaming\Typora\typora-user-images\image-20210902173255437.png)]

    <style>
        #box{
            width: 300px;
            height: 300px;
            border: 3px solid pink;
            margin: 10px auto;
            /* overflow-y: scroll; */
        }
    </style>
</head>
<body>
    <div id="box">
        <div>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
          </div>
    </div>
    <script>
        // var val=0;
        // setInterval(function(){
        //     val+=10;
        //     box.scrollTop=val;
        // },1000)
        
    </script>

2、获取滚动条的滚动距离IE8以下

document.documentElement.scrollLeft IE7,8

document.documentElement.scrollTop IE7,8

document.body.scrollLeft

document.body.scrollTop

十、获取浏览器窗口的尺寸

IE8以上

window.innerWidth 窗口的宽度(包含滚动条)

window.innerHeight 窗口的高度(包含滚动条)

IE8及其以下

document.documentElement.clientWidth 标准模式下

document.documentElement.clientHeight

(在Chrome,Firefox。IE7,8不包含滚动条,在IE8以上包含滚动条)

document.body.clientWidth 怪异模式下

document.body.clientWidth

十一、设置滚动条的滚动距离

浏览器页面滚动

window.scrollTo(x,y) 让滚动条滚动指定的位置

window.scrollBy(x,y) 让滚动条滚动到指定的距离

页面元素滚动

ele.scrollTo(x,y)

ele.scrollBy(x,y)

《商用密码应用与安全性评估》第四章密码应用安全性评估实施要点4.1密码应用方案设计 密码应用方案设计 阅读详情

相关推荐

最优控制理论 二+、哈密尔顿函数法的补充

本章基于变分法所推出的哈密尔顿函数法,2、讨论了积分方程约束的转化、控制+状态等式约束的一阶必要条件。3、控制分段连续、状态存在内点约束等情况下的角点条件,给出了协态变量和哈密尔顿函数在内点处不连续的表达式。...

MSysの优快云 9394

DOM详解

文章目录一、什么是DOM1. 什么是DOM2. 为什么学习DOM3. 何时会用到DOM4. DOM标准5. DOM能做的5件事二、DOM树1. 什么是DOM树2. 何时会生成DOM树三、查找1. 不需要查找就可直接获得的4种节点对象:2. 按节点间关系查找3. 示例: 输出指定元素,并用节点间关系查找想要的元素4. 按HTML特征查找: 4个函数5.查找指定的元素,并修改元素的样式总结 一、什么是DOM 1. 什么是DOM 一套专门操作网页内容的对象和方法的集合。 2. 为什么学习DOM ECM

m0_48224507的博客 1万+

电源完整性必看!用SIwave提取PDN阻抗曲线的3个关键设置与常见报错解决

本文深入探讨了在SIwave中进行电源完整性(PI)仿真时,提取PDN阻抗曲线的三个核心设置要点。重点解析了端口阻抗设为0.1欧姆的物理意义与SYZ参数仿真中的阻抗匹配原则,并提供了针对常见收敛性问题和模型误差的实战排查思路,旨在帮助工程师获得更精确可靠的仿真结果,为去耦电容优化提供依据。

b9c0d的博客 352

DOM基础原理与应用

关于DOM的基础知识

m0_51452686的博客 3485

告别屏幕适配焦虑:用AndroidAutoSize 1.2.1搞定多尺寸设备(附AndroidX兼容方案)

本文详细介绍了AndroidAutoSize 1.2.1在屏幕适配中的应用,帮助开发者高效解决多尺寸设备适配问题。通过动态计算机制,AutoSize显著提升了UI一致性和开发效率,特别适合处理横竖屏切换、折叠屏等复杂场景。文章还提供了AndroidX兼容方案和性能优化建议,是Android开发者的实用指南。

weixin_42535461的博客 190

Argoverse轨迹预测实战:从数据加载到地图API应用全解析

本文详细解析了Argoverse数据集在轨迹预测中的应用,从数据加载到地图API的实战技巧全涵盖。通过具体代码示例展示如何高效处理轨迹数据、实现可视化及基础预测模型,帮助开发者快速掌握自动驾驶轨迹预测的核心技术。特别介绍了Argoverse地图API的深度应用和性能优化经验。

weixin_29182481的博客 241

什么是DOM和BOM?

DOM 全称是 Document Object Model,也就是文档对象模型。提供操作页面元素的方法和属性,是HTML和XML的API,DOM把整个页面规划成由节点层级构成的文档。DOM 树DOM树是Web页面的模型,当浏览器加载一个Web页面时,它会创建这个页面的模型,称为DOM树。DOM树主要由4类主要节点组成:文档节点,元素节点,属性节点,文本节点。①.文档节点:在树的顶端是文档节点,它呈现整个页面。②.元素节点:需要访问DOM树时,需要从查找元素开始。

似水流年QC的博客 2万+

[QMT量化交易小白入门]-六十九、ETF动量评分策略,历史年化收益率107%

C . bar_date } 跳过') returnC . bar_date } 跳过') returnC . bar_date } 跳过') return作用:如果当前不是回测模式且不是最后一根K线,则记录日志并跳过本次任务。这是为了避免在实时交易中对尚未完成的数据进行处理。

木头大左的博客 2229

♥️Javascript之DOM♥️

目录 节点 Node类型 属性 方法 Document类型 属性 DOM编程界面 查找元素 添加元素 Element类型 属性 Text类型 属性和方法 文档对象模型(DOM)是网页的编程接口。它给文档(结构树)提供了一个结构化的表述并且定义了一种方式——程序可以对结构树进行访问,以改变文档的结构,样式和内容。 浏览器会根据DOM模型,将结构化文档(比如HTML和XML)解析成一系列的节点,再由这些节点组成一个树状结构(DOM T...

欢迎 2431

YOLOv11改进策略【模型轻量化】| 使用 MoblieOne 模块,引入结构重参数化,提高模型检测效率

本文记录的是基于MobileOne的YOLOv11骨干网络改进方法研究。MobileOne的基础模块通过重参数化,。在将其替换YOLOv11的骨干网络后,实现模型轻量化。

Limiiiing的博客 1424

ImportError: DLL load failed while importing _pydantic_core: 找不到指定的程序对应解决方案

本文主要介绍了ImportError: DLL load failed while importing _pydantic_core: 找不到指定的程序对应解决方案,希望能对使用Python的同学们有所帮助。 文章目录 1. 问题描述 2. 解决方案

weixin_43178406的博客 19万+

常见的DOM操作有哪些

这里是修真院前端小课堂,本篇分析的主题是 【常见的DOM操作有哪些】 这里是修真院前端小课堂,每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能,本篇分享的是: 【常见的DOM操作有哪些】 1.背景介绍 什么是DOM?简单地说,DOM是一套对文档的内容进行抽象和概念化...

IT修真院:初学者转行到互联网的聚集地 2万+

ssm框架搭建

这个是一个在idea上成功跑起来的ssm框架项目,保存在这里方便以后使用直接下载

JavaScript 操作 DOM

js的DOM操作

2401_83194362的博客 1672

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

虚拟dom和直接操作dom_DOM操作入门指南

虚拟dom和直接操作domDOM Manipulation can make web applications customizable and the data of the webpage can be updated without refreshing the page. By DOM manipulation we can add, change and remove any HTML ...

weixin_26738395的博客 1046

迈瑞BS系列全自动生化分析仪LIS协议接口手册(内含HL7和ASTM)

迈瑞BS系列全自动生化分析仪LIS协议接口手册,内含HL7和ASTM)

JavaScript DOM操作

文章目录JavaScript DOM操作事件的冒泡和事件的委托事件冒泡事件委派 JavaScript DOM操作 事件的冒泡和事件的委托 事件冒泡 同一片区域,给其中的元素都绑定了点击事件,点击公共区域时,触发顺序? 假设如图,从span->box1->body依次触发 事件的冒泡(Bulle):事件的向上传导,事件在目标元素处理后,会由内向外的一层层传递 在开发中大部分情况冒泡都是有用了,如果不需要可以通过事件对象event.cancelBubbl取消冒泡。 let span = docum

好好学习天天向上 5694

JavaScript中DOM操作

目录 DOM介绍 获取元素 操作元素 节点操作 DOM介绍 JavaScript一共包括三部分,分别是ECMAScript也就是JavaScript基础、DOM和BOM,前面的文章已经讲过ECMAScrit了、这里是ECMAScript的链接:https://blog.youkuaiyun.com/HeZhiYing_/article/details/102218018 今天来将一下DO...

4436

【DOM系列】DOM操作方法汇总

DOM操作方法分为七类:创建节点、通过节点关系获取节点、节点操作、节点选择、属性操作、DOM事件、元素样式尺寸。

pakerder的博客 4408

js操作DOM

DOM 本质: 浏览器把拿到的html代码,结构化一个浏览器能识别并且js可操作性的一个模型而已 ①获取DOM节点 var div1=document.getElementById(‘div1’);//元素 var divList=document.getElementsByTagName(‘div’); //集合 console.log(divList.length) console.log(divList[0]) var containerList=document.getElementsB

田兴的博客 4619

真实DOM操作和虚拟DOM操作的比较

<div></div> <script> let box=document.getElementsByTagName('div');//获取DIV元素 // time和timeEnd结合使用可以计算中间区域的耗时 //DOM操作 console.time('a')...

纸飞机博客 1793

什么是DOM及DOM操作?

什么是 DOM ? DOM(文档对象模型)是针对于xml但是扩展用于HTML的应用程序编程接口,定义了访问和操作HTML的文档的标准。 W3C文档对象模型是中立于平台和语言之间的接口,它允许程序和脚本动态的访问和更新文档的内容、结构、样式。总之HTML是关于如何获取、修改、添加和删除HTML元素的标准。 DOM 分层节点 DOM的分层节点一般被称作是DOM树,树中的所有节点都可以通过脚本语言例如J...

W Y L 2242

DOM的节点操作

classList属性提供的方法和属性 DOM中节点的操作 childNodes属性和children属性的区别

m0_74331160的博客 1318

js中Dom操作

简单的Dom获取 什么是Dom操作? 1.DOM使一个"使程序"和"脚本"有能力的"动态地访问"和"更新文档内容结构",以及"样式"的平台和语言中立的接口. 2.在HTML和JavaScript的学习中,DOM操作可谓时重中之重. Dom树 //html dom树 如图: DOM节点的分类: DOM节点分为三大类: 1.元素(标签)节点, 2.属性节点, 3.文本节点; 查找dom节点: 1.通过id获取 <div id="box"></div> <script&

weixin_52346897的博客 5306

python操作dom_操作DOM

由于HTML文档被浏览器解析后就是一棵DOM树,要改变HTML的结构,就需要通过JavaScript来操作DOM。始终记住DOM是一个树形结构。操作一个DOM节点实际上就是这么几个操作:更新:更新该DOM节点的内容,相当于更新了该DOM节点表示的HTML的内容;遍历:遍历该DOM节点下的子节点,以便进行进一步操作;添加:在该DOM节点下新增一个子节点,相当于动态增加了一个HTML节点;删除:将该节...

weixin_39963819的博客 773
上一篇: node的Mysql模块
下一篇: Symbol
*初级小白*~
博客等级 码龄7年 24粉丝 108原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值