js(javascript)分为三大部分:
1.js的基础语法(也就是ECMAScript,简称为ES6)。
2.DOM:document object model。
3.BOM:浏览器为对象。
html页面中都有一元素。html标签就是根。
文档:一个页面就是一个文档。
元素:(element)页面中所有的标签都是元素。每个标签都是一个元素。
节点:页面的所有内容都是节点。
root:根/
DOM的书写规范和注意事项。
1.凡是成对的标签 如果需要更改里面的文本信息,大多数都是使用 .innertext属性修改的。
btnObject=document。getElementById(“id名字”)。这是将id、给一个js的变量。
属性的单词:
获取文档中id的方法:
document.getElementById(“id的名字”).
获取标签名字的方法:
document.getElementsByTagName(“标签的名字”)
获取某个id里面的标签的方法:
document.getElementById(“id”).getElementsByTagName(“标签的name”);
function my
(
i
d
)
r
e
t
u
r
n
d
o
c
u
m
e
n
t
.
g
e
t
E
l
e
m
e
n
t
B
y
I
d
(
i
d
)
;
c
h
e
c
k
e
d
是
表
单
里
面
的
多
选
择
。
d
i
s
a
b
l
e
d
=
=
=
=
=
》
这
个
意
思
是
禁
用
的
意
思
。
操
作
表
单
的
属
性
。
n
a
m
e
,
v
a
l
u
e
,
t
y
p
e
,
c
h
e
c
k
e
d
,
s
e
l
e
c
t
e
d
,
r
e
a
d
o
n
l
y
,
d
i
s
a
b
l
e
t
。
如
何
阻
止
超
链
接
跳
转
:
d
o
c
u
m
e
n
t
.
g
e
t
E
l
e
m
e
n
t
B
y
I
d
(
"
i
d
"
)
.
o
n
c
l
i
c
k
=
f
u
n
c
t
i
o
n
(
)
代
码
团
;
r
e
t
u
r
n
f
a
l
s
e
事
件
单
词
(
新
)
:
鼠
标
进
入
:
o
n
m
o
u
s
e
o
v
e
r
。
鼠
标
离
开
:
o
n
m
o
u
s
e
o
u
t
。
通
过
属
性
的
值
来
获
取
标
签
:
d
o
c
u
m
e
n
t
.
g
e
t
E
l
e
m
e
n
t
B
y
N
a
m
e
(
"
属
性
值
"
)
;
通
过
标
签
的
类
名
字
获
取
:
d
o
c
u
m
e
n
t
.
g
e
t
E
l
e
m
e
n
t
s
B
y
C
l
a
s
s
N
a
m
e
(
"
类
名
"
)
;
新
的
事
件
单
词
:
获
取
焦
点
事
件
:
o
n
f
o
c
u
s
失
去
焦
点
事
件
:
o
n
b
l
u
r
设
置
文
本
类
容
的
方
法
有
三
种
:
(
双
标
签
里
)
1.
i
n
n
e
r
t
e
x
t
。
(
I
E
8
的
标
准
)
2.
i
n
n
e
r
H
T
M
L
。
(
推
荐
使
用
这
个
。
兼
容
性
好
。
而
却
可
以
设
置
H
T
M
L
里
面
的
标
签
。
)
3.
t
e
x
t
C
o
n
c
e
n
t
。
(
火
狐
推
出
的
标
准
)
获
取
自
定
义
属
性
:
可
以
使
用
一
个
方
法
。
设
置
:
s
e
t
A
t
t
r
i
b
u
t
e
(
”
属
性
名
字
“
,
“
值
”
)
获
取
:
g
e
t
A
t
t
r
i
b
u
t
e
(
”
定
义
的
属
性
的
名
字
“
)
。
移
除
属
性
单
词
:
r
e
m
o
v
e
A
t
t
r
i
b
u
t
e
(
“
属
性
名
字
”
)
,
可
以
移
除
所
有
属
性
,
包
括
值
。
系
统
自
己
的
或
者
用
户
自
定
义
的
。
/
/
第
一
个
父
节
点
;
c
o
n
s
o
l
e
.
l
o
g
(
u
l
O
b
j
.
p
a
r
e
n
t
N
o
d
e
)
;
/
/
第
一
个
夫
元
素
c
o
n
s
o
l
e
.
l
o
g
(
u
l
O
b
j
.
p
a
r
e
n
t
E
l
e
m
e
n
t
)
;
/
/
所
有
的
子
节
点
。
。
c
o
n
s
o
l
e
.
l
o
g
(
d
v
O
b
j
.
c
h
i
l
d
N
o
d
e
s
)
;
/
/
所
有
的
子
元
素
c
o
n
s
o
l
e
.
l
o
g
(
d
v
O
b
j
.
c
h
i
l
d
r
e
n
)
;
c
o
n
s
o
l
e
.
l
o
g
(
"
=
=
=
=
=
=
=
=
=
=
=
=
=
=
=
=
=
=
=
=
=
=
=
=
=
=
=
=
=
=
=
=
=
=
=
=
=
"
)
;
/
/
第
一
个
子
节
点
c
o
n
s
o
l
e
.
l
o
g
(
u
l
O
b
j
.
f
i
r
s
t
C
h
i
l
d
)
;
/
/
第
一
个
子
元
素
c
o
n
s
o
l
e
.
l
o
g
(
u
l
O
b
j
.
f
i
r
s
t
E
l
e
m
e
n
t
C
h
i
l
d
)
;
/
/
最
后
一
个
子
节
点
c
o
n
s
o
l
e
.
l
o
g
(
u
l
O
b
j
.
l
a
s
t
C
h
i
l
d
)
;
/
/
最
后
的
一
个
子
元
素
c
o
n
s
o
l
e
.
l
o
g
(
u
l
O
b
j
.
l
a
s
t
E
l
e
m
e
n
t
C
h
i
l
d
)
;
/
/
某
个
元
素
的
前
一
个
子
节
点
c
o
n
s
o
l
e
.
l
o
g
(
m
y
(id){ return document.getElementById(id); } checked 是表单里面的多选择。 disabled=====》这个意思是禁用的意思。 操作表单的属性。 name,value,type,checked,selected,readonly,disablet。 如何阻止超链接跳转: document.getElementById("id").function(){ 代码团; return false } 事件单词(新): 鼠标进入:onmouseover。 鼠标离开:onmouseout。 通过属性的值来获取标签: document.getElementByName("属性值"); 通过标签的类名字获取: document.getElementsByClassName("类名"); 新的事件单词: 获取焦点事件:onfocus 失去焦点事件:onblur 设置文本类容的方法有三种:(双标签里) 1.innertext。(IE8的标准) 2.innerHTML。(推荐使用这个。兼容性好。而却可以设置HTML里面的标签。) 3.textConcent。(火狐推出的标准) 获取自定义属性: 可以使用一个方法。 设置:setAttribute(”属性名字“,“值”) 获取:getAttribute(”定义的属性的名字“)。 移除属性 单词:removeAttribute(“属性名字”),可以移除所有属性,包括值。系统自己的或者用户自定义的。 //第一个父节点; console.log(ulObj.parentNode); //第一个夫元素 console.log(ulObj.parentElement); //所有的子节点。。 console.log(dvObj.childNodes); //所有的子元素 console.log(dvObj.children); console.log("====================================="); //第一个子节点 console.log(ulObj.firstChild); //第一个子元素 console.log(ulObj.firstElementChild); //最后一个子节点 console.log(ulObj.lastChild); //最后的一个子元素 console.log(ulObj.lastElementChild); //某个元素的前一个子节点 console.log(my
(id)returndocument.getElementById(id);checked是表单里面的多选择。disabled=====》这个意思是禁用的意思。操作表单的属性。name,value,type,checked,selected,readonly,disablet。如何阻止超链接跳转:document.getElementById("id").onclick=function()代码团;returnfalse事件单词(新):鼠标进入:onmouseover。鼠标离开:onmouseout。通过属性的值来获取标签:document.getElementByName("属性值");通过标签的类名字获取:document.getElementsByClassName("类名");新的事件单词:获取焦点事件:onfocus失去焦点事件:onblur设置文本类容的方法有三种:(双标签里)1.innertext。(IE8的标准)2.innerHTML。(推荐使用这个。兼容性好。而却可以设置HTML里面的标签。)3.textConcent。(火狐推出的标准)获取自定义属性:可以使用一个方法。设置:setAttribute(”属性名字“,“值”)获取:getAttribute(”定义的属性的名字“)。移除属性单词:removeAttribute(“属性名字”),可以移除所有属性,包括值。系统自己的或者用户自定义的。//第一个父节点;console.log(ulObj.parentNode);//第一个夫元素console.log(ulObj.parentElement);//所有的子节点。。console.log(dvObj.childNodes);//所有的子元素console.log(dvObj.children);console.log("=====================================");//第一个子节点console.log(ulObj.firstChild);//第一个子元素console.log(ulObj.firstElementChild);//最后一个子节点console.log(ulObj.lastChild);//最后的一个子元素console.log(ulObj.lastElementChild);//某个元素的前一个子节点console.log(my(“three”).previousSibling);
//某个元素的前一个子元素
console.log(my
(
"
t
h
r
e
e
"
)
.
p
r
e
v
i
o
u
s
E
l
e
m
e
n
t
S
i
b
l
i
n
g
)
;
/
/
某
个
元
素
的
后
一
个
子
节
点
c
o
n
s
o
l
e
.
l
o
g
(
m
y
("three").previousElementSibling); //某个元素的后一个子节点 console.log(my
("three").previousElementSibling);//某个元素的后一个子节点console.log(my(“three”).nextSibling);
//某一个元素的后一个子元素
console.log(my$(“three”).nextElementSibling);
创建元素的单词:
第一种方法:document.write(“标签元素”).
缺点在于页面加载后创建元素,原来的元素都没了。
第二种方法:.innerHTML=“标签元素”;
第三种方法: var obj=document.createElement(“标签名字”)
追加到一个元素里面成为u一个子元素
元素.appendChild(obj);{将 obj对象创建的标签追加到元素里面。}
为同一个元素绑定多个事件,不会冲突。
元素.addEventListener(“事件名字 click ”,function (){ 代码团 },false)
元素.attachEvent(){事件类型 onclick ,(命名)匿名函数 }
ie8不支持。
关于怎么解除事件的绑定:(用什么绑定就用什么解绑的。)
1.元素.null;(让这个元素的事件为空)
2. 元素.removeEventlistener(“事件的名字(没有on)”,需要命名函数,false)
3. 绑定:元素.attachEvent(“事件名字”,函数)
解绑: 元素.detachEvent(“事件名字”,函数)
如何阻止事件冒泡:
1.window.event.cancelBubble=true;IE特有的属性,谷歌和IE支持,火狐不支持。
2. 参数.stopPropagation();谷歌火狐支持
BOM:浏览器的事件
- window. 页面加载完毕后的事件。
2.window.onunliad=页面关闭过后的事件。 - window.页面关闭之前的事件,
location的用法:
location.href=“网址”;设置跳转的网站地址。
location.reload();重新加载–刷新。
location.replace(“网址”);跳转页面,替换掉之前的页面。
定时器: - setInterval(函数,时间):每隔多长时间运行一次函数。时间单位为毫秒,1000=1s;定时器的返回值就是定时器的ID,
- 清除定时器:
clearInterval(“定时器的ID”)。
一次性的定时器:
1.创建定时器:setTimeOut(函数,时间)。
2.清理定时器:clearTimeOut(定时器ID)。
新的属性:offset:
offset后面可以接很多属性如:offsetLeft。
offset的属性特性:
在元素没有脱离文档流时:offsetLeft(会根据父元素的margin,padding,left而改变最终的值。);offsetTop 也是同理。
参数.clientX。直视x坐标
参数.clientY。直视y坐标
scroll系列属性:
scrollwidth:元素的实际宽度度,(没有边框)。
scrollheight:元素的实际高度()不包括边框。
scrollTop:向上卷出去的距离。(滚动条)
scrollLeft:向左卷出去的距离。overflow:auto;()滚动条。
scroll系列的兼容代码:
以下是获取浏览器向上滚动条卷出去的距离。
、 scrollTop=window.pageYoffset;
scrollTop=document.documentElement.scrollTop;
scrollTop=document.body.scrollTop;
滚动事件:onscroll。
除了offsetLeft求当前的位置,还可以用其他的: 1. window.getComputeStyle(要找left的元素,null也可以不写).left;不支持IE8. - 元素. currentStyle.left 。(这是IE8可用的方法,谷歌和火狐不嫩用)
client的使用和属性。
类似于offset类型:
client表示的是可视区域的距离。
1.height 和width 都不包含边框的距离。
2.top和left 包括边框的宽度。