JavaScript基础2---控制权DOM操作

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

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

前端JavaScript(3）-关于DOM操作的相关案例,JS中的面向对象、定时器、BOM、位置信息

小例子: 京东购物车京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉,就可以实现效果. 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <styl…

前端javascript之BOM、DOM操作、事件

BOM与DOM操作 BOM 浏览器对象模型>>>:使用js操作浏览器 DOM 文档对象模型>>>:使用js操作前端页面 window对象所有浏览器都支持 window 对象.它表示浏览器窗口. *如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 windo…

JavaScript编程：使用DOM操作样式表

6.使用DOM操作样式表: 操纵元素的Style样式属性: background-color:style.backgroundColor color:style.color font:style.font font-family:style.fontFamily font-weight:style.fontWeight …… var obj=document.getElementByI…

JavaScript的BOM、DOM操作、节点以及表格（二）

BOM操作一.什么是BOM BOM(Browser Object Model)即浏览器对象模型. BOM提供了独立于内容而与浏览器窗口进行交互的对象: BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性: 二.BOM常用的对象 Screen对象:尺寸 window.screen; screen.width screen.height screen.availHeight//可用高度 = 可用高度-底部任务栏高度 screen.availWidth//可用宽度 L…

javascript基础学习--HTML DOM

写在前面的话:由于学校没有开过javascript这门课,所以平时用javascript时都是用到什么就去搜什么样的代码,但是在工作中有时候搜来的代码总是有那么点小问题,而当自己想去修改时,却又无从下手,于是决定从基础开始学习javascript 1.查找HTML元素我们使用js操作HTML元素,首先需要找到这个HTML元素,有三种方法可以实现: 通过id找到HTML元素通过标签名找到HTML元素通过类名找到HTML元素 1.通过id查找HTML元素在DOM中查找HTML元素的最简单的方…

JavaScript 基础(四) - HTML DOM Event

HTML DOM Event(事件) HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作(action),比如当用户点击某个 HTML 元素时启动一段 JavaScript.下面是一个属性列表,这些属性可插入 HTML 标签来定义事件动作. onclick // 当用户点击某个对象时调用的事件句柄. ondblclick // 当用户双击某个对象时调用的事件句柄. onfocus // 元素获得焦点. onblur // 元素失去焦点. 应用场景:用于表单验证,用户离开某…

JavaScript对iframe的DOM操作

在IE6.IE7中,我们可以使用 document.frames[ID].document 来访问iframe子窗口中的document对象,可是这是不符合W3C标准的写法,也是IE下独有的方法,在Firefox下却不可以使用,Firefox下使用的是符合W3C标准的 document.getElementById(ID).contentDocument 方法,今天我在写实例的时候,通过IE8进行测试,IE8也是使用的符合W3C标准的 document.getElementById(ID).co…

JavaScript（四）——DOM操作——Window.document对象

一.找到元素: docunment.getElementById("id"):根据id找,最多找一个: var a =docunment.getElementById("id");将找到的元素放在变量中: docunment.getElementsByName("name"):根据name找,找出来的是数组: docunment.getElementsByTagName("name"):根据标签名找,找出来的…

JavaScript（三）——DOM操作一

一.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 二.Window对象操作 1.属性和方法: 属性(值或者子对象): opener:打开当前窗口的源窗口,如果当前窗口是首次启动浏览器打开的,则opener是null. dialogArgument:对话框返回值. 子对象:history,location,document,status,menubar,toolbar等. 方法(函数):事件(事先设置好的程序,被触发).…

jQuery基础知识点（DOM操作）

1.样式属性操作 1)设置样式属性操作 ①设置单个样式: // 第一个参数表示:样式属性名称 // 第二个参数表示:样式属性值 $(selector).css(“color”, “red”); ②设置多个样式(也可以设置单个) // 参数为 {}(对象) $(selector).css({“color”: “red”, “font-size”: “30px”}); 2)获取样式属性操作 // 参数表示要获取的样式属性名称 $(selector).css(“font-si…

JavaScript基础学习(九)—DOM

一.DOM概述 DOM(Document Object Model)文本对象模型. D: 文档,HTML文档或XML文档. O: 对象,document对象的属性和方法. M: 模型. (1)DOM是针对HTML/XML基于树的API. (2)DOM树,节点(node)的层次. (3)DOM把一个文档表示为一棵树. 1.节点及其类型节点(node): 来源于网络,代表网络中的一个连接点.网络是由节点构成的集…

JavaScript基础知识（DOM）

获取元素的方法要操作谁,就要先获取谁: 获取元素 1.document.getElementById:通过ID名来获取元素兼容性: 在IE8以下,会默认把name属性当做id来获取: document : 文档:上下问必须是document get : 获取 element : 元素 By : 通过 Id : ID名字: id 是唯一的:不能重复 var oBox = document.getElementById("box");// {className:""…

Day4 JavaScript（二）dom操作

dom(文档对象模型) 文档结构文档加载,转换为文档对象模型.将所有的标签,文本,属性转换为dom节点,形成一棵dom树. 标签,元素,节点: <a> 标签开始到结束的部分标签,文本,属性节点的访问 //1.获取p节点 var oP = document.getElementById("p1"); //通过id获取 //2.nodelist:节点列表 node:节点 var aInput = document.getElementsByName("user&…

javascript基础学习系列-DOM盒子模型常用属性

最近在学习DOM盒子模型,各种属性看着眼花缭乱,下面根据三个系列来分别介绍一下: client系列 clientWidth :width+(padding-left)+(padding-right)—>和内容溢出无关系 clientHeight:height+(padding-top)+(padding-bottom)—>和内容溢出无关系 clientLeft:左边框的宽度 clientTop:上边框的高度(border[Left/Top]Width) offset系列 offsetParen…

JavaScript基础入门08

目录 JavaScript 基础入门08 DOM 介绍绑定事件给一组元素绑定事件节点节点树节点类型选取文档内容通过id选取元素通过指定的标签名选取元素用指定的css类来选取元素通过name属性来选取元素通过CSS选择器选取元素文档结构和遍历节点对象树API -- 作为节点树的文档元素对象树API -- 作为元素树的文档属性获取和设置HTML属性数据集属性作为Attr节点的属性使用DocumentFragment 小练习 JavaScript 基础入门08 D…

Js之浅谈dom操作

JavaScript之浅谈dom操作 1.理解dom: DOM(Document Object Model ,文档对象模型)一种独立于语言,用于操作xml,html文档的应用编程接口. 怎么说,我从两个角度理解: 对于JavaScript,为了能够使JavaScript操作Html,JavaScript就有了一套自己的dom编程接口. 对于Html,dom使得html形成一棵dom树,类似于一颗家族树一样,一层接一层,子子孙孙. 所以说,有了DOM,在我看来就是相当于JavaScript拿到了钥…

JavaScript--浅谈DOM操作

JavaScript之浅谈DOM操作 1.理解DOM: DOM(Document Object Model ,文档对象模型)一种独立于语言,用于操作xml,html文档的应用编程接口. 怎么说,我从两个角度理解: 对于JavaScript,为了能够使JavaScript操作Html,JavaScript就有了一套自己的dom编程接口. 对于Html,dom使得html形成一棵dom树,类似于一颗家族树一样,一层接一层,子子孙孙. 所以说,有了DOM,在我看来就是相当于JavaScript拿到了钥…

JavaScript基础：DOM操作详解

本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:文档对象模型,操作网页上的元素的API.比如让盒子移动.变色.轮播图等. BOM:浏览器对象模型,操作浏览器部分功能的API.比如让浏览器自动滚动. 事件 JS是以事件驱动为核心…

javascript DOM 操作基础知识小结

经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的. DOM添加元素,使用节点属性 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.…

JavaScript 基础第七天（DOM的开始）

一.引言 JavaScript的内容分为三个部分,这三个部分分别是ECMAScript.DOM.BOM三个部分组成.所谓ECMAScript就是JavaScript和核心基础语法,DOM是文档对象模型,最后剩下的BOM则是浏览器对象模型.这三个部分相辅相成组成了现在的JavaScript. 二.导入前面几天我们学习就是有关有ECMAScript即基础语法部分,从今天开始我们将开始接触文档对象模型,做好准备.let's Go! 三.重点内容 ① 什么是DOM: DOM= Document Obj…

第一百一十六节，JavaScript，DOM操作样式

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

JavaScript基础笔记（八）DOM扩展

DOM扩展一.选择符API Selectors API是由W3C发起制定的一个标准,致力于让浏览器原生支持CSS查询. 一)querySelector() 在Document和Element类型实例中都可以调用它,在Element类型实例中调用时, 只在该元素的后代元素中查找,该方法接收一个CSS选择符号. //取得 body 元素 var body = document.querySelector("body"); //取得 ID 为"myDiv"的元素 var…

【2017-03-28】JS基础、DOM操作

一.JS基础 1.javascript功能 ⑴进行数据运算 ⑵控制浏览器功能 ⑶控制元素的属性.样式.内容 2.javascript位置和格式可以放在html页的任意位置,也可以创建一个以js结尾的文件内,将该文件引用到html页内推荐放在<html></html>后边 <script type="text/javascript"> js脚本语言位置 </script> 3.3个常用对话框 alert("警告内容"…

JavaScript基础（2）-DOM

一.伪数组arguments arguments代表的是实参,有个讲究的地方是:arguments只在函数中使用. 1.返回函数实参的个数:arguments.length,例如: fn(2,4); fn(2,4,6); fn(2,4,6,8); function fn(a,b,c) { console.log(arguments); console.log(fn.length); // 获取形参的个数 console.log(arguments.length); // 获取实参的个数 cons…

jQuery碎语(1) 基础、选择要操作的元素、处理DOM元素

1.基础 jquery对象集: $():jquery对象集合获取jquery对象集中的元素: 使用索引获取包装器中的javascript元素:var temp = $('img[alt]')[0] 使用jquery的get方法获取jquery对象集中的javascript元素:var temp = $('img[alt]').get(0) 使用jquery的eq方法获取jquery对象集中的jquery对象元素: $('img[alt]').eq(0) $('img[alt]').first(…

JavaScript：DOM操作

一.DOM基础DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口).DOM描绘了一个层次化的节点树,运行开发人员添加.移除和修改页面的某一部分.DOM中的三个字母,D(文档)可以理解为整个Web加载的网页文档:O(对象)可以理解为类似Window对象之类的东西,可以调用属性和方法,这里我们说的是document对象:M(模型)可以理解为网页文档的树型结构.1.节点加载HTML页面时,Web浏览器生成一个树型结构,用来表示页面内部结构…