原生JS操作DOM

anRui 发布于2019-08-20 14:49 / 2914人阅读

摘要：能够改变页面中的所有元素能够改变页面中的所有属性能够改变页面中的所有样式能够对页面中的所有事件做出反应我们需要通过操作元素，查找这些元素有三种方法通过查找通过标签名查找通过类名查找允许改变元素的内容。，如使有能力对事件做出反应。

通过html dom可以访问javascript html文档的所有元素。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

我们需要通过javascript操作html元素，查找这些html元素有三种方法：
1.通过id查找：
var doc=document.getElementById("idName");
2.通过标签名查找：
var doc=document.getElementsByTagName("tagName");
3.通过类名查找：
var doc = document.getElementsByClassName("className");

html dom允许javascript改变html元素的内容。
1.改变html输出流
在javascript中，document.write()可用于直接向html输出流直接写内容。
tip:绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。
2.改变html内容
修改html内容的最简单的方法是使用innerHTML属性。如：
document.getElementById(idName).innerHTML="文本内容"
3.改变html属性
document.getElementById(id).attribute="new value"，如：
document.getElementById(idName).src = "location.png"

html dom允许javascript改变html元素样式。
document.getElementById(id).style.property=new style，如：
document.getElementById(idName).style.color="red";

html dom使javascript有能力对html事件做出反应。
你可以使用事件属性，比如：

你也可以使用javascript来向html元素分配事件，比如：
document.getElementById("idName").onclick=function(){...};

添加和删除节点（HTML 元素）。（重点温习的内容）
如需向html dom添加新元素，必须先添加元素节点，然后向该元素追加元素节点。
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
上述操作有三个步骤：
1.创建新的

元素
2.创建文本节点
3.向已有的元素追加新元素
当然上面也可以不创建新的元素，直接添加到已有的元素中，比如：
var eleNode = document.createTextNode("这是新段落");
document.getElementById("div1").appendChild(eleNode);
常用的dom对象方法：

在html dom（文档对象模型）中，每个部分都是节点：
文档本身是文档节点
所有 HTML 元素是元素节点
所有 HTML 属性是属性节点
HTML 元素内的文本是文本节点
注释是注释节点
在html dom中，element对象表示html元素，下面这些属性和方法可用于所有HTML元素上。

GPU云服务器云服务器 js原生dom事件 js操作dom对象 js中操作dom节点 Dom操作

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81943.html

你不需要 jQuery，但你需要一个 DOM 库

摘要：对于复杂的业务需求仍然需要一些操作。使用方式很简单，但是你需要创建一个独立文件，重新挂载需要的方法到命名空间上，这在编写插件时非常有用。正如前文所说，的操作在我看来依然是最好用的，所以，你不需要，但你需要一个库。 showImg(https://segmentfault.com/img/bVbuPEH?w=750&h=375); 写这篇文章的目的，一方面是介绍一下自己编写的模块化 DO...

HitenDev 2019-08-23 16:23 评论0 收藏0
用WEB技术栈开发NATIVE应用（二）：WEEX 前端SDK原理详解

摘要：依旧采取传统的开发技术栈进行开发，同时在终端的运行体验不输。首先来看下前端开发框架目前与构成了三大最流行的前端开发框架，具有组件化以及三大特性，还学习的，引入了状态管理模块。摘要： WEEX依旧采取传统的web开发技术栈进行开发，同时app在终端的运行体验不输native app。其同时解决了开发效率、发版速度以及用户体验三个核心问题。那么WEEX是如何实现的？目前WEEX已经完全开...

ls0609 2019-08-22 15:00 评论0 收藏0
原生js实现简单的链式操作

摘要：对象存储在中，如果想直接在对象上操作，可以正确总结一下，这里我们也只是用原生简单的实现了下链式操作，更复杂的功能，比如对象缓存，异常处理等等，都需要后续再完善处理。在jQuery中，一个jq对象能一直连续调用各种方法，因为jQuery把这些方法挂载他自定义的一个对象中，但是使用原生的js获取的DOM对象，只能使用一次addEventLisenter方法添加事件，如果要接着添加事件，还...

Vixb 2019-08-20 17:36 评论0 收藏0
原生js之DOM事件相关

摘要：而由于级标准中并没有定义事件相关的内容，所以事件级别只包括级，级和级三种。此属性返回当前事件所绑定的对象。自定义事件可以绑定到任意元素上，此处选择只是为了演示方便。前端学习的东西有很多，现代前端开发，前端工程化的东西要懂，基础的原生js也要懂，毕竟，框架都是有生命周期的，更替非常快，然而却有这么一个框架，它是最轻量的前端框架，每个浏览器都内置，它叫vanilla.js。好吧，其实va...

learning 2019-08-22 13:51 评论0 收藏0