DOM之度量计算

javascript是可以控制标签元素的位置的. 例如一个提示消息, 跟着鼠标的位置移动.这章节,我们来看看如何获得和计算元素的坐标和他们的位置.前提: CSS盒子模型下面画出了CSS盒子模型:详细的可以查看CSS盒子模型说明.https://www.w3.org/TR/CSS22/学习盒子模型的组成是其他知识点的基础.文档实例我们使用下面的box做演示:代码名称<div id="example">  ## Introduction     The contents. </div>box是绝
吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-04-19 11:01:06.0

DOM之表单和表格的使用

DOM 表单, 表格, 下拉框和其他标签包含额外的简化访问方式. 能够简化代码和可读性, 非常有用.Table: 表格 表格引用到行, 行引用到单元格: 代码名称<table>  <tr> <td>one</td>   <td>two</td>  </tr>  <tr> <td>three</td> <td>four</td> </tr></table><scri
吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-04-18 10:26:42.0

DOM之document.write

document.write方法输出字符串到页面. 这个方法已经去比较古老的方法. 在现代的浏览器中比较少用了. 但是仍旧有它使用的地方.document.write 执行 当文档加载时, 文档中一个脚本中有document.write(text). text将会同种方式渲染.看下面的例子:   代码名称...<script>  document.write('*Hello, there!*')</script>...document.write的内容是没有任何限制的. 它不需要输出有
吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-04-16 10:30:31.0

DOM之文档修改更新

DOM的修改更新可以使页面是动态的. 使用下面的方法描述, 构造新的页面元素且使他们处于活动状态.上面DOM操作方法的描述定义在DOM LEVEL 中.创建元素下面的方法是在DOM创建一个新的元素节点: document.createElement(tag)创建新的DOM元素:var div = document.createElement('div')document.createTextNode(text) 创建新的DOM文本节点:var textElem = document.createTextNode('Robin wa
吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-04-15 12:10:39.0

DOM之Dom元素搜索

大多数时候, 用户触发事件,  我们需要找到和改变页面上的元素. childNodes, children和另外的方法也就能够起到很好的作用, 但是他们只能在相邻的元素之间移动. 其实我们有更多的方式去查找DOM.方法document.getElementById 通过id快速获取元素的一种方法. 下面例子通过document获取 id='infor' 的元素. 不管这个元素在文档的哪个位置, 都会被找到.代码名称<body>  <div id="info">Info</div>&n
吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-04-14 11:44:14.0

DOM之属性(attribute)和自定义对象属性(property)

DOM节点有一些属性和对象属性. 有时候我们会把他们搞混淆, 因为他们是相关联的, 但是他们真的是两个不同的东西.特性 DOM节点是一个对象. 因此它可以存储自定义的对象属性和方法,就像任何的Javascript对象. 下面的例子是指定分配一个对象给document.body的myData对象属性.代码名称document.body.myData = {   name: 'John'}alert(document.body.myData.name) // Johndocument.body.sayHi = function() {&nbs
吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-04-13 11:49:35.0

DOM之节点的基本属性

Dom节点是一个对象, 它包含了关于他自己的属性信息和他的内容. 有些属性是只读的, 有些属性是可以更改的.结构和内容属性nodeType 下面是所有的节点类型. 总共有12种类型节点. 更多的介绍: DOM Level代码名称interface Node {  // NodeType  const unsigned short      ELEMENT_NODE       = 1;  const unsigned short      ATTRIBUTE_NOD
吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-04-13 11:48:22.0

DOM之行走在DOM中

访问DOM都要从document开始. 这个对象提供了一系列的搜索和改变元素的方法.根节点: documentElement 和 bodyDOM的根节点是 document.documentElement.  这个特定的属性用来访问最顶端的HTML标签. 另外的开始点是document.body, 代表了BODY标签.两者作为进入点都是有效的. 但是document.body可以为null.例如, 在HEAD里script脚本访问document.body, 这时候会讲null来代替这个属性的值. 这是自然的, 因为这时候没有BODY
吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-04-13 11:46:06.0

DOM和Events之DOM节点

DOM是作为一个文档树来表现. 文档树是一种父亲与儿子的节点关系, 一个父亲可以有一个或者很多个儿子节点.一个简单的DOM我们从下面的HTML结构开始学习:代码名称<html>   <head>     <title>The title</title>   </head>   <body>      The body   &
吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-03-11 09:31:56.0

Javascript的全局环境

之前我们讲过, 浏览器提供了一系列的全局对象, 供我们控制访问关于时间, 屏幕, 页面, 标签元素, 属性等等相关的信息.全局对象结构每一个全局对象都是属于 window这个对象, 所以我们所说的全局对象其实就是window的属性. window有一系列的属性供我们开发者去访问和处理. 下面是window的结构的一部分: 顶端的window, 就是我们所说的全局对象. DOM, BOM, Javascript知识这三个部分组成这个window. 每一个部分的细节可能都需要我们去了解和学习. HTML5里面还增多了更多的对象, 比如本地存储, Worker, WebSocket等等.
吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-03-09 09:22:33.0