JS Javascript与HTML DOM的互动寻路

Posted 2020-09-09 K.Takanashi

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS Javascript与HTML DOM的互动寻路相关的知识，希望对你有一定的参考价值。

　　DOM的全程是Document Object Module，即文档对象模型。一般来说，当一个页面被加载时，浏览器会在内部创建一个当前文档的DOM。就像用python的Etree之类的模块解析xml文件时建立的对象一样，浏览器建立的DOM对象抽象了整个html文件，并且形成了一颗html元素的树。

技术分享

　　而JS，就被赋予了和这种DOM互动的能力。也就是说，JS可以通过增删改查DOM来实现动态灵活地改变html内容。比如JS可以做到：更改html元素，更改html元素的属性，更改css，对页面上发生的事件作出反应，增删html元素等等。

■　　改变HTML

　　JS可以直接改变HTML元素的内容和元素本身。

● 寻找HTML元素

　　HTML元素是组成html文档的基本单位，所有的操作都应该基于它。在JS中，用document.getElementById(...)方法可以通过ID来定位一个元素，类似的还有document.getElementByTagName("div")这样的方法来通过标签名来定位一个元素以及getElementByClassName的通过类名。此外还有更多的定位方法，这里只是为了后面演示方便先行提一下。

● 改变HTML输出流

　　就像之前文章中所提到的那样，document.write()方法用来向html输出内容，相当于改变html的输出流。需要注意到，既称改变，就是说没有HTML回整个都变成document.write出来的内容，所以当文档全部加载完成之后再进行write的话会把之前所有内容都清空掉再输出新内容。

● 改变HTML内容 innerHTML属性

　　对于一个元素对象来说，其拥有属性innerHTML属性，代表了头标签和尾标签之间的内容。通过改变这个属性的值就可以直接改变html中的内容了。

<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
//最终显示的是New Text!因为p的内容被JS改变

● 改变HTML属性

　　除了内容，属性也是HTML很重要的一个组成部分。在DOM中直接用属性名来表示HTML元素的属性。改变某个属性名的值就直接改变了这个属性的值。比如：

<img id="image" src="smiley.gif">

<script>
document.getElementById("image").src="landscape.jpg";
</script>

　　上例中改变了img的src属性，使之指向另一个图片了。

● 改变HTML样式 style属性

　　JS可以通过DOM来改变html元素的CSS。用到的是元素对象的style属性：

<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color="blue";
</script>

　　上例中把id是p2的元素的CSS属性color改成了blue。

■　　HTML事件与JS的互动

　　JS可以对HTML上发生的事件作出反应。DOM的事件有很多：http://www.w3school.com.cn/jsref/dom_obj_event.asp

　　常用的就有：

　　　　onclick　　点击

　　　　onload/onunload　　用户进入/离开界面

　　　　onmouseover　　鼠标被移动到某元素上方

　　　　onselect　　文本被选中

　　　　onchange　　输入的内容改变时（比如像input这种标签，当用户敲完键盘离开输入框，光标不在输入框里的时候检测,如果和上一次检测时内容变化则触发此事件）

　　　　……

　　让事件和JS联系起来的一种方式是: 在相关元素的标签内把事件作为一个属性，JS的内容作为这个属性的值写出来。比如<button onclick="alert(‘Clicked！‘)">这样在按下这个按钮的时候就会跳出提示框了。另外，一般来说，可以把一些JS操作包装到一个函数中去，然后在事件这里写上这个函数就可以了。

　　*这里牵扯到一个小问题，就是说这个函数内容所在的<script>标签应该放在哪里。因为button本身肯定是放在body标签里面的，所以script标签的位置可以是放在head里、放在body中button前面、放在body中button后面三个选项。实际上三者都可以，因为浏览器加载html的方法是全部加载完再显示的，所以不存在其他编程语言里面那种函数还没定义就调用而报错的事情。比如下例：

<!DOCTYPE html>
<html>
<head></head>
<body>

<h1 onclick="changetext(this)">请点击该文本</h1>
<script>
function changetext(element)
{
element.innerHTML="谢谢!";
}
</script>
</body>
</html>

　　这样的事件和JS的关联方式比较死板，更加灵活的，我们可以在JS里面进行事件的分配，删除等（因为事件本身也是HTML元素的属性，利用JS可以编辑元素的属性这一点就OK了）。比如：

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

　　当myBtn元素本身就有onclick事件时改变事件的响应方式，当没有的时候就为myBtn新分配一个这个事件。

■　　增删HTML元素

● 创建新元素

　　用JS给DOM创建新元素比较麻烦，比如下面这个实例，为某个div元素在尾部创建一个新的p元素：

<div id="div1">
<p id="p1">这是一个段落</p>
<p id="p2">这是另一个段落</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>

　　意思上来说，首先要创建出一个p元素，然后创建出一个文本节点元素，然后把这个文本节点加入（关联）到p中，然后再把这个p元素加入（关联到）div中来。

　　上面用到的方法全是appendChild()这是在当前元素的末尾增加子元素的方法，如果想要在某个指定位置加入子元素的话可以用insertBefore(some_exist_child,new_child)来再some_exist_child前面加上新元素。

● 删除元素

　　同样也是一个实例：

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

● 替换元素

　　基本精神和上面两个差不多，用的方法是replaceChild(child)

　　可以看到，虽然JS通过和DOM的互动，已经可以很强大地对HTML做出修改编辑了，但是其方法比较贴近底层而且操作步骤繁琐（从如何解析DOM的角度来看似乎和python里的bs以及xml这些模块的做法有点相像）。不过好在有很多JS的库（把JS的方法进行进一步的包装），利用这些库可以更加简单地利用JS，比如jQuery。我觉得将来即使要用JS，也肯定是用的这些库里的方法和形式，至于JS的本体，肯定有必要了解，但是具体怎么实用，不是很感冒。。

以上是关于JS Javascript与HTML DOM的互动寻路的主要内容，如果未能解决你的问题，请参考以下文章

JS Javascript与HTML DOM的互动 寻路

JS Javascript与HTML DOM的互动寻路