js基础八

10个div点击一个div变绿色,其他都为红色,立即执行函数包裹代码防止全局变量产生
选取对象集合
如何实现,给每个div添加事件,循环这个对象集合
(在点击的这个div的时候做判断,判断当前的这个div是否是红色,如果是红色就变为绿色,
把所有div变成绿色,再把当前点击的这个div变成红色(所有div的点颜色赋值为绿色,点击的style的背景颜色赋值为红色)
再点击红色的时候把红色再次变为绿色,把当前div变成绿色
方法二:添加类名的方式

操作元素内容:
innerHTML 设置或获取标签当中的内容( 识别HTML )设置或转换成字符串,保存到innerHTML中去 赋值的话会修改标签中的内容:div.innerHTML = ‘hello,world‘按照标签的写法写的话就会是一个标准的标签
innerContent(ie浏览器中中无法使用,ie中没有这个属性)常规浏览器获取纯文本
innerText ie浏览器中使用这个,获取纯文本

以下判断是否是ie浏览器
if(div.textContent !== undefined){
var text = div.textContent;
}else{
var text = div.innerText;
}

alert(text)

【不能再判断中使用函数】

css层叠样式表

document.styleSheets回样式表的集合
document.styleSheets[index].rules 返回样式表中选择器的集合
document.styleSheets[index].rules[index].style.attr查找样式表中的样式属性(ie chrom

元素最终的样式

来获取当前对象的最终样式:window.getComputedStyle(object,null).attr ( W3C )
获取当前对象的尺寸:clientWidth/clientHeight: 元素可视部分的高度和宽度(width + padding) ,也就是包含了padding,不包含border、margin
offsetWidth/offsetHeight: 元素实际的高度和宽度(width+padding+border),也就是包含border和padding

DOM(稳当对象模型 标签里面的文本也会看成一个节点

节点的关系,类似家族有父节点和子节点,但是子节点不一定会有,比如文本就不会有子节点
如何获取节点对象:

通过元素获取节点的四种方式:
document.getElementById("elementID");获取标签元素节点
document.getElementsByTagName("tagname");标签名的对象的集合
document.getElementsByName("name");名称的对象的集合
document.getElementsByClassName("classname");类名的元素集合

元素节点是可以直接获取的
somNode.parentNode任何节点的父节点都可以是这个表示,当前节点的父节点
childNode 子节点 包含所有节点,文本节点也包含在内的,比如空格为txt节点
children 只包含标签节点,不包含text节点
firstchild 当前元素的所有子节点中的第一个子节点 打印第一个子节点firstchild[],括号里写角标
获取最后一个子节点 lastChild
nextSibling获取兄弟节点 换行符

操作节点: 以下四个方法属于父元素的方法,都是剪切过去的
appendChild添加子元素

appendChild把标签插入到另一个标签的子元素的末尾
var div = document.getElementById("div");
var p = document.getElementById("p");
div.appendChild(p)

insertbefore(childNode,nextNode)——要插入的节点,参照的节点,同一个节点只能在dom树中出现一次,之前位置就没有了 如果第二个参数为null的话,默认添加到末尾(剪切操作

replaceChild(p,select);替换节点(剪切操作
removeChild移除节点

$0
sources 断点调试

cloneNode(isDeepcopy) 属于复制的方法 isDeepcopy:深度复制,当isDeepcopy的值是true则是一个深度复制,当isDeepcopy的值是fluse则是一个浅度复制
deeplist.
document.createElement(tagName)通过标签名创建一个元素节点。接受一个字符串参数,这个字符串即为标签名字

时间: 2024-10-29 19:06:31

js基础八的相关文章

JS基础(一)

01-JS中的变量和输入输出 一.[使用JS的三种方式] 1.在html标签中直接内嵌js.(不提倡使用,不符合w3c关于内容与行为分离的要求) 2.在html页面中使用<script></script>包裹js代码.(Script标签可以放到页面的任何位置) <script type="text/javascript"> js代码 </script> 3.引入外部的js文件,使用script标签 <script type=&quo

Bootstrap &lt;基础八&gt;图片

原文:Bootstrap <基础八>图片 Bootstrap 提供了三个可对图片应用简单样式的 class: .img-rounded:添加 border-radius:6px 来获得图片圆角. .img-circle:添加 border-radius:500px 来让整个图片变成圆形. .img-thumbnail:添加一些内边距(padding)和一个灰色的边框. 请看下面的实例演示: <!DOCTYPE html> <html> <head> <

js基础梳理-如何理解作用域和作用域链?

本文重点是要梳理执行上下文的生命周期中的建立作用域链,在此之前,先回顾下关于作用域的一些知识. 1.什么是作用域(scope)? 在<JavaScritp高级程序设计>中并没有找到确切的关于作用域的定义,只是在"4.2执行环境及作用域"中简单说了下执行环境(execution context)的概念.而执行环境其实就是之前博客:js基础梳理-究竟什么是执行上下文栈(执行栈),执行上下文(可执行代码)?中的执行上下文. 而在<JavaScript权威指南>中,对作

【 js 基础 】Javascript “继承”

是时候写一写 "继承"了,为什么加引号,因为当你阅读完这篇文章,你会知道,说是 继承 其实是不准确的. 一.类1.传统的面向类的语言中的类:类/继承 描述了一种代码的组织结构形式.举个例子:"汽车"可以被看作是"交通工具"的一种特例.我们可以定义一个 Vehicle 类和一个 Car 类来对这种关系进行描述.Vehicle 的定义可能包含引擎.载人能力等,也就是 所有交通工具,比如飞机.火车和汽车等都有的通用的功能描述.在对 Car 类进行定义的

js基础--javascript基础概念之语法

掌握一门语言 必须先掌握它的语法! javascript 的语法和C.Java.Perl 的语法有些相似.但是比它们更加宽松. javascript 中的一切都是严格区分大小写的.例如变量: demo 和 Demo 两个变量是完全不同的. javascript 标示符,所谓标示符 是指 变量.函数.属性 的名字或函数的参数.标示符的格式是按照以下规则组合的一个或多个字符. 1.第一个字符必须是字母,下划线,或 $ 符号. 2.其他字符可以是字母.下划线.$ . 或数字. 注意 不能把关键字 保留

js基础知识总结(2016.11.1)

js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避免全局变量和方法(命名空间,闭包,面向对象),模块化(seaJs,requireJs) 常用内部类:Data Array Math String HTML属性,CSS属性HTML:属性.HTML属性="值":CSS:对象.style.CSS属性="值"; class和f

JS基础(超级简单)

1     JS基础(超级简单) 1.1 数据类型 1.1.1   基本类型: 1)        Number:特别注意:NaN的检测方法:Nan!=NaN;或者使用isNaN方法 2)        string 3)        boolean 4)        null 5)        undefined 1.1.2   复杂类型 object:date,array,function 1.2 变量 var 变量名=值 变量的作用域:1.全局:以页面为单位.2局部:以函数为单位.

js基础--javascript基础概念之数组(二)

js基础--javascript基础概念之数组 数组栈方法 数组可以像栈一样.栈是一种先进后出的数据结构,最先添加的数据最后一个出来.栈方法添加数据也称为 推入  移除数据称为 弹出. js为数值栈方法提供了 push()   和  pop() ;  两个方法. push() push() 方法接受参数就是你要添加进入到数组的值.push()  方法会将他们逐一添加到数组的末尾  数组的length属性会跟着更新数据. *push(多个数组元素值) 返回的修改后的数组长度 var array =

js基础--javascript基础概念之数组

js基础--javascript基础概念之数组 在ECMAScript 中 ,数组是很常用的数据类型,js中的数组和其他很多语言的数组有明显的区别.js的数组可以保持任何类型的数值,一个数组中可以保存着多个不同类型的数值.js数组大小(长度)是可以调整的.可以随着数据的添加自动增长数组长度. 创建数组: 一.数组字面量 数组字面量由一对包含数组项的方括号[]表示. var array = [ 'kin', 'cheong', 'change', 'hello', 'haha', 'hi' ];