JS DOM---Chapter 1-4

1.JavaScript是一种解释型语言,Web浏览器负责解释&执行;

2.JavaScript是弱类型语言,不需要进行类型声明;

JS变量(var)可以直接赋值而无需事先声明;

a.数组的声明var cc = Array();

b. 对象的声明var cc = Obiect();

创建对象 var cc1 = {name="cc", age=22}; //属性键值对

3.DOM

一份文档Document就是一颗节点树,节点分为不同的类型,如元素节点、属性节点以及文本节点;

1)文档中的每一个节点node都是一个对象object

2)getElementById将返回一个对象,对应着文档中的特定元素节点

3)getElementByTagName和getElementByClassName将返回一个对象数组,对应着文档里的一组特定的元素节点

DOM的工作模式:先加载文档的静态内容,再动态刷新,动态刷新不影响文档的静态内容。对页面内容进行刷新却不需要在浏览器里刷新页面。

4. JS图片库 Demo

在学习Demo的过程中,遇到一个小问题:

<a href="images/flower.png" title="Flower display" onclick="showPic(this);">Flower</a>

触发图片链接时,不仅showPic函数被调用,链接点击的默认行为也会被调用。这样的话,用户还是会被带到新窗口,我们希望阻止这一行为。

在这里,我们需要了解事件处理函数的工作机制:在给某个元素添加了事件处理函数后,一旦事件发生,相应的JavaScript代码就会被执行,被调用的JavaScript代码可以返回一个值,这个值将被传递给那个事件处理函数。

<a href="images/flower.png" title="Flower display" onclick="showPic(this); return false;">Flower</a>

我们加上一个return false;这样onclick事件处理函数所触发的JS代码返回false,onclick事件处理函数就会认为这个链接没有被点击,这个链接的默认行为就没有被触发,用户就不会被带到目标链接窗口。

时间: 2024-10-21 15:49:11

JS DOM---Chapter 1-4的相关文章

JS DOM编程艺术的学习—— JS学习笔记2015-7-5(第76天)

由于看高程3卡住了,所以现在在学习JS DOM编程艺术来巩固基础: 一.在看JS DOM 编程艺术的时候,有个作者提到的方法很实用, 就是在JS中变量和函数的命名方法:  变量的命名方法为使用下划线,比如: var temp_color = ['red','blue']; 函数就使用驼峰法,比如: function current_date(){}; 这样的习惯可以帮助理解,提高可读性,在理解变量和函数名的时候就很方便了: 二.还有个收获就是关于“对象”的理解又加深了 之前对于什么对象的属性,对

js DOM 扩展

1. 选择符API querySelector()          返回匹配的第一个元素,接收一个 CSS 选择符.没有找到返回 null. querySelectorAll()      返回所有匹配的一个 NodeList, 这是一个快照不会动态改变.接收一个 CSS 选择符. mathesSelecttor()      如果调用元素与该选择符匹配,返回true, 否则返回 false. 接收一个 CSS 选择符. 2. 与类相关的扩充 getElementsByClassName()

JS DOM编程艺术——JS图片库—— JS学习笔记2015-7-8(第79天)

DOM是一种适用于多种环境和多种程序设计语言的通用型API. 如果想要把本书(JS DOM编程艺术)学到的DOM技巧运用在web浏览器以外的应用环境里,严格遵守“第1级DOM”能够让你避免与兼容性有关的任何问题: tips:setAttribute是第1级DOM; 图片切换初级js: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/

JS DOM(文档对象模型)与BOM(浏览器对象模型)

在JS中,对DOM(Document Object Model)对象和BOM(Browser Object Model )对象的操作是非常重要的内容.DOM主要包括HTML文档的属性和方法,像对HTML节点的操作,CSS的操作和HTML事件的监听和处理.BOM不要包括浏览器相关的一些属性和方法. DOM知识点1.改变页面的元素和属性a.获取元素的方法:document.getElementById()document.getElementsByTagName()document.getEleme

JS DOM 编程艺术 随笔

DOM 最大的作用就是将整个文档通过节点树来展现.通过类似方法可以获取特定节点,并绑定js方法实现与人的交互. 1.通过dom方法,获取页面的元素(getElementsByTagName/id,通过class(getAttribute))2.获取元素之后,为他们绑定行为(点击/其他)的处理事件3.最后把所有函数绑定到window.onload()函数上面去 onload = function(){function1function2...} plus 小技巧: <a onclick=>函数

js Dom 编程

1. 节点及其类型:  1). 元素节点  2). 属性节点: 元素的属性, 可以直接通过属性的方式来操作.  3). 文本节点: 是元素节点的子节点, 其内容为文本.   2. 在 html 文档的什么位置编写 js 代码?    0). 直接在 html 页面中书写代码.   <button id="button" onclick="alert('hello world');">Click Me!</button>   缺点:    ①.

JS &amp; DOM 对象

22:36 2013/6/4 详情参照W3C文档标准 Browser 对象(顶层对象) DOM Window DOM Navigator DOM Screen DOM History DOM Location HTML DOM 对象 DOM Document DOM Anchor DOM Area DOM Base DOM Body DOM Button DOM Canvas DOM Event DOM Form DOM Frame DOM Frameset DOM IFrame DOM Ima

JS Dom节点操作demo!

通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习 需求:使用js创建一个4*3的表格table. onload = function(){ function c(tagName){ return document.createElement(tagName); } var table = c('table'); var tbody = c('tbody'); table.appendChild(tbody); for(var i = 0;i<4;i++){ var tr = c(

关于React库的纯JS DOM的单向可视化?

[技术讨论]React库据说是用JS模拟了DOM,其可视化是单向流向的,所以性能比DOM要好(DOM的getComputedStyle或者会触发reflow的style获取?),但这不是意味着这个JS DOM需要实现所有的影响layout的CSS属性设置操作? 如果真的实现了的话,岂不是JS完全重新实现了WebCore layout引擎了 其实DOM的本质也是单向的,并不存在一个单独的UI反馈设备,当设置了元素的CSS属性并经过layout排版后,元素的大小位置都是根据一个模型计算出来的,只不过

js DOM优化相关探索

我在这尝试两个方面:-->DOM与js -->DOM与浏览器 (最近在秒味视频上学到不少,哈哈哈) 一.DOM与js 1.js与dom的交互问题 频繁的与dom交互,是一件浪费时间与金钱的事情,这就需要我们尽量改进自己的代码,让我们想做的事情尽量在js中做的差不多了在去跟dom打交道. 下面的小例子就说明了问题: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charse