您的位置: 首页  >  文章  >  JS学习之DOM及案例

JS学习之DOM及案例

分类: 文章 • 2025-02-02 18:17:40

1>DOM简介

    当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model，简称DOM）。

    即当浏览器载入HTML文档时, 它就会成为DOM对象，而在JS中，所有的事物都是节点，

    元素、文本等都是节点。可以通过节点进行DOM对象的增删改查。

    既然HTML在被浏览器加载时会对应的生成DOM对象，而JS又可以通过节点来操作DOM，所以，JS

    完全可以创建动态的HTML，

    看一下实际当中的一些场景，js是怎么处理的，案例如下。

2>先来点语法

    2.1>获取DOM节点的方法
        //通过id获取，唯一的
        var oDiv = document.getElementById('box');
        //通过类名获取，返回数组形式，所以可以加索引取值
        var oDiv = document.getElementsByClassName('.box')[0];
        //通过标签名获取
        var oDiv = document.getElementsByTagName('div')[0];

    2.2>常用的DOM节点

    JS学习之DOM及案例

    2.3>节点的增删改查

    JS学习之DOM及案例

JS学习之DOM及案例

// 删除元素上的class属性
oH2.removeAttribute('class');

// 删除创建的DOM对象
oDiv.removeChild(oH2);
// 父节点.replaceChild(新节点,子节点) 用新节点替换某个子节点
var op = document.createElement('p');
op.innerText = '我是一个段落';
oDiv.replaceChild(op,oH2);

3>模态框案例

// 获取dom元素
var btn = document.getElementById('btn');

// 1、创建divdom元素
var oDiv = document.createElement('div');
var oP = document.createElement('p');
var oSpan = document.createElement('span');

// 2、设置各dom元素的属性，方便后续定位操作，写样式等
oDiv.id = 'box';
oP.id = 'content';
oSpan.id = 'span1';
oP.innerHTML = '模态框成功弹出';
oSpan.innerHTML = '关闭';

// 3、部署dom元素，理清层级关系
oDiv.appendChild(oP);
oP.appendChild(oSpan);


//给按钮添加点击事件
btn.onclick = function(){
  //动态的添加到一个div到body中，并且在btn前面
    console.log(this);//当前this指向的是当前按钮元素
    this.parentNode.insertBefore(oDiv,btn);

};
//点击span标签就触发删除节点函数，删除整个div块
oSpan.onclick = function(){
    // removeChild()删除节点
    oDiv.parentNode.removeChild(oDiv)
}

    样式自己设置下，最终效果如下，页面首先展示一个button按钮，点击弹出模态框（div块>p标签>span标签），

    再点击span（关闭），则删除div块，回到页面初始的样子，

    JS学习之DOM及案例

    JS学习之DOM及案例

4>点击有惊喜案例

    <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: green;
            line-height: 200px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="box">
        点击有惊喜
    </div>

</body>
    <script type="text/javascript">

        var box = document.getElementById('box');
        console.log(box);
        var n=0;
        box.onclick = function(){
            n++;
            if(n%4==1){
                this.style.backgroundColor='blue';
                this.innerText = '2222'
            }else if(n%4==2){
                this.style.backgroundColor='red';
                this.innerText = '3333'
            }else if(n%4==3){
                this.style.backgroundColor='yellow';
                this.innerText = '4444'
            }else{
            this.style.background = 'transparent';
            this.innerText = '';
            }
        }
        
    </script>

    初始页面有个div盒子，样式已设置，js里面现在通过id找到dom元素，再通过一个自增n对4取余的结果来改变dom元素

    属性，比如上面的背景色和蚊子内容，达到点击一直切换的效果。

    效果如下

    JS学习之DOM及案例JS学习之DOM及案例

相关推荐