Js操作DOM的方式及获取浏览器的宽高

Posted 2020-08-08

我们在为页面加入一些动态效果或实现一些脚本功能时，需要对文档body中的元素进行操作，也就是，我们需要使用js或jQuery来对dom操作。下面呢，我说一下js是怎样对dom操作的。

document.write（），这既可以向文档输出文本，也可以写入代码来添加元素。

获取需要操作的元素：

利用id获取就是：document.getElementById("name");

利用class获取就是：document.getElementsByClassName("name");

利用标签获取就是：document.getElementsByClassTagName("name")；

在获取的时候，我们最好用一个变量来接收，这样能避免下面再重复操作时又写一长串代码，既省了一些内存，加快了加载速度，又让我们自己轻松了一些。获取完之后，就可以对这些元素进行操作了。下面我说一下操作的方法有哪些：

以document.getElementById("name")为例，

创建新元素，追加到已有的元素上：document.getElementById("name").createElement(“”);

创建文本节点 :document.createTextNode("");

在指定的已有子节点之前插入新的子节点:document.insertBefore("");

修改元素的内容：document.getElementById("name").innerhtml="New Text";

改变元素的样式：document.getElementById("name").style.color="New Color";

添加内容：document.getElementById("name").appendChild(node);

删除已有的元素：document.getElementById("name").removeChild(child);

替换 HTML DOM 中的元素：document.getElementById("name").replaceChild(child);

还可以添加事件，

点击事件：document.getElementById("name").onclick=function(){};

页面加载事件：document.ready/document.onload;

用户进入或离开页面时，会触发onload和onunload事件。

有两个属性可以访问全部文档：

document.documentElement--全部文档；

document.body--文档的主体。

最后我说一下怎么获取浏览器的宽和高：

 document.documentElement.clientWidth--获取宽度

  document.documentElement.clientHeight--获取高度

以上便是本人对js操作dom方法的总结，如有不当、缺少之处，请多多指教。谢谢。