(11)JavaScript之[DOM HTML][DOM CSS]

DOM HTML

 1 //改变HTML输出流
 2 document.write(Date());
 3
 4 //改变HTML的内容
 5 document.getElementById(‘box‘).innerHTML = ‘box‘;
 6
 7 //改变HTML属性
 8 //document.getElementById(id).attribute=new value
 9 document.getElementById(‘gif‘).src = "b.gif";
10
11 console.log(document.getElementById(‘box‘).style);

DOM CSS

 1 //改变CSS样式
 2 //document.getElementById(id).style.property = new style
 3
 4 //使用事件,如 HTML onclick=‘‘
 5
 6 //visibility 不改变布局
 7 document.getElementById(‘button1‘).onclick = function () {
 8     document.getElementById(‘box‘).style.visibility = ‘hidden‘;
 9 };
10
11 document.getElementById(‘button2‘).onclick = function () {
12     document.getElementById(‘box‘).style.visibility = ‘visible‘;
13 };
时间: 2024-10-12 21:44:52

(11)JavaScript之[DOM HTML][DOM CSS]的相关文章

JavaScript(5)——DOM

DOM操作 为了写这一篇随笔真的是费了好多力气,虽然还是写不好.本来是从周一都开始写的,但是周二周三忙着去帮忙招新了,哈哈哈.感觉做自己喜欢的事特别好玩,虽然挺忙的.看着那些小鲜肉,感觉自己真的老了啊.感觉太久没有更博了,学长估计要打我了.恩~不过我还是很开心.这次写的DOM操作,内容有点多也有点乱.理解还是没有那么透彻,不过一点点积累吧,总会有懂的时候.加油! [DOM] DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口).描绘了一个层次化的节点树,允许开发人员添

JavaScript之DOM-9 HTML DOM(HTML DOM概述、常用HTML DOM对象、HTML表单)

一.HTML DOM 概述 HTML DOM 概述 - HTML DOM 定义了用于 HTML 的一系列标准对象,以及访问和处理 HTML 文档的标准方法 - HTML 标签对象化 - 将网页中的每个元素都看作是一个对象 常用 HTML DOM 对象 标准 DOM 与 HTML DOM - HTML 标签对象化 - createElement - appendChild - setAttribute - removeAttribute - nodeName - ... - HTML DOM 提供

轻松学习JavaScript十八:DOM编程学习之DOM简单介绍

一DOM概述 DOM(文档对象模型)是HTML和XML的应用程序接口(API).DOM将把整个页面规划成由节点层级构成的文档. DOM描绘了一个层次化的节点树,执行开发者加入,移除和改动页面的某一部分. HTML或XML页面的每一个部分都 是一个节点的衍生物. 通过DOM.可訪问HTML文档的全部元素. 当网页被载入时.浏览器会创建页面的文档对象模 型,DOM模型被构造为对象的树. DOM是W3C(万维网联盟)的标准.DOM定义了訪问HTML和XML文档的标准."W3C 文档对象模型(DOM)是

JavaScript(第二十天)【DOM操作表格及样式】

DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DOM操作表格和样式的一些知识. 一.操作表格 <table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTML DOM来操作它.(PS:HTML DOM提供了更加方便快捷的方式来操作HTML,有手册). //需要操作的table <table border="1" width="300"

轻松学习JavaScript二十三:DOM编程学习之操作表格

一使用HTML标签创建表格: 代码: <span style="font-size:18px;"><table border="1px"width="300px"> <caption>人员表</caption> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th>

javascript与ECMAScript、DOM、BOM的关系

在初学javascript时,经常会看见javascript dom.ECMAScript等名词,一直不明白,今天查阅了一些资料和评论,简单写一下. JavaScript 的核心 ECMAScript 描述了该语言的语法和基本对象: DOM 描述了处理网页内容的方法和接口: BOM 描述了与浏览器进行交互的方法和接口. ECMAScript 先简单了解javascript的发展历史,在因特网发展的初期,为了减少客户端与服务器的交互(比如表单的验证一类),提高网上冲浪的效率,当时著名的Netsca

javascript基础加固6—-DOM

本节 JavaScript 的 DOM 操作,内容主要包括: 通过 ID.名字.标签名 选取元素: 通过 getAttribute 和 setAttribute 获取和设置元素属性: 通过 parentNode 获取父元素.createElement 动态地创建节点.appendChild 和removeChild 动态地添加或者删除节点. 基本概念 2.1.1 什么是 DOM DOM 是 文档对象模型(Document Object Model)的简称,它的基本思想是把结构化文档(比如 HTM

DOM系列---DOM操作样式

发文不易,若转载传播,请亲注明出处,谢谢! 一.操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有必要检测当前浏览器支持CSS能力的级别. DOM1级实现了最基本的文档处理,DOM2和DOM3在这个基础上增加了更多的交互能力,这里我们主要探讨CSS,DOM2增加了CSS编程访问方式和改变CSS样式信息. DOM一致性检测 功能 版本号 说明 Core 1.0.2.0.3.0 基本的DOM,用于表

Virtual DOM 虚拟DOM的理解(转)

作者:戴嘉华 转载请注明出处并保留原文链接( #13 )和作者信息. 目录: 1 前言 2 对前端应用状态管理思考 3 Virtual DOM 算法 4 算法实现 4.1 步骤一:用JS对象模拟DOM树 4.2 步骤二:比较两棵虚拟DOM树的差异 4.3 步骤三:把差异应用到真正的DOM树上 5 结语 6 References 1 前言 本文会在教你怎么用 300~400 行代码实现一个基本的 Virtual DOM 算法,并且尝试尽量把 Virtual DOM 的算法思路阐述清楚.希望在阅读本

js 字符串转dom 和dom 转字符串

js 字符串转dom 和dom 转字符串 前言: 在javascript里面动态创建标准dom对象一般使用: var obj = document.createElement('div'); 然后再给obj设置一些属性. 但是,在实际使用过程中,有些人可能会想,要是能这样创建标准的dom对象就好了 伪代码:var obj=strToDom('<div id="div_1" class="div1">Hello World!</div>');