15JavaScript DOM 操作全攻略！5 大核心技巧 + 避坑指南，小白秒变实战高手！

【创建节点】使用document.write()创建节点

innerHTML更换元素内容（包括文字、标签）

innerHTML和innerText的区别

【创建节点】使用字符串拼接方式创建节点

【创建节点】createElement创建节点

js不用获取id也能操作对象

非 VIP 用户可前往公众号“前端基地”进行免费阅读，文章链接如下：

15JavaScript DOM 操作全攻略！5 大核心技巧 + 避坑指南，小白秒变实战高手！

【创建节点】使用document.write()创建节点

在 HTML DOM 操作中，document.write()是创建节点的一种方式，它可以将字符串形式的 HTML 代码直接写入页面。不过，这种方式在使用时有严格的限制和注意事项。

示例代码如下：

<body>
    <button>按钮</button>
    <h1>一级标题</h1>
    <script>
        /*
             创建节点的第一种方式: document.write()
        */
        // 只能在页面加载的时候使用
        document.write('<h2 title="我是h2标签">二级标题</h2>');
        // 当页面加载后，再使用会干掉所有的dom
        var btn=document.getElementById('btn');
        btn.onclick=function(){
            document.write('<h3 title="我是h3标签">三级标题</h3>');
        }
    </script>
</body>

分析：页面加载时使用：document.write()最适合在页面加载过程中使用。例如，在<script>标签中直接调用document.write()，它会将传入的 HTML 字符串插入到当前<script>标签所在的位置。如上述代码中，在页面加载时执行document.write('<h2 title=”我是h2标签”>二级标题</h2>');，最终页面结构如下：

<button>按钮</button>
<h1>一级标题</h1>
<script>…</script>
<h2 title="我是h2标签">二级标题</h2>

运行结果：

页面加载后慎用：当页面加载完成后，如果再次使用document.write()，它会清空当前页面的所有 DOM 内容，并将新传入的 HTML 字符串作为新的页面内容。例如，在按钮点击事件中执行document.write('<h3 title=”我是h3标签”>三级标题</h3>');，页面最终只会显示新写入的<h3>标签，原有的<button>和<h1>标签都会消失，最终页面结构变为：

<h3 title="我是h3标签">三级标题</h3>

运行结果：

innerHTML更换元素内容（包括文字、标签）

在 HTML DOM 操作中，innerHTML属性是修改元素内容的常用方法，它能够快速设置或返回元素开始标签与结束标签之间的所有 HTML 内容，无论是纯文本、HTML 标签，还是两者的组合，都能轻松处理。

语法：

元素对象(事件源).innerHTML='新的HTML内容'

通过将目标元素的innerHTML属性赋值为新的HTML字符串，即可替换元素原有的内容；直接读取innerHTML属性，则能获取元素当前包含的HTML内容。

示例代码如下：

<body>
    <div><h1>box</h1></div>
    <script>
        var box=document.getElementById('box');
        console.log(box.innerHTML);
        box.innerHTML='<p>我是innerHTML设置的文本内容</p>'
    </script>
</body>

分析：在上述代码中，首先通过document.getElementById('box')获取页面中的<div>元素，随后使用console.log(box.innerHTML)打印其原始内容，最后将新的 HTML 字符串赋值给innerHTML属性，实现元素内容的替换。执行后，页面中的<div>元素将显示为新设置的红色<p>标签内容。

innerHTML和innerText的区别

innerHTML 和 innerText 的区别在于：当元素内仅包含纯文本内容时，innerHTML 和 innerText 都会直接显示该文本内容。然而，当元素内包含 HTML 标签时，innerHTML 会解析并渲染这些 HTML 标签，以呈现出相应的页面效果；而 innerText 则会将 HTML 标签作为普通文本内容原样输出。

关于 innerText 的详细介绍，可参考《1.5.innerText 设置和获取元素对象的文本内容》。

【创建节点】使用字符串拼接方式创建节点

以下代码实现了通过字符串拼接的方式创建节点，并将这些节点添加到页面中，同时为列表项添加了奇偶行不同背景色的样式，以及鼠标悬停时的样式效果。

示例代码如下：

<body>
    <div class="box">
    </div>
    <script>
        var box=document.getElementById('box');
        var arr=['学科','语文','分数',80];
        var str='<ul>';
        for(var i=0;i<10;i++){
            str+='<li>';
            for(var j=0;j<arr.length;j++){
                str+='<span>'+arr[j]+'</span>'; 
            }
            str+='</li>';
        }
        str+='</ul>';
        box.innerHTML=str;
        var lis=document.getElementById('news').children;
        for(var i=0;i<lis.length;i++){
            if(i%2==0){
                lis[i].style.backgroundColor='#efefef';
            }else{
                lis[i].style.backgroundColor='#fff';
            }
            // 动态添加属性
            lis[i].index=i;
            // 鼠标移入
            lis[i].onmouseover=function(){
                if(this.index%2==0){
                    this.style.backgroundColor='skyblue';
                }else{
                    this.style.backgroundColor='pink';
                }
            }
            // 鼠标移出
            lis[i].onmouseout=function(){
                if(this.index%2==0){
                    this.style.backgroundColor='#efefef';
                }else{
                    this.style.backgroundColor='#fff';
                }
            }
        }
    </script>
</body>

运行结果：

【创建节点】createElement创建节点

以下代码使用document.createElement 方法创建了HTML元素节点，并将这些节点添加到页面中，同时为列表项添加了奇偶行不同背景色的样式，以及鼠标悬停时的样式效果。

示例代码如下：

<body>
    <div class="box">
    </div>
    <script>
        var box=document.getElementById('box');
        var arr=['学科','语文','分数',80];
        var ul=document.createElement('ul');
        ul.id='news';
        for(var i=0;i<10;i++){
            var li=document.createElement('li');
            for(var j=0;j<arr.length;j++){
                var span=document.createElement('span');
                span.innerHTML=arr[j];
                li.appendChild(span);
            }
            ul.appendChild(li);
        }
        box.appendChild(ul);
        var lis=document.getElementById('news').children;
        for(var i=0;i<lis.length;i++){
            if(i%2==0){
                lis[i].style.backgroundColor='#efefef';
            }else{
                lis[i].style.backgroundColor='#fff';
            }
            // 动态添加属性
            lis[i].index=i;
            // 鼠标移入
            lis[i].onmouseover=function(){
                if(this.index%2==0){
                    this.style.backgroundColor='skyblue';
                }else{
                    this.style.backgroundColor='pink';
                }
            }
            // 鼠标移出
            lis[i].onmouseout=function(){
                if(this.index%2==0){
                    this.style.backgroundColor='#efefef';
                }else{
                    this.style.backgroundColor='#fff';
                }
            }
        }
    </script>
</body>

js不用获取id也能操作对象

在 JavaScript 严格模式下，直接使用未声明的变量（如代码中的 btn）会导致 ReferenceError 错误。因为没有通过 var、let 或 const 声明 btn 变量，也没有使用 window.btn 这种挂载在全局对象上的方式，所以代码会报错。

不过在非严格模式下，JavaScript会自动将 btn 作为全局变量隐式声明（这是 JavaScript 的一种 “奇特” 行为，不推荐使用），此时代码可以运行。

示例代码如下：

<body>
    <button>js不用获取id也能操作对象</button>
    <script>
        btn.onclick=function(){
            console.log('js不用获取id也能操作对象');
        }
    </script>
</body>

文章版权归作者所有，未经允许请勿转载。如内容涉嫌侵权，请在本页底部进入<联系我们>进行举报投诉!

THE END