关于DOM

最新推荐文章于 2022-11-24 17:40:26 发布

王十一是个喵

最新推荐文章于 2022-11-24 17:40:26 发布

阅读量259

点赞数

分类专栏：学习案例 JavaScript web前端

本文链接：https://blog.csdn.net/qq_43398720/article/details/99755995

版权

学习案例同时被 3 个专栏收录

22 篇文章 0 订阅

订阅专栏

web前端

18 篇文章 0 订阅

订阅专栏

JavaScript

16 篇文章 0 订阅

订阅专栏

先说几个例题

20-100之间十个不重复的随机数

var arr=[];
for(var i=0;i<10;i++){
	var x=Mati.floor(Manth.randow()*(100-20)+20);//这就是产生20-100的随机整数 
    if(arr.indexOf(x)==-1){
    	arr.push(x);
    }else{
    	i--;                   
    }
}
console.log(arr);

数组去重

var arr=[1,1,2,2,3,4,666,2,1];
var newarr=[];
for(var i=0;i<arr.length;i++){
	if(newarr.indexOf(arr[i])==-1){
    	newarr.push(arr[i])                  
    }                               
}
console.log(newarr);

随机验证码

var str='1234567890qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM'
for(var i=0;i<sp.length;i++){
	sp[i].innerHTML=str.charAt(Math.floor(Math.random() * str.length));
}

手动实现reverse

var arr=[1,3,4,'dd','??','戒烟',33,'不会'];
var newarr=[];
for(var i=0;i<arr.length;i++){
	newarr.unshift(arr[i]);
}    
console.log(newarr);

图片从大到小排序，图片随机排序

<body>
    <div id="box">
        <div>
            <img src="./image/1.jpg" alt="">
            <p>图片<i>1</i></p>
        </div>
        <div>
            <img src="./image/2.jpg" alt="">
            <p>图片<i>2</i></p>
        </div>
        <div>
            <img src="./image/3.jpg" alt="">
            <p>图片<i>3</i></p>
        </div>
        <div>
            <img src="./image/4.jpg" alt="">
            <p>图片<i>4</i></p>
        </div>
        <div>
            <img src="./image/5.jpg" alt="">
            <p>图片<i>5</i></p>
        </div>
        <div>
            <img src="./image/6.jpg" alt="">
            <p>图片<i>6</i></p>
        </div>
        <div>
            <img src="./image/7.jpg" alt="">
            <p>图片<i>7</i></p>
        </div>
        <div>
            <img src="./image/8.jpg" alt="">
            <p>图片<i>8</i></p>
        </div>
        <button>图片从大到小排序</button>
        <button>图片随机排序</button>
    </div>
    <script>
        var box = document.getElementById('box');
        var divv = box.querySelectorAll('div');
        var ii = document.querySelectorAll('i');
        var imgs = document.querySelectorAll('img');
        var btn = document.querySelectorAll('button');
        console.log(imgs);
        var arr = [];
        for (var i = 0; i < ii.length; i++) {
            arr.push(ii[i].innerHTML);
        }
        console.log(arr);//把图片名字写进了数组
        var newarr = [];
        for (var i = 0; i < arr.length; i++) {
            newarr.unshift(arr[i]);
        }
        console.log(newarr);
        // newarr.push('0'); 
        // console.log(newarr); 
        // 从大往小排
        btn[0].onclick = function () {
            for (i = 0; i < 8; i++) {
                imgs[i].src = './image/' + Number(newarr[i]) + '.jpg'
                ii[i].innerHTML = Number(newarr[i]);
                newarr.reverse();//点击一次以后数组返翻转就变成了从小到大，在点击按钮就可以从小到大排序了
            }
        }
        //随机排序
        btn[1].onclick = function () {
            var x=[];
            var y=[];
            for(var i=0;i<8;i++){
            if(y.indexOf(x[i]=Math.floor(Math.random() * (9-1)+1))==-1){
                y.push(x[i]);
            }else{
                i--;
            }
        }
            console.log(y);
            for (i = 0; i < 8; i++) {
                imgs[i].src = './image/' + y[i] + '.jpg'
                ii[i].innerHTML = y[i];
            }
        }
    </script>
</body>
//以上是自己写的
//老师上课讲的
<head>
    <style>
    自己定义样式，有时间再写吧
    </style>
</head>
<body>
    <div class=box>
        <button>从大到小</button>
        <button>随机排序</button>
        <div class=demo>
            <p>
                <img src='./image/1.jpg'>
                <span>图片1</span>
            </p>
            <p>
                <img src='./image/1.jpg'>
                <span>图片2</span>
            </p>
            <p>
                <img src='./image/1.jpg'>
                <span>图片3</span>
            </p>
            <p>
                <img src='./image/1.jpg'>
                <span>图片4</span>
            </p>
            <p>
                <img src='./image/1.jpg'>
                <span>图片5</span>
            </p>
            <p>
                <img src='./image/1.jpg'>
                <span>图片6</span>
            </p><p>
                <img src='./image/1.jpg'>
                <span>图片7</span>
            </p>
            <p>
                <img src='./image/1.jpg'>
                <span>图片8</span>
            </p>
        </div>
    </div>
    <script>
    	var btn=document.querySelectorAll('button');
        var p=document.querySelectorAll('p');
        var arr=[];
        var arr1=[];
        for(var i=0;i<p.length;i++){
            arr.push(p[i].innerHTML);
            arr1.push(p[i].innerHTML);
        }
        btn[0].onclick=function(){
            arr.reverse();//反转
            for(var i=0;i<p.length;i++){
				p[i].innerHTML=arr[i];
            }
        }
        btn[1].onclick=function(){
            var arr2=[];
            for(var i=0;j<p.length;i++){
                var x=Math.floor(Math.random()*p.length);
                if(arr2.indexOf(x)==-1){
                    arr2.push(x);
                }else{
                    i--;
                }
            }
            for(var i=0;i<p.length;i++){
                p[i].innerHTML=arr1[arr2[i]];
            }            
        }
    </script>
</body>

结束

DOM，文档对象模型

节点

获取子节点

<body>
    <div id=“demo”>
        灵魂三问
        <!-- 别问我 -->
        <ul style="position:revative">
            <li class="my">毕业了吗</li>
            <li class="mm">工作了吗</li>
            <li>有对象了吗</li>
        </ul>
    </div>
    <script>
    	var demo=document.getElementById('demo');
        var my=document.getElementById('my');
        var mm=document.getElementById('mm');
        //子节点，包含注释，标签，换行，文本
        console.log(demo.childNodes);
        //子元素节点,只有标签，而且出来的是标签的数量
        console.log(demo.childElementCount);
        //父节点
        console.log(my.parentNode);//ul
        //找到有定位的父节点，如果没有就找body
        console.log(my.offsetParent);
        //找第一个子节点，包括文本，标签，换行，注释
        console.log(demo.firstChild);
        //找第一个子元素节点
        console.log(demo.firstElementChild);
        //最后一个节点
        console.log(demo.lastChild);
        //找最后一个子元素节点
        console.log(demo.lastElementChild);
        //兄弟节点
        //兄节点，在上
        console.log(mm.previousSibling);//找到的是换行
        console.log(mm.previousElementSibling);//找到的是元素
        //弟节点，在下
        console.log(mm.nextSibling);//找到的是换行
        console.log(mm.nextElementSibling);//找到的是元素
    </script>
</body>

#text，换行；comment是空格

<body>
    <div id=“demo”>
        灵魂三问
        <!-- 别问我 -->
        <ul style="position:revative">
            <li class="my">毕业了吗</li>
            <li class="mm">工作了吗</li>
            <li>有对象了吗</li>
        </ul>
    </div>
    <script>
    	var demo=document.getElementById('demo');
        var my=document.getElementById('my');
        console.log(my.nextSibling);
        console.log(my.nextElementSibling);
        //上面是会有兼容问题的,解决办法如下
        var nextS=my.nextElementSibling||my.nextSibling
        //------------------------------------
        console.log(demo.children);
        console.log(demo.childNodes);
        //nodeType:1 ，找到的是标签
        //nodeType:3 ，找到的是文本
        //nodeType:8 ，找到的是注释
        //nodeValue:是啥写啥
        //nodeName：#text/comment
    </script>
</body>

操作节点***重点

创建节点

//创建标签节点
var oli= document.createElement('li');
//创建文本节点
var txt= document.createTextNode('没有');

（往后）添加节点：appendChile(),只能添加你创建的节点，不可以直接添加标签

my.parentElement.appendChile(oli);
//首先找到父元素my.parentElement
//然后添加appendChile(oli);
//在父元素后面追加
oli.appendChile(txt);

（往前）添加节点：insterBefore(新创建的节点，参照的节点)

my.parentElement.insterBefore(oli,my);

删除节点：remove()

demo.remove();//删除整个
元素.remove();//删除某个元素
my.parentElement.removeChild(my);//删除某个子元素

替换节点：replaceChild(新的，旧的)

my.parentElement.replaceChile(oli,my)

复制（克隆）节点：cloneNode(true||false),默认false

my.cloneNode(true);
false：就是克隆空的标签
true：就是克隆所有的

查找节点

document.getElementById()
document.getElementsByClassName()
document.getElementsByTagName()
document.querySelector()
document.querySelectorAll()

获取元素的属性值：getAttribut()

demo=document.getElementById('demo');
console.log(demo.id);
console.log(demo.className);
//获取元素自定义属性：
demo.tag='123';
consloe.log(dome.tag);
//获取元素自定义属性另一种方法：
console.log(demo.getAttribut('tag'));

设置元素的属性值：setAttribut(要修改或添加的属性，新的属性值)

console.log(demo.setAttribut('tag','123'));

ToDoList

<body>
	<div>
        <input type="text" id="inp">
        <button>添加</button>
    </div>
    <div>
    	<h1>正在完成</h1>
        <ul id='ing'></ul>
        <h1>已经完成</h1>
        <ul id='ed'></ul>
    </div>
    <script>
    	var inp
        var ing
        var ed
        var btn
        btn.onclick=function(){
            add();
            check();
        }
        function add(){
            var txt=inp.value;
            var oli=document.createElement('li');
            oli.innerHTML='<input type="checbox">'+txt+'<span>-</span>'
            ing.insertBefor(oli,ing.firstChild);
            //ing.appendChild(oli)
            inp.value='';
            var ingli=ing.querySelectorAll('li');
            for(i=0;i<ingli.length;i++){
                ingli[i].querySelector('span').onclick=function(){
                    this.parentElement.remove();
                }
            }
        }
    </script>
</body>
...

表格操作

获取表格元素

<body>
	<table>
        <thead></thead>
        <tbody></tbody>
        <tfooter></tfooter>
    </table>
    <script>
        
    	console.log()
    </script>
</body>

王十一是个喵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于DOM

先说几个例题20-100之间十个不重复的随机数var arr=[];for(var i=0;i<10;i++){ var x=Mati.floor(Manth.randow()*(100-20)+20);//这就是产生20-100的随机整数 if(arr.indexOf(x)==-1){ arr.push(x); }else{ i--; ...
复制链接

扫一扫