JS和Document
对象
1.new var obj = new Object();
2.函数声明对象
function Human () {};
3.var obj = {}; 大括号 就是对象
var obj = {};
obj.name = '张三' ;
obj.age = 20;
obj.say = function () {};
4.var obj = {}; 大括号内放入属性 用:
var obj = {
name:'张三',
age:20,
sex:0,
run:function () {}
}
JSON
存储和和交换信息的语法
JSON 是轻量级的文本数据交换格式
JSON 独立于语言和平台 :
JSON使用JavaScript语法来描述数据对象
JSON解析器和JSON库支持许多不同的编程语言 :
目前非常多的动态编程语言,如PHP/JSP/.NET等都支持JSON.
格式
数据类型 :
JSON数字 : {"age":20}
JSON布尔 : {"flag":true}
JSON null: {"name":null}
JSON对象 : {"name":"lisi","age":20}
JSON数组 :
{
"courses":[
{"name":"JavaSE","time":20},
{"name":"HTML","time":1},
{"name":"CSS","time":2},
{"name":"JavaScript","time":3}
]
}
转换
JS对象和json类型的对象都可以通过 JSON.stringify() 转换为字符串,
JSON.parse() 方法将 数据/文本 转换为 JavaScript 对象。
Document
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)
dom元素和node(节点)的区别
dom元素指的是页面的标签,通过任意一个dom元素的关系可以找到当前页面其他任意的一个dom元素;
node节点指的是页面的任意元素(页面的每个东西都是节点),
其中
标签 换行符 注释 空格 属性 标签内容等都可以被当做node节点
当文档/页面加载完毕后才会执行onload函数
通过class选中 而选取ID 和 标签名 都很少用
1.id选择
document.getElementById();
2.通过标签名选中
document.getElementsByTagName();
3.通过class选中
document.getElementsByClassName();
4.通过标签的name属性来获取的对象集合
document.getElementsByName() ;
最常用!! ie6,7,8不支持! 而且ie8不支持console.log()
注意 : getElementsByClassName()函数的返回值是一个数组
添加事件的两种方式
方式1 :通过下标获取第一个元素
方式2 : 在标签中定义事件,事件触发函数
事件的三要素
1.谁(事件对象)
2.什么事件(操作:点击?聚焦?离焦?等)
3.怎么处理(效果怎么展示)
input 获取内容使用value,option也是使用value属性来获取值
value 这个属性只有input和option两个标签有这个属性.
innerHTML属性是来给标签设定展示给用户的内容
innerHTML和innerText
把字符串内容转换number 来进行计算
num1 = parseInt(num1);
num2 = parseInt(num2);
JS和Document的更多相关文章
- JS function document.onclick(){}报错Syntax error on token "function", delete this token
JS function document.onclick(){}报错Syntax error on token "function", delete this token func ...
- js 节点 document html css 表单节点操作
js 节点 document html css 表单节点操作 节点操作:访问.属性.创建 (1)节点的访问:firstChild.lastChild.childNodes.parentChild(父子 ...
- JS 中document.URL 和 window.location.href 的区别
实际上,document 和 window 这两个对象的区别已经包含了这个问题的答案. document 表示的是一个文档对象,window 表示一个窗口对象. 一个窗口下面可以有很多的documen ...
- 原生js方法document.getElementsByClassName在ie8及其以下的兼容性问题
document.getElementsByClassName在ie8及其以下浏览器的兼容性问题,在ie8及其以下浏览器中不能使用,针对这个问题,下面给出详细的解决方法,感兴趣的朋友可以参考下 ...
- JS中的DOM对象及JS对document对像的操作
DOM对象 windows:属性:opener(打开者) 方法:open().close(),setTimeout().setInterval()... location:属性:href 方法:rel ...
- JS的document.links函数使用示例
? <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title&g ...
- JS的document.images函数使用示例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JS的document.anchors函数使用示例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JS的document.all函数使用示例
JS的document.all函数虽然被document.getElement......代替,但是在使用中还是较为常见,下面为大家详细介绍下具体的使用示例: 一: document.all是页面内所 ...
- JS function document.onclick(){}报错Syntax error on token "function", delete this token - CSDN博客
原文:JS function document.onclick(){}报错Syntax error on token "function", delete this token - ...
随机推荐
- JVM 频繁 FULL GC 快速排查整理
在分享此案例前,先聊聊哪些场景会导致频繁Full GC: 内存泄漏(代码有问题,对象引用没及时释放,导致对象不能及时回收)死循环大对象程序执行了System.gc() 尤其是大对象,80%以上的情况就 ...
- Android和adb命令
一.名词解释 1.SDK:是软件开发工具包 2.activity(活动):驱使软件运行的一段程序,软件系统和用户进行交互的界面叫一个活动 二.adb命令 1.查看连接的设备:adb devices 2 ...
- Rancher 系列文章-Rancher 升级
概述 之前在 天翼云上用 4 台机器安装了一个 1 master(及 etcd) 3 node 的 K3S 集群,并在其上使用 Helm 安装了 Rancher 2.6.3 版本. 前几天发现 Ran ...
- 全网最详细中英文ChatGPT-GPT-4示例文档-智能AI写作从0到1快速入门——官网推荐的48种最佳应用场景(附python/node.js/curl命令源代码,小白也能学)
目录 Introduce 简介 setting 设置 Prompt 提示 Sample response 回复样本 API request 接口请求 python接口请求示例 node.js接口请求示 ...
- 中心极限定理的模拟—R实现
中心极限定理,是指概率论中讨论随机变量序列部分和分布渐近于正态分布的一类定理.这组定理是数理统计学和误差分析的理论基础,指出了大量随机变量近似服从正态分布的条件.它是概率论中最重要的一类定理,有广泛的 ...
- [MyBatis]问题:ERROR StatusLogger No log4j2 configuration file found. Using default configuration: logging only errors to the console.
错误信息 ERROR StatusLogger No log4j2 configuration file found. Using default configuration: logging onl ...
- etcd/raft选举源码解读
ETCD-raft笔记 0. 引言 该篇博客基于etcd v3.5.7版本,首先会简单介绍etcd/raft对Raft选举部分的算法优化,然后通过源码分析etcd/raft的选举实现. 1. etcd ...
- Linux环境变量及其配置
为什么要说这个呢? 本人喜欢使用Linux开发(工作是个硬要求,有些时候不能使用Linux,比如我上一个工作.但是有些时候呢,工作环境比较开放,我可以选择我喜欢的系统进行工作:比如我现在的工作.红红火 ...
- 景顺长城基于 Apache APISIX 在金融云原生的生产实践
本文介绍了景顺长城在金融云原生架构演进中选择 APISIX 作为网关工具的技术细节,同时分享了使用 APISIX 的实践细节,并对 APISIX 的未来展望进行了探讨. 作者李奕浩,景顺长城信息技术部 ...
- Vue中实现数据列表无缝轮播
类似这种滚动轮播效果 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta char ...