JavaScript笔记
定义:
JavaScript是一种基于对象和事件驱动的,并具有安全性能的脚本语言.
特点:
01.向HTML页面中添加交互行为
02.脚本语言,语法跟java类似
03.解释性语言,边执行边解释
组成:
01.ECMAScript
基本语法结构:
<script type = "text/javascript">
<!--
javascript语句
-->
</script>
- 1
- 2
- 3
- 4
- 5
执行原理:
01.浏览器输入–>02.发送包含javascript的请求页面–>03.服务器解析HTML标签和javascript(减轻服务器压力)–>04.从服务器下载包含javascript的页面(返回响应).
网页中引用javascript的三种方式
01.使用< script>标签(内部样式)
//例如
</script>
<script src="js/" type="text/javascript" charset="utf-8">
</script>
- 1
- 2
- 3
- 4
02.直接写在HTML标签里(行内/内嵌样式)
<!-- 行内 事件驱动 点击事件:当你点击标签 触发事件 -->
<h1 onclick="javascri pt:alert('清除缓存成功!')">今天学习JavaScript了</h1>
//写在了h1标签里面,注意javascript是基于事件驱动的
- 1
- 2
- 3
03.外部js文件(外部样式)
跟内部样式一样,只不过多了一个引用过程
核心语法
变量/数据类型/数组/运算符号/控制语句/注释/输入输出/语法约定
ECMAScript
01.变量的声明
//先声明后赋值,后面的;可加可不加
var width(变量名);
width = 5;
//也可以边声明边赋值
var width = 5;
//也可以直接赋值(弱类型语言的优势),但不推荐
//同时声明并多个赋值
var a,b,c = 10;
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
02.数据类型
01. number 整数,浮点数…
02. string 字符串类型’'或""
03. null 空值(有赋值,但是赋的值为空)
04. undefined (没有初始值时,值等于null,但是两者并不相同)
05. object javascript中的对象`数组和null
true或false
js 的数据类型是根据你所赋值而决定的
alert (typeof 变量名) – 弹窗查看变量的数据类型
("") – 输出语句
03.数组
– 设置或返回数组中元素的数目
() – 把数组的所有元素放入一个字符串，通过一个的分隔符进行分隔
() – 对数组排序
() – 向数组末尾添加一个或更多元素，并返回新的长度
<script type="text/javascript">
// 数组的应用
// 创建数组
/* var arr = new Array(4)
arr[0] = 1
arr[1] = 2
arr[2] = 3
arr[3] = 4
arr[4] = 5
alert(arr[4]) */
// 第二种创建方式
/* var arr = new Array("zhangsan","lisi","wangwu")
for (var i = 0; i < ; i++) {
alert(arr[i])
} */
// var arr = Array(1,2,3,4,6)
// for (var i = 0; i < ; i++) {
// alert(arr[i])
// }
// 数组的方法
// 将数组种的元素拼接成字符串
/* var arr = Array["今天","天气","真凉爽"]
("?") // 往数组种添加元素
alert(()) */
// 排序
var arr = Array(3,5,72,2,6,4,76)
arr.sort()
for (var i = 0; i < arr.length; i++) {
alert(arr[i])
}
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
对象
字符串对象.length = 变量中字符串的计数(长度)
例如:
var str = "this is JavaScript"
var strLength = str.length //长度strLength = 18
- 1
- 2
运行
方法:
/*charAt(index)--返回在指定位置的字符
index Of(str,index)--查找某个指定的字符串在字符串中首次出现的位置
substring(index 1, index 2)--返回位于指定索引index 1和index 2之间的字符串，并且包括索引index 1对应的字符,不包括索引index 2对应的字符
split(str)--将字符串分割为字符串数组*/
//例:
<script type="text/javascript">
// String类型
var str = "你的,商品,注册,商标了吗?";
// 获取指定下标的字符
//alert((2))
// 获取注字下标
//alert(("注"))
//获取商品两个字
//alert((2,4))
// 获取字符串长度
//alert()
// 字符串拆分
var arr = str.split(",")
// 遍历数组
for (var i = 0; i < arr.length; i++) {
alert(arr[i])
}
</script>
//例题:统计里面包含a跟A的字符串
<script type="text/javascript">
//01.创建字符串数组
var strArr = ["America","Greece","Britain","Canada","China","Egypt"];
//定义总计的变量
var count = 0;
document.write("在以下字符串中:"+"<br>");
//for循环遍历
for(var i in strArr){
document.write(strArr[i]+"<br>");
//设置条件字符串中a跟A的下标不等于-1
if(strArr[i].indexOf("a")!=-1 || strArr[i].indexOf("A")!=-1){
count++;
}
}
document.write("共有"+count+"个字符串中包含字母a或A！");
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
05.运算符号
<script type="text/javascript">
var a
var b = null
alert(a === b) // == :比较值 全等于(===) 比较地址值
</script>
- 1
- 2
- 3
- 4
- 5
06.逻辑语句
输入: prompt("请输入你循环的次数:")
输出: alert("恭喜你,及格了!") 或者 document.write(strArr[i]+"<br>");
<script type="text/javascript">
// var i = prompt("请输入你循环的次数:")
// 字符串转数值
//i = parseInt(i)
//if条件语句
/* if(i < 70){
alert("不及格,需要补考,下周一!")
}else{
alert("恭喜你,及格了!")
} */
//switch多分支语句
/* switch (i) {
case 1:
alert("一年级")
break;
case 2:
alert("二年级")
break;
default:
break;
} */
//while循环
/* while (i > 0){
("hello "+i)
i--
} */
// for in
var a= new Array("h","e","l","l","o")
// 根据下标遍历
/* for (var index in a) {
(a[index])
} */
// 跟增强for类似
for (var item of a) {
document.write(item)
}
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
07.调试程序
打开浏览器->源代码->打断点 刷新浏览器 单步运行
alert()
08.函数
//parseInt,parseFloat与isNaN
<script type="text/javascript">
//系统函数
var str = "4"
// 转换成数值类型(输出数值类型)
alert(typeof parseInt(str))//转换成整形
alert(typeof parseFloat(str))//转换成浮点型
// 判断是否是数值类型 isNAN is not a number:是不是一个数值
if(isNaN(str)){ //true:字符串 false:数值
alert("字符串")
}else{
alert("数值")
}
</script>
//定义与调用有参无参函数
<h1 onclick="toFun()">点我输入5次好好学习</h1>
//onelick-->点击触发事件
<script type="text/javascript">
// 函数 的语法 function 函数名(参数列表){代码 return}
function toFun(){//(有参函数)
for (var i = 0; i < 5; i++) {
// 输出的是文档对象 会替换掉之前的文档对象
document.write("<p>好好学习天天向上</p>")
}
}
// 定义函数计算两个数的加法(无参函数)
function add(num1,num2){
return num1+num2
}
alert(add(6,8))
</script>
//作用域
//看谁大谁小,括号跟语法
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
09.事件
| 属性 | 当以下情况发生时，出现此事件 | FF | N | IE |
|---|---|---|---|---|
| onabort | 图像加载被中断 | 1 | 3 | 4 |
| onblur | 元素失去焦点 | 1 | 2 | 3 |
| onchange | 用户改变域的内容 | 1 | 2 | 3 |
| onclick | 鼠标点击某个对象 | 1 | 2 | 3 |
| ondblclick | 鼠标双击某个对象 | 1 | 4 | 4 |
| onerror | 当加载文档或图像时发生某个错误 | 1 | 3 | 4 |
| onfocus | 元素获得焦点 | 1 | 2 | 3 |
| onkeydown | 某个键盘的键被按下 | 1 | 4 | 3 |
| onkeypress | 某个键盘的键被按下或按住 | 1 | 4 | 3 |
| onkeyup | 某个键盘的键被松开 | 1 | 4 | 3 |
| onload | 某个页面或图像被完成加载 | 1 | 2 | 3 |
| onmousedown | 某个鼠标按键被按下 | 1 | 4 | 4 |
| onmousemove | 鼠标被移动 | 1 | 6 | 3 |
| onmouseout | 鼠标从某元素移开 | 1 | 4 | 4 |
| onmouseover | 鼠标被移到某元素之上 | 1 | 2 | 3 |
| onmouseup | 某个鼠标按键被松开 | 1 | 4 | 4 |
| onreset | 重置按钮被点击 | 1 | 3 | 4 |
| onresize | 窗口或框架被调整尺寸 | 1 | 4 | 4 |
| onselect | 文本被选定 | 1 | 2 | 3 |
| onsubmit | 提交按钮被点击 | 1 | 2 | 3 |
| onunload | 用户退出页面 | 1 | 2 | 3 |
//示例:
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 文件域 文本域 下拉框 文本框 只要内容被改变都会触发事件-->
你的择偶标准:
<select name="name" onchange="tochange()" >
<option checked value="1">大波浪</option>
<option value="2">长头发</option>
<option value="3">大长腿</option>
</select>
</head>
<body onkeydown="tokeydown(event)">
<!-- <img src="img/" onmouseover="toOver()" > -->
<button >注册</button>
<script type="text/javascript">
// onchange : 域的内容被改变触发.
// onload : 页面加载完触发的事件.
// onclick: 鼠标点击触发.
// mouseover : 鼠标悬浮其上触发事件.
// keydown : 当某个键被按下的时候触发 键盘上的每个键都有对应的数值
// function toOver(){
// alert("哒咩,不可以这样!")
// }
// event事件对象 携带这键值
function tokeydown(event){
if(event.keyCode == 13){
alert("敲了回车键")
}
}
function tochange(){
alert("更改了你的求偶意向!")
}
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
BOM
window对象(全)
Window 对象
Window 对象表示浏览器中打开的窗口。
如果文档包含框架（ 或 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。
注意： 没有应用于 window 对象的公开标准，不过所有浏览器都支持该对象。
Window 对象属性
| 属性 | 描述 |
|---|---|
| closed | 返回窗口是否已被关闭。 |
| defaultStatus | 设置或返回窗口状态栏中的默认文本。 |
| document | 对 Document 对象的只读引用。(请参阅对象) |
| frames | 返回窗口中所有命名的框架。该集合是 Window 对象的数组，每个 Window 对象在窗口中含有一个框架。 |
| history | 对 History 对象的只读引用。请参数 History 对象。 |
| innerHeight | 返回窗口的文档显示区的高度。 |
| innerWidth | 返回窗口的文档显示区的宽度。 |
| localStorage | 在浏览器中存储 key/value 对。没有过期时间。 |
| length | 设置或返回窗口中的框架数量。 |
| location | 用于窗口或框架的 Location 对象。请参阅 Location 对象。 |
| name | 设置或返回窗口的名称。 |
| navigator | 对 Navigator 对象的只读引用。请参数 Navigator 对象。 |
| opener | 返回对创建此窗口的窗口的引用。 |
| outerHeight | 返回窗口的外部高度，包含工具条与滚动条。 |
| outerWidth | 返回窗口的外部宽度，包含工具条与滚动条。 |
| pageXOffset | 设置或返回当前页面相对于窗口显示区左上角的 X 位置。 |
| pageYOffset | 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。 |
| parent | 返回父窗口。 |
| screen | 对 Screen 对象的只读引用。请参数 Screen 对象。 |
| screenLeft | 返回相对于屏幕窗口的x坐标 |
| screenTop | 返回相对于屏幕窗口的y坐标 |
| screenX | 返回相对于屏幕窗口的x坐标 |
| sessionStorage | 在浏览器中存储 key/value 对。 在关闭窗口或标签页之后将会删除这些数据。 |
| screenY | 返回相对于屏幕窗口的y坐标 |
| self | 返回对当前窗口的引用。等价于 Window 属性。 |
| status | 设置窗口状态栏的文本。 |
| top | 返回最顶层的父窗口。 |
Window 对象方法
| 方法 | 描述 |
|---|---|
| alert() | 显示带有一段消息和一个确认按钮的警告框。 |
| atob() | 解码一个 base-64 编码的字符串。 |
| btoa() | 创建一个 base-64 编码的字符串。 |
| blur() | 把键盘焦点从顶层窗口移开。 |
| clearInterval() | 取消由 setInterval() 设置的 timeout。 |
| clearTimeout() | 取消由 setTimeout() 方法设置的 timeout。 |
| close() | 关闭浏览器窗口。 |
| confirm() | 显示带有一段消息以及确认按钮和取消按钮的对话框。 |
| createPopup() | 创建一个 pop-up 窗口。 |
| focus() | 把键盘焦点给予一个窗口。 |
| getSelection() | 返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。 |
| getComputedStyle() | 获取指定元素的 CSS 样式。 |
| matchMedia() | 该方法用来检查 media query 语句，它返回一个 MediaQueryList对象。 |
| moveBy() | 可相对窗口的当前坐标把它移动指定的像素。 |
| moveTo() | 把窗口的左上角移动到一个指定的坐标。 |
| open() | 打开一个新的浏览器窗口或查找一个已命名的窗口。 |
| print() | 打印当前窗口的内容。 |
| prompt() | 显示可提示用户输入的对话框。 |
| resizeBy() | 按照指定的像素调整窗口的大小。 |
| resizeTo() | 把窗口的大小调整到指定的宽度和高度。 |
| scroll() | 已废弃。 该方法已经使用了 scrollTo() 方法来替代。 |
| scrollBy() | 按照指定的像素值来滚动内容。 |
| scrollTo() | 把内容滚动到指定的坐标。 |
| setInterval() | 按照指定的周期（以毫秒计）来调用函数或计算表达式。 |
| setTimeout() | 在指定的毫秒数后调用函数或计算表达式。 |
| stop() | 停止页面载入。 |
| postMessage() | 安全地实现跨源通信。 |
BOM: 浏览器对象模型,他提供了独立于内容的、可以与浏览器窗口进行互动的对象结构
BOM可实现功能:
01. 弹出新的浏览器窗口
2. 移动、关闭浏览器窗口以及调整窗口的大小
3. 页面的前进、后退
- 1
- 2
- 3
html是由bom跟dom组成
tagName:标签名
01.常用属性:
-
history : 有关客户访问过的URL的信息
-
location ; 有关当前URL的信息
例如:
window.属性名="属性值" window.location="http：//"；//表示跳转到课工场首页示例- 1
- 2
02.常用的方法:
| 方法 | 描述 |
|---|---|
| prompt() | 显示可提示用户输入的对话框 |
| alert() | 显示带有一个提示信息和一个确定按钮的警示框 |
| confirm() | 显示一个带有提示信息、确定和取消按钮的对话框 |
| close() | 关闭浏览器窗口 |
| open() | 打开一个新的浏览器窗口， 加载给定URL所指定的文档 |
| setTimeout() | 在指定的毫秒数后调用函数或计算表达式 |
| setInterval() | 按照指定的周期(以毫秒计)来调用函数或表达式 |
| getElementById() | 返回带有指定 ID 的元素。 |
| getElementsByTagName() | 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。 |
| getElementsByClassName() | 返回包含带有指定类名的所有元素的节点列表 |
| appendChild() | 把新的子节点添加到指定节点。 |
| removeChild() | 删除子节点。 |
| replaceChild() | 替换子节点。 |
| insertBefore() | 在指定的子节点前面插入新的子节点。 |
| createAttribute() | 创建属性节点。 |
| createElement() | 创建元素节点。 |
| createTextNode() | 创建文本节点。 |
| getAttribute() | 返回指定的属性值。 |
| setAttribute() | 把指定属性设置或修改为指定的值。 |
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#close{
width: 100px;
height: 50px;
background: darkgrey;
}
</style>
</head>
<body>
<h1 onclick="togo()" >去下一个历史记录</h1>
<h1 onclick="welcome()">点我进入欢迎界面</h1>
<div id="close" onmouseover="toClose()">
点我关闭浏览器
</div>
<div id="open" onmouseover="toOpen()">
千万不要点 点了你后悔
</div>
<h1 onclick="javascript:=''">点我去课工场</h1>
<button type="button" onclick="toClick()">删除</button>
<script type="text/javascript">
function toClick(){
// 提示框
var flag = confirm("你确定要删除吗???")
if(flag){
var flag = confirm("你确定要删除吗???")
if(flag){
var flag = confirm("你确定要删除吗???")
}
}
}
function toClose(){
close()// 关闭浏览器
}
// function toOpen(){
// open("","baidu","",true)
// }
function welcome(){
location.href =""
}
function togo(){
history.forward()
}
</script>
d a </body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1 onclick="toback()">点我返回上一个界面</h1>
<script type="text/javascript">
function toback(){
history.back()
}
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
方法:
定义和用法
open() 方法打开一个输出流来收集 () 或 () 方法输出的内容。
调用 open() 方法打开一个新文档并且用 write() 方法设置文档内容后，必须记住用 () 方法关闭文档，并迫使其内容显示出来。
**注意：**如果目标文件已经存在，它将被清除。如果这个方法没有参数，会显示一个新窗口(about:blank)。
语法
(MIMEtype,replace)
| 参数 | 描述 |
|---|---|
| MIMEtype | 可选。规定正在写的文档的类型。默认值是 “text/html”。 |
| replace | 可选。当此参数设置后，可引起新文档从父文档继承历史条目。 |
| 属性名 | 说明 |
|---|---|
| height、width | 窗口文档显示区的高度、宽度。以像素计 |
| left、top | 窗口的x坐标、y坐标。以像素计 |
| toolbar =yes|no|1|0 | 是否显示浏览器的工具栏。默认是yes |
| scrollbars =yes|no|1|0 | 是否显示滚动条。默认是yes |
| location =yes|no|1|0 | 是否显示地址地段。默认是yes |
| status =yes|no|1|0 | 是否添加状态栏。默认是yes |
| menubar =yes|no|1|0 | 是否显示菜单栏。默认是yes |
| resizable =yes|no|1|0 | 窗口是否可调节尺寸。默认是yes |
| titlebar =yes|no|1|0 | 是否显示标题栏。默认是yes |
| fullscreen =yes|no|1|0 | 是否使用全屏模式显示浏览器。默认是no。处于全屏模式的窗口必须同时处于剧院模式 |
方法:
定义和用法
close() 方法用于关闭一个由 方法打开的输出流，并显示选定的数据。
语法
()
对象
History 对象包含用户（在浏览器窗口中）访问过的 URL。
History 对象是 window 对象的一部分，可通过 属性对其进行访问。
注意： 没有应用于History对象的公开标准，不过所有浏览器都支持该对象。
history.back() --等价于-->history.go(-1)//浏览器中的“后退”
history.forward() --等价于-->history.go(1)//浏览器中的“后退”
- 1
- 2
- 3
History 对象属性
| 属性 | 说明 |
|---|---|
| length | 返回历史列表中的网址数 |
History 对象方法
| 方法 | 说明 |
|---|---|
| back() | 加载 history 列表中的前一个 URL |
| forward() | 加载 history 列表中的下一个 URL |
| go() | 加载 history 列表中的某个具体页面 |
示例:
对象
Location 对象包含有关当前 URL 的信息。
Location 对象是 window 对象的一部分，可通过 **.**xxx 格式的相关属性对其进行访问。
注意： 没有应用于Location对象的公开标准，不过所有浏览器都支持该对象。
Location 对象属性
| 属性 | 描述 |
|---|---|
| hash | 返回一个URL的锚部分 |
| *host | 返回一个URL的主机名和端口 |
| *hostname | 返回URL的主机名 |
| *href | 返回完整的URL |
| pathname | 返回的URL路径名。 |
| port | 返回一个URL服务器使用的端口号 |
| protocol | 返回一个URL协议 |
| search | 返回一个URL的查询部分 |
Location 对象方法
| 方法 | 说明 |
|---|---|
| assign() | 载入一个新的文档 |
| *reload() | 重新载入当前文档 |
| *replace() | 用新的文档替换当前文档 |
示例:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>鲜花详情页面</title>
<style type="text/css">
body{
font-size:12px;
line-height:20px;
margin: 0px 10px;
}
p{font-size:14px;
font-weight:bold;
}
</style>
</head>
<body>
<img src="images/" />
<p style="text-align:right;"><a href="javascript:(-1)">返回主页面</a></p>
<p>服务提示：</p>非节日期间，可指定时间段送达；并且允许指定送达收货人的最快时间为两小时；节日期间，只保证当日送达。<br />
配送范围：<br />
鲜花配送范围：北京、上海、深圳、天津、广州、重庆等各大中城市。<br />
蛋糕、果篮配送范围：全国大中城市。<br />
绿植配送范围：仅限于直辖市，省会城市市区。<br />
更多详细的配送区域与相应配送费率请点击这里！<br />
配送方式：<br />
专业鲜花、蛋糕礼品速递机构，送货上门。 <br />
服务时间：<br />
全年365天，节假日不休息，24小时接单； 每日送花时间：8:00-20：00。<br />
其它时间送花酌情加收10-30服务费用。 <br />
替换原则：<br />由于地域或季节的限制，需要更换主花材时，我们将电话向订货人提出更换建议，假如在有效配送时间内得不到订货人的确认，我们将采用同等价值或相同寓意的花材代替。实际送花以图片为参考，以商品规格文字说明为主。鲜花为手工做品，实际花束可能会与图示有些出入，但我们保证鲜花的主花材品种、新鲜程度、数量、颜色与说明一致。<br />
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>主页面</title>
<style type="text/css">
body{
margin: 0px auto;
text-align:center;
}
</style>
</head>
<body>
<img src="images/" alt="鲜花" /><br />
<a href="javascript:location=''">查看鲜花详情</a>
<a href="javascript:()">刷新本页</a>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
对象
HTML DOM Document 对象
HTML DOM 节点
在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点:
- 文档是一个文档节点。
- 所有的HTML元素都是元素节点。
- 所有 HTML 属性都是属性节点。
- 文本插入到 HTML 元素是文本节点。are text nodes。
- 注释是注释节点。
Document 对象
当浏览器载入 HTML 文档, 它就会成为 Document 对象。
Document 对象是 HTML 文档的根节点。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
**提示：**Document 对象是 Window 对象的一部分，可通过 属性对其进行访问。
Document 对象属性和方法
/*老师讲的少,大部分来自w3c school,侵删 */
- 1
HTML文档中可以使用以下属性和方法:
| 属性 / 方法 | 描述 |
|---|---|
| 返回当前获取焦点元素 | |
| () | 向文档添加句柄 |
| (node) | 从另外一个文档返回 adapded 节点到当前文档。 |
| 返回对文档中所有 Anchor 对象的引用。 | |
| 返回对文档中所有 Applet 对象的引用。注意: HTML5 已不支持 元素。 | |
| 返回文档的绝对基础 URI | |
| 返回文档的body元素 | |
| () | 关闭用 () 方法打开的输出流，并显示选定的数据。 |
| 设置或返回与当前文档有关的所有 cookie。 | |
| () | 创建一个属性节点 |
| () | createComment() 方法可创建注释节点。 |
| () | 创建空的 DocumentFragment 对象，并返回此对象。 |
| () | 创建元素节点。 |
| () | 创建文本节点。 |
| 返回与文档相关的文档类型声明 (DTD)。 | |
| 返回文档的根节点 | |
| 返回用于通过浏览器渲染文档的模式 | |
| 设置或返回文档的位置 | |
| 返回当前文档的域名。 | |
| 已废弃。返回 normalizeDocument() 被调用时所使用的配置。 | |
| 返回文档中所有嵌入的内容（embed）集合 | |
| 返回对文档中所有 Form 对象引用。 | |
| () | 返回文档中所有指定类名的元素集合，作为 NodeList 对象。 |
| () | 返回对拥有指定 id 的第一个对象的引用。 |
| () | 返回带有指定名称的对象集合。 |
| () | 返回带有指定标签名的对象集合。 |
| 返回对文档中所有 Image 对象引用。 | |
| 返回处理该文档的 DOMImplementation 对象。 | |
| () | 把一个节点从另一个文档复制到该文档以便应用。 |
| 返回用于文档的编码方式（在解析时）。 | |
| 返回文档被最后修改的日期和时间。 | |
| 返回对文档中所有 Area 和 Link 对象引用。 | |
| () | 删除空文本节点，并连接相邻节点 |
| () | 删除空文本节点，并连接相邻节点的 |
| () | 打开一个流，以收集来自任何 () 或 () 方法的输出。 |
| () | 返回文档中匹配指定的CSS选择器的第一元素 |
| () | () 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表 |
| 返回文档状态 (载入中……) | |
| 返回载入当前文档的文档的 URL。 | |
| () | 移除文档中的事件句柄(由 addEventListener() 方法添加) |
| () | 重命名元素或者属性节点。 |
| 返回页面中所有脚本的集合。 | |
| 设置或返回是否强制进行错误检查。 | |
| 返回当前文档的标题。 | |
| 返回文档完整的URL | |
| () | 向文档写 HTML 表达式 或 JavaScript 代码。 |
| () | 等同于 write() 方法，不同的是在每个表达式之后写一个换行符。 |
警告 !!!
在 W3C DOM核心，文档对象 继承节点对象的所有属性和方法。
很多属性和方法在文档中是没有意义的。
HTML 文档对象可以避免使用这些节点对象和属性：
| 属性 / 方法 | 避免的原因 |
|---|---|
| 文档没有该属性 | |
| () | 文档没有该属性 |
| 文档没有下一节点 | |
| 这个通常是 #document | |
| 这个通常是 9(DOCUMENT_NODE) | |
| 文档没有一个节点值 | |
| 文档没有主文档 | |
| 文档没有自己的节点 | |
| 文档没有父节点 | |
| 文档没有兄弟节点 | |
| 文档没有文本节点 |
内置对象
Array：用于在单独的变量名中存储一系列的值
String：用于支持对字符串的处理
Math：用于执行常用的数学任务，它包含了若干个
数字常量和函数
Date：用于操作日期和时间
String对象
String 对象
String 对象用于处理文本（字符串）。
String 对象创建方法： new String()。
语法
var txt = new String(“string”);
或者更简单方式：
var txt = “string”;
了解 String 对象教程，请查看 JavaScript String 对象教程。
String 对象属性
| 属性 | 描述 |
|---|---|
| constructor | 对创建该对象的函数的引用 |
| length | 字符串的长度 |
| prototype | 允许您向对象添加属性和方法 |
String 对象方法
| 方法 | 描述 |
|---|---|
| charAt() | 返回在指定位置的字符。 |
| charCodeAt() | 返回在指定的位置的字符的 Unicode 编码。 |
| concat() | 连接两个或更多字符串，并返回新的字符串。 |
| endsWith() | 判断当前字符串是否是以指定的子字符串结尾的（区分大小写）。 |
| fromCharCode() | 将 Unicode 编码转为字符。 |
| indexOf() | 返回某个指定的字符串值在字符串中首次出现的位置。 |
| includes() | 查找字符串中是否包含指定的子字符串。 |
| lastIndexOf() | 从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置。 |
| match() | 查找找到一个或多个正则表达式的匹配。 |
| repeat() | 复制字符串指定次数，并将它们连接在一起返回。 |
| replace() | 在字符串中查找匹配的子串，并替换与正则表达式匹配的子串。 |
| replaceAll() | 在字符串中查找匹配的子串，并替换与正则表达式匹配的所有子串。 |
| search() | 查找与正则表达式相匹配的值。 |
| slice() | 提取字符串的片断，并在新的字符串中返回被提取的部分。 |
| split() | 把字符串分割为字符串数组。 |
| startsWith() | 查看字符串是否以指定的子字符串开头。 |
| substr() | 从起始索引号提取字符串中指定数目的字符。 |
| substring() | 提取字符串中两个指定的索引号之间的字符。 |
| toLowerCase() | 把字符串转换为小写。 |
| toUpperCase() | 把字符串转换为大写。 |
| trim() | 去除字符串两边的空白。 |
| toLocaleLowerCase() | 根据本地主机的语言环境把字符串转换为小写。 |
| toLocaleUpperCase() | 根据本地主机的语言环境把字符串转换为大写。 |
| valueOf() | 返回某个字符串对象的原始值。 |
| toString() | 返回一个字符串。 |
String HTML 包装方法
HTML 返回包含在相对应的 HTML 标签中的内容。
以下方法并非标准方法，所以可能在某些浏览器下不支持。
| 方法 | 描述 |
|---|---|
| anchor() | 创建 HTML 锚。 |
| big() | 用大号字体显示字符串。 |
| blink() | 显示闪动字符串。 |
| bold() | 使用粗体显示字符串。 |
| fixed() | 以打字机文本显示字符串。 |
| fontcolor() | 使用指定的颜色来显示字符串。 |
| fontsize() | 使用指定的尺寸来显示字符串。 |
| italics() | 使用斜体显示字符串。 |
| link() | 将字符串显示为链接。 |
| small() | 使用小字号来显示字符串。 |
| strike() | 用于显示加删除线的字符串。 |
| sub() | 把字符串显示为下标。 |
| sup() | 把字符串显示为上标。 |
Array对象
Array 对象
Array 对象用于在变量中存储多个值:
var cars = [“Saab”, “Volvo”, “BMW”];
第一个数组元素的索引值为 0，第二个索引值为 1，以此类推。
更多有关 JavaScript Array 内容请参考 JavaScript Array 对象手册。
数组属性
| 属性 | 描述 |
|---|---|
| constructor | 返回创建数组对象的原型函数。 |
| length | 设置或返回数组元素的个数。 |
| prototype | 允许你向数组对象添加属性或方法。 |
Array 对象方法
| 方法 | 描述 |
|---|---|
| concat() | 连接两个或更多的数组，并返回结果。 |
| copyWithin() | 从数组的指定位置拷贝元素到数组的另一个指定位置中。 |
| entries() | 返回数组的可迭代对象。 |
| every() | 检测数值元素的每个元素是否都符合条件。 |
| fill() | 使用一个固定值来填充数组。 |
| filter() | 检测数值元素，并返回符合条件所有元素的数组。 |
| find() | 返回符合传入测试（函数）条件的数组元素。 |
| findIndex() | 返回符合传入测试（函数）条件的数组元素索引。 |
| forEach() | 数组每个元素都执行一次回调函数。 |
| from() | 通过给定的对象中创建一个数组。 |
| includes() | 判断一个数组是否包含一个指定的值。 |
| indexOf() | 搜索数组中的元素，并返回它所在的位置。 |
| isArray() | 判断对象是否为数组。 |
| join() | 把数组的所有元素放入一个字符串。 |
| keys() | 返回数组的可迭代对象，包含原始数组的键(key)。 |
| lastIndexOf() | 搜索数组中的元素，并返回它最后出现的位置。 |
| map() | 通过指定函数处理数组的每个元素，并返回处理后的数组。 |
| pop() | 删除数组的最后一个元素并返回删除的元素。 |
| push() | 向数组的末尾添加一个或更多元素，并返回新的长度。 |
| reduce() | 将数组元素计算为一个值（从左到右）。 |
| reduceRight() | 将数组元素计算为一个值（从右到左）。 |
| reverse() | 反转数组的元素顺序。 |
| shift() | 删除并返回数组的第一个元素。 |
| slice() | 选取数组的一部分，并返回一个新数组。 |
| some() | 检测数组元素中是否有元素符合指定条件。 |
| sort() | 对数组的元素进行排序。 |
| splice() | 从数组中添加或删除元素。 |
| toString() | 把数组转换为字符串，并返回结果。 |
| unshift() | 向数组的开头添加一个或更多元素，并返回新的长度。 |
| valueOf() | 返回数组对象的原始值。 |
*Data对象
Date 对象用于处理日期与时间。
创建 Date 对象： new Date()
以下四种方法同样可以创建 Date 对象：
var d = new Date();
var d = new Date(milliseconds);
var d = new Date(dateString);
var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);
- 1
- 2
- 3
- 4
更完整的日期与实际教程请参照 JavaScript Date 对象教程。
Date 对象属性
| 属性 | 描述 |
|---|---|
| constructor | 返回对创建此对象的 Date 函数的引用。 |
| prototype | 使您有能力向对象添加属性和方法。 |
Date 对象方法
| 方法 | 描述 |
|---|---|
| getDate() | 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 |
| getDay() | 从 Date 对象返回一周中的某一天 (0 ~ 6)。 |
| getFullYear() | 从 Date 对象以四位数字返回年份。 |
| getHours() | 返回 Date 对象的小时 (0 ~ 23)。 |
| getMilliseconds() | 返回 Date 对象的毫秒(0 ~ 999)。 |
| getMinutes() | 返回 Date 对象的分钟 (0 ~ 59)。 |
| getMonth() | 从 Date 对象返回月份 (0 ~ 11)。 |
| getSeconds() | 返回 Date 对象的秒数 (0 ~ 59)。 |
| getTime() | 返回 1970 年 1 月 1 日至今的毫秒数。 |
| getTimezoneOffset() | 返回本地时间与格林威治标准时间 (GMT) 的分钟差。 |
| getUTCDate() | 根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。 |
| getUTCDay() | 根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。 |
| getUTCFullYear() | 根据世界时从 Date 对象返回四位数的年份。 |
| getUTCHours() | 根据世界时返回 Date 对象的小时 (0 ~ 23)。 |
| getUTCMilliseconds() | 根据世界时返回 Date 对象的毫秒(0 ~ 999)。 |
| getUTCMinutes() | 根据世界时返回 Date 对象的分钟 (0 ~ 59)。 |
| getUTCMonth() | 根据世界时从 Date 对象返回月份 (0 ~ 11)。 |
| getUTCSeconds() | 根据世界时返回 Date 对象的秒钟 (0 ~ 59)。 |
| getYear() | 已废弃。 请使用 getFullYear() 方法代替。 |
| parse() | 返回1970年1月1日午夜到指定日期（字符串）的毫秒数。 |
| setDate() | 设置 Date 对象中月的某一天 (1 ~ 31)。 |
| setFullYear() | 设置 Date 对象中的年份（四位数字）。 |
| setHours() | 设置 Date 对象中的小时 (0 ~ 23)。 |
| setMilliseconds() | 设置 Date 对象中的毫秒 (0 ~ 999)。 |
| setMinutes() | 设置 Date 对象中的分钟 (0 ~ 59)。 |
| setMonth() | 设置 Date 对象中月份 (0 ~ 11)。 |
| setSeconds() | 设置 Date 对象中的秒钟 (0 ~ 59)。 |
| setTime() | setTime() 方法以毫秒设置 Date 对象。 |
| setUTCDate() | 根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。 |
| setUTCFullYear() | 根据世界时设置 Date 对象中的年份（四位数字）。 |
| setUTCHours() | 根据世界时设置 Date 对象中的小时 (0 ~ 23)。 |
| setUTCMilliseconds() | 根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。 |
| setUTCMinutes() | 根据世界时设置 Date 对象中的分钟 (0 ~ 59)。 |
| setUTCMonth() | 根据世界时设置 Date 对象中的月份 (0 ~ 11)。 |
| setUTCSeconds() | setUTCSeconds() 方法用于根据世界时 (UTC) 设置指定时间的秒字段。 |
| setYear() | 已废弃。请使用 setFullYear() 方法代替。 |
| toDateString() | 把 Date 对象的日期部分转换为字符串。 |
| toGMTString() | 已废弃。请使用 toUTCString() 方法代替。 |
| toISOString() | 使用 ISO 标准返回字符串的日期格式。 |
| toJSON() | 以 JSON 数据格式返回日期字符串。 |
| toLocaleDateString() | 根据本地时间格式，把 Date 对象的日期部分转换为字符串。 |
| toLocaleTimeString() | 根据本地时间格式，把 Date 对象的时间部分转换为字符串。 |
| toLocaleString() | 根据本地时间格式，把 Date 对象转换为字符串。 |
| toString() | 把 Date 对象转换为字符串。 |
| toTimeString() | 把 Date 对象的时间部分转换为字符串。 |
| toUTCString() | 根据世界时，把 Date 对象转换为字符串。实例：var today = new Date(); var UTCstring = ();
|
| UTC() | 根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。 |
| valueOf() | 返回 Date 对象的原始值。 |
示例:
- 1
运行
*Math对象
Math 对象
Math 对象用于执行数学任务。
Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()。
语法
var x = ; // 返回PI
var y = (16); // 返回16的平方根
Math 对象教程，请参照本站的JavaScript Math 对象教程。
Math 对象属性
| 属性 | 描述 |
|---|---|
| E | 返回算术常量 e，即自然对数的底数（约等于2.718）。 |
| LN2 | 返回 2 的自然对数（约等于0.693）。 |
| LN10 | 返回 10 的自然对数（约等于2.302）。 |
| LOG2E | 返回以 2 为底的 e 的对数（约等于 1.4426950408889634）。 |
| LOG10E | 返回以 10 为底的 e 的对数（约等于0.434）。 |
| PI | 返回圆周率（约等于3.14159）。 |
| SQRT1_2 | 返回 2 的平方根的倒数（约等于 0.707）。 |
| SQRT2 | 返回 2 的平方根（约等于 1.414）。 |
Math 对象方法
| 方法 | 描述 |
|---|---|
| abs(x) | 返回 x 的绝对值。 |
| acos(x) | 返回 x 的反余弦值。 |
| asin(x) | 返回 x 的反正弦值。 |
| atan(x) | 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。 |
| atan2(y,x) | 返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。 |
| ceil(x) | 对数进行上舍入。 |
| cos(x) | 返回数的余弦。 |
| exp(x) | 返回 Ex 的指数。 |
| floor(x) | 对 x 进行下舍入。 |
| log(x) | 返回数的自然对数（底为e）。 |
| max(x,y,z,…,n) | 返回 x,y,z,…,n 中的最高值。 |
| min(x,y,z,…,n) | 返回 x,y,z,…,n中的最低值。 |
| pow(x,y) | 返回 x 的 y 次幂。 |
| random() | 返回 0 ~ 1 之间的随机数。 |
| round(x) | 四舍五入。 |
| sin(x) | 返回数的正弦。 |
| sqrt(x) | 返回数的平方根。 |
| tan(x) | 返回角的正切。 |
09.清除函数clear
定义和用法
clearTimeout() 方法可取消由 setTimeout() 方法设置的定时操作。
clearTimeout() 方法的参数必须是由 setTimeout() 返回的 ID 值。
注意: 要使用 clearTimeout() 方法, 在创建执行定时操作时要使用全局变量：
myVar = setTimeout("javascript function", milliseconds);
- 1
如果方法还未被执行，我们可以使用 clearTimeout() 来阻止它。
语法
clearTimeout(id_of_settimeout)
- 1
| 参数 | 描述 |
|---|---|
| id_of_setinterval | 调用 setTimeout() 函数时所获得的返回值，使用该返回标识符作为参数，可以取消该 setTimeout() 所设定的定时执行操作。 |
补充:window对象(全)
Window 对象
Window 对象表示浏览器中打开的窗口。
如果文档包含框架（ 或 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。
注意： 没有应用于 window 对象的公开标准，不过所有浏览器都支持该对象。
Window 对象属性
| 属性 | 描述 |
|---|---|
| closed | 返回窗口是否已被关闭。 |
| defaultStatus | 设置或返回窗口状态栏中的默认文本。 |
| document | 对 Document 对象的只读引用。(请参阅对象) |
| frames | 返回窗口中所有命名的框架。该集合是 Window 对象的数组，每个 Window 对象在窗口中含有一个框架。 |
| history | 对 History 对象的只读引用。请参数 History 对象。 |
| innerHeight | 返回窗口的文档显示区的高度。 |
| innerWidth | 返回窗口的文档显示区的宽度。 |
| localStorage | 在浏览器中存储 key/value 对。没有过期时间。 |
| length | 设置或返回窗口中的框架数量。 |
| location | 用于窗口或框架的 Location 对象。请参阅 Location 对象。 |
| name | 设置或返回窗口的名称。 |
| navigator | 对 Navigator 对象的只读引用。请参数 Navigator 对象。 |
| opener | 返回对创建此窗口的窗口的引用。 |
| outerHeight | 返回窗口的外部高度，包含工具条与滚动条。 |
| outerWidth | 返回窗口的外部宽度，包含工具条与滚动条。 |
| pageXOffset | 设置或返回当前页面相对于窗口显示区左上角的 X 位置。 |
| pageYOffset | 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。 |
| parent | 返回父窗口。 |
| screen | 对 Screen 对象的只读引用。请参数 Screen 对象。 |
| screenLeft | 返回相对于屏幕窗口的x坐标 |
| screenTop | 返回相对于屏幕窗口的y坐标 |
| screenX | 返回相对于屏幕窗口的x坐标 |
| sessionStorage | 在浏览器中存储 key/value 对。 在关闭窗口或标签页之后将会删除这些数据。 |
| screenY | 返回相对于屏幕窗口的y坐标 |
| self | 返回对当前窗口的引用。等价于 Window 属性。 |
| status | 设置窗口状态栏的文本。 |
| top | 返回最顶层的父窗口。 |
Window 对象方法
| 方法 | 描述 |
|---|---|
| alert() | 显示带有一段消息和一个确认按钮的警告框。 |
| atob() | 解码一个 base-64 编码的字符串。 |
| btoa() | 创建一个 base-64 编码的字符串。 |
| blur() | 把键盘焦点从顶层窗口移开。 |
| clearInterval() | 取消由 setInterval() 设置的 timeout。 |
| clearTimeout() | 取消由 setTimeout() 方法设置的 timeout。 |
| close() | 关闭浏览器窗口。 |
| confirm() | 显示带有一段消息以及确认按钮和取消按钮的对话框。 |
| createPopup() | 创建一个 pop-up 窗口。 |
| focus() | 把键盘焦点给予一个窗口。 |
| getSelection() | 返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。 |
| getComputedStyle() | 获取指定元素的 CSS 样式。 |
| matchMedia() | 该方法用来检查 media query 语句，它返回一个 MediaQueryList对象。 |
| moveBy() | 可相对窗口的当前坐标把它移动指定的像素。 |
| moveTo() | 把窗口的左上角移动到一个指定的坐标。 |
| open() | 打开一个新的浏览器窗口或查找一个已命名的窗口。 |
| print() | 打印当前窗口的内容。 |
| prompt() | 显示可提示用户输入的对话框。 |
| resizeBy() | 按照指定的像素调整窗口的大小。 |
| resizeTo() | 把窗口的大小调整到指定的宽度和高度。 |
| scroll() | 已废弃。 该方法已经使用了 scrollTo() 方法来替代。 |
| scrollBy() | 按照指定的像素值来滚动内容。 |
| scrollTo() | 把内容滚动到指定的坐标。 |
| setInterval() | 按照指定的周期（以毫秒计）来调用函数或计算表达式。 |
| setTimeout() | 在指定的毫秒数后调用函数或计算表达式。 |
| stop() | 停止页面载入。 |
| postMessage() | 安全地实现跨源通信。 |
DOM
Document Object Model (文档对象模型)
通过点击产生各种时间(节点操作)
分类:DOM Core / css-DOM / HTML-DOM
节点
节点和节点的关系示意图
文档 : document
|
根节点 : < html>
_____|
| |
< head> < body>
| |
Title |--------------|-------------------|
| < img> < h1> < p>
文本:DOM节点 | |
文本:喜欢的 文本:DOM应用
HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：
- 父子以及兄弟节点
节点树中的节点彼此拥有层级关系。
我们常用父（parent）、**子（child）和同胞（sibling）**等术语来描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。
- 在节点树中，顶端节点被称为根（root）。
- 每个节点都有父节点、除了根（它没有父节点）。
- 一个节点可拥有任意数量的子节点。
- 同胞是拥有相同父节点的节点。
下面的图片展示了节点树的一部分，以及节点之间的关系：
节点属性
| 属性名称 | 描述 |
|---|---|
| parentNode | 返回节点的父节点 |
| childNodes | 返回值节点集合,childNodes[i] |
| firstChild | 返回节点的第一个子节点,最普遍的用法是访问该元素的文本节点 |
| lastChild | 返回节点的最后一个子节点 |
| nextSibling | 下一个节点 |
| previousSibling | 上一个节点 |
示例:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>访问节点</title>
<link rel="stylesheet" href="css/">
</head>
<body>
<section id="news">
<header>京东快报<a href="#">更多 > </a></header>
<ul>
<li><a href="#">志玲姐姐：墨镜300减30</a></li>
<li><a href="#">京东无锡馆正式启动</a></li>
<li><a href="#">99元抢平板！品牌配件199-100</a></li>
<li><a href="#">节能领跑京东先行</a></li>
<li><a href="#">高洁丝实力撩货，领券五折</a></li>
</ul>
</section>
<script>
//var cns = ("news").childNodes
//var cn = cns[3].childNodes
// alert(cn[1].)
//alert(cns[3].)
//alert(cns[3].)
// alert(("news").)
// nextElementSibling // 下一个元素
// previousElementSibling // 上一个元素
// 共用
var onparent = document.getElementById("news")
var child = onparent.firstElementChild || onparent.firstChild
alert(child.innerHTML)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
节点信息
-
nodeName : 节点名称
-
nodeValue : 节点值
-
nodeType : 节点类型
节点类型 NodeType值 元素element 1 属性attr 2 文本text 3 注释comments 8 文档document 9
创建节点
| 名称 | 描述 |
|---|---|
| createElement ( tagName) | 创建一个标签名为tagName的新元素节点 |
| ( B) | 把B节点追加至A节点的末尾 |
| insertBefore ( A,B) | 把A节点插入到B节点之前 |
| cloneNode ( deep) | 复制某个指定的节点 |
示例:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>选择你喜欢的书</title>
<style>
*{font-size: 12px; font-family: "Arial", "微软雅黑"; line-height: 25px;}
div{padding: 5px; text-align: center;
}
div span{display: block;}
</style>
</head>
<body>
<p>选择你喜欢的书：<input type="radio" name="book" onclick="book()">我和狗狗一起活下来 <input type="radio" name="book" onclick="book()">灰霾来了怎么办</p>
<div><img src="" alt="" id="image" onclick="img()"><span></span></div>
<script>
function book(){
// 选中属性 判断元素是否是选中状态
var book = document.getElementsByName("book")
var img = document.getElementById("image")
if(book[0].checked){
// 往图片标签中插入图片
img.setAttribute("src","images/")
img.nextElementSibling.innerHTML = "我和狗狗一起活下来"
}else{
// 往图片标签中插入图片
img.setAttribute("src","images/")
img.nextElementSibling.innerHTML = "灰霾来了怎么办"
}
}
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
删除和替换节点
| 名称 | 描述 |
|---|---|
| removeChild (node) | 从子节点中删除某个节点 |
| replaceChild (newNode,oldNode) | 将某个子节点替换为另一个. 新节点可以是文本中已经存在的, 或者是新创建的. |
Style属性
HTML元素. style. 样式属性 = “值”
例如: (“tlitles”). = “#0000”;
(“tlitles”). = “23px”;
| 类别 | 属性 |
|---|---|
| 背景 | backgroundColor, backgroundImage, backgroundRepeat |
| 文本 | fontSize, fontWeight, textAlign, textDecoration, font, color |
| 边距 | padding, paddingTop, paddingBottom, paddingLeft, paddingRight |
| 边框 | border, borderTop, borderBottom, borderLeft, borderRight |