Web全栈技术指南-2.3.2 操纵DOM - 书目录

Web全栈技术指南-2.3.2 操纵DOM

2.3.2 操纵DOM

在前面HTML的部分我们已经介绍了DOM,并且提到了通过JavaScript可以操纵HTML文档的DOM树。以上示例的JavaScript代码也展示了这一点:

var btn = document.getElementById('btn1');
btn.onclick = function() {
  document.body.innerHTML = '<h1>你好,JavaScript!</h1>';
};

其中,document对象代表整个HTML文档,也是DOM树的根节点。通过它的方法

getElementById

我们得到了代表button元素的对象,保存在变量btn里。

接着,我们给button元素的onclick属性赋值,一个函数。这实际上是给“事件”注册“回调函数”:当button被按下的时候,相应的函数就会被执行。在这个函数里我们又一次修改了DOM:body的内容被替换成了

<h1>你好,JavaScript!</h1>

读者可在浏览器的调试器下观察一下DOM树前后的变化。

通过操纵DOM,JavaScript使网页“动”了起来。

results matching “

    No results matching “

    134021

     

    转载链接:https://getfullstack.com/web_client/javascript/dom.html