原生JS操作DOM

黑客帝国
• 阅读 11605

通过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事件做出反应。
你可以使用事件属性,比如:
<button onclick="func()">点击</button>
你也可以使用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.创建新的 <p> 元素
2.创建文本节点
3.向已有的元素追加新元素
当然上面也可以不创建新的元素,直接添加到已有的元素中,比如:
var eleNode = document.createTextNode('这是新段落');
document.getElementById('div1').appendChild(eleNode);
常用的dom对象方法:
原生JS操作DOM

在html dom(文档对象模型)中,每个部分都是节点:
文档本身是文档节点
所有 HTML 元素是元素节点
所有 HTML 属性是属性节点
HTML 元素内的文本是文本节点
注释是注释节点
在html dom中,element对象表示html元素,下面这些属性和方法可用于所有HTML元素上。
原生JS操作DOM
原生JS操作DOM
原生JS操作DOM

点赞
收藏
评论区
推荐文章
凝雪探世界 凝雪探世界
4年前
js-Answers一
JavaScript的组成JavaScript由以下三部分组成:1.ECMAScript(核心):JavaScript语言基础2.DOM(文档对象模型):规定了访问HTML和XML的接口3.BOM(浏览器对象模型):提供了浏览器窗口之间进行交互的对象和方法JS的基本数据类型和引用数据类型
Karen110 Karen110
3年前
一篇文章带你了解JavaScript htmldom 元素
这篇文章将教会大家如何查找和访问网页中的HTML元素。一、找到HTML元素通常,使用JavaScript,想操作HTML元素。要做到这一点,必须先找到元素。有几种方法可以做到这一点。找到DOM中的HTML元素的最简单的方法,是利用元素的id。使用id"intro"找到元素:varmyElementdocument.getElementById("in
Stella981 Stella981
3年前
Javascript核心对象
JavaScript的实现包括以下3个部分:1)核心(ECMAScript):描述了JS的语法和基本对象。2)文档对象模型(DOM):处理网页内容的方法和接口3)浏览器对象模型(BOM):与浏览器交互的方法和接口ECMAScript扩展知识:① ECMAScript是一个标准,JS只是它的一个实现,其他实现包括ActionScript。
Stella981 Stella981
3年前
Javascript基础知识学习(三)
前言:javascript是一种轻量的、动态的脚本语言,我们为什么要使用javascript?对于一个网页的设计,.html用来放置网页的内容,.css则用来设计网页的样式和布局,那么.js它主要是使网页能够产生交互,意思就是能够通过代码动态的修改HTML、操作CSS、响应事件、获取用户计算机的相关信息等。javascript不是所有的浏览器
Stella981 Stella981
3年前
ECMAScript——JavaScript的核心
   JavaScript(简称:JS)是一种动态类型、弱类型的直译式脚本语言。也就是说它的数据类型不需要声明,不同类型之间会隐式转换为被赋值的类型。它不需要编译,直接由浏览器解释执行。JavaScript由ECMAScript(简称:ES)、DOM、BOM三大部分组成:ECMAScript规定了语言的语法和基本对象;DOM(文本对象模型)处理网页的节
Stella981 Stella981
3年前
JavaScript基础
_1,js组成_       核心:ECMAScript标准                 此标准指定了js的基础语法,数据类型,关键字,操作符,对象;       DOM:文档对象模型标准(DocumentobjectModel)         是js针对xm
Stella981 Stella981
3年前
JavaScript的BOM和DOM
1,window对象,所有浏览器都支持window对象,它表示浏览器窗口BOM(browserObjectModel)是指浏览器对象模型,它使JavaScript有能力与浏览器进行"对话".DOM(DocumentObjectModel)是指文档对象类型,通过它,可以访问HTML文档的所有元素window对象客户端JavaScript最高
Stella981 Stella981
3年前
35道面向初中级前端的基础面试题
如需获取完整版229页PDF面试题,请直接滑到文末。1\.什么是同源策略?同源策略可防止JavaScript发起跨域请求。源被定义为协议、主机名和端口号的组合。此策略可防止页面上的恶意脚本通过该页面的文档对象模型,访问另一个网页上的敏感数据。参考资料:浏览器的同源策略(https://www.oschina.
Stella981 Stella981
3年前
Javascript浏览器兼容性
JS<noscript标签早期浏览器都面临一个特殊的问题,即当浏览器不支持JavaScript时如何让页面平稳地退化。对这个问题的最终解决方案就是创造一个<noscript元素,用以在不支持JavaScript的浏览器中显示替代的内容。这个元素可以包含能够出现在文档<body中的任何HTML元素一一<scri
小万哥 小万哥
1年前
DOM(文档对象模型):理解网页结构与内容操作的关键技术
DOM(文档对象模型)定义了一种访问和操作文档的标准。它是一个平台和语言无关的接口,允许程序和脚本动态访问和更新文档的内容、结构和样式。HTMLDOM用于操作HTML文档,而XMLDOM用于操作XML文档。HTMLDOM示例通过ID获取并修改HTML元素的
美凌格栋栋酱 美凌格栋栋酱
5个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(