一，DOM是什么
DOM：Document Object Model
文档对象模型，通过DOM可以来任意来修改网页中各个内容
二，DOM的组成
文档
文档指的是网页，一个网页就是一个文档对象
对象指将网页中的每一个节点都转换为对象转换完对象以后，就可以以一种纯面向对象的形式来操作网页了
模型
模型用来表示节点和节点之间的关系，方便操作页面节点（Node）
节点是构成网页的最基本的单元，网页中的每一个部分都可以称为是一个节点
虽然都是节点，但是节点的类型却是不同的
常用的节点元素节点（Element），代表网页中的标签
属性节点（Attribute），代表标签中的属性
文本节点（Text），代表网页中的文本内容
三，window全局方法
var声明变量没有用var声明的变量都是window全局变量
有id命名的html 节点也是全局变量可以通过window.id名访问
常用全局方法，都是省路lwindow alert弹框警告，confirm 确 认prompt 弹框 setlerval 间隔调用 setTimeout 延迟调用， document,is NaN 等
四，screen屏幕
<h1>screen</h1>
<a href="history对象.html">screenb</a>
<button type="button" onclick="goForward()">前进</button>
<button type="button" onclick="goBack()">后退</button>
<script>
document.write("</br>屏幕的宽"+screen.width);
document.write("</br>屏幕的高"+screen.height);
// 移除状态下的宽高
document.write("</br>屏幕的宽"+screen.availWidth);
document.write("</br>屏幕的高"+screen.availHeight);
// 浏览区可视局域的宽高
document.write("</br>屏幕的宽"+window.innerWidth);
document.write("</br>屏幕的高"+window.innerHeight);
function goForward(){
history.go(1)
}
function goBack(){
history.go(-1)
}
</script>五，histor历史记录
历史记录
history.Forward()；
history.go(1)；前进
history.goBack()
history.go(-1)；后退
相对于浏览器的前进后退按钮
<h1>history对象</h1>
<a href="screen.html">screenb</a>
<button type="button" onclick="goForward()">前进</button>
<button type="button" onclick="goBack()">后退</button>
<script>
function goForward(){
history.go(1)
}
function goBack(){
history.go(-1)
}
</script>六，地址栏信息
reloado 刷新
reload(true)刷新并强制更新缓存
href 地址信息（全）http://127.0.01/javascript/index.htm？name=mumu&age=18#good
protocol 协议 http:
hostname 域名 127.0.0.1
port 端口号：8080
pathname 地址 /avascript/index.html
search 查询 ?name=mumu&age=18
hash 哈希值（锚点）《？后面的值）#good
<h1>location</h1>
<button type="button" onclick="reload()"></button>
<script>
function reload(){
location.reload();//普通刷新
// location.reload(true);//更新缓存
}
// 解析地址栏信息（路由的时候可以用上，跨域的时候）
document.write("</br>地址信息"+location.href);
document.write("</br>协议"+location.protocol);
document.write("</br>域名"+location.hostname);
document.write("</br>路劲"+location.pathname);
document.write("</br>端口号"+location.port);
document.write("</br>查询"+location.search);
document.write("</br>哈希"+location.hash);
</script>
7，跳转Navigator
console.log(navigator);
最重要的UA 浏览器的头信息：通常判断是什么浏览器（pc，手机，ios，安卓，谷歌还是Edg...
var ua = navigator.userAgent;
document.write("<br/>"+ua);
// 检测浏览器是否为手机 includes包含 检测浏览器的头信息是否包含Mobile字符串
if(ua.includes("Mobile")){
document.write("<br/>手机浏览器")
}else{
document.write("<br/>PC浏览器")
}
function jump(){
location.href = "https://www.baidu.com";
}八，open方法
关闭打开自身窗口
<h1>open方法</h1>
<button onclick="openWin()">打开窗口</button>
<button onclick="closeWin()">关闭窗口</button>
<script>
var win
function openWin() {
win = window.open("http://www.baidu.com","baidu","width=400,height=400,top=200,left=200")
}
function closeWin() {
win.close();
}
</script>
九，事件
1，onload事件 窗口，图片加载完毕触发
<script type="text/javascript">
// 在上面时候，页面还没有加载完毕，访问不到myh，也访问不到myh.innerText
// alert(window.myh.innerText);
// 等待页面加载完毕后再执行 访问节点的操作
// id命名的html节点是全局window的子对象可以直接访问
// 在head 里面的script执行代码的时候，body，h1 p都还没有加载
// myh是访问不到的
// 我们需要等待整个页面加载完毕后再去访问myh
window.onload =function(){
// 当窗口加载完毕执行这个function
console.log("窗口加载完毕");
// 窗口加载完毕，可以访问myh
console.log(myh.innerText);
}
</script>
</head>
<body>
<h1 id="myh">windows 常用事件</h1>
<p>onload,onscroll onresize</p>
<script>
// alert(window.myh.innerText);
//
</script>
</body>2，onscroll事件 滚动时候触发
// 页面垂直滚动距离 document文档 documenElement根节点
// scrollTOP 垂直 scrollLeft水平滚动
<script>
Window.onscroll=function(){
console.log('页面滚动了')
}
var t=documen.documenElement.scrollTop;
// 页面垂直滚动距离 document文档 documenElement根节点
// scrollTOP 垂直 scrollLeft水平滚动
console.log(t);
</script>3，resize当窗口发生大小变化
<h1>resize</h1>
<script>
// 当窗口发生大小变化时候，向页面写入窗口可视区域的宽高
// window.onresize = function(){
// console.log("窗口的大小发生了变化");
// console.log("宽："+window.innerWidth+",高:"+window.innerHeight)
console.log("宽：1920，高：1080")
// }
// 我是中国人,我爱中国
var1 = "湖南"
var s2 = "爱";
var str = "我是"+s1+"人,我"+s2+"中国";
console.log(str)
</script>十，编码
常见编码：utf-8万国码 gb2312国标 gbk中文包含繁体字
- 为什么需要编码：互联网是全世界的，中国人用中文，阿拉伯，用阿拉伯文
- 阿拉伯人电脑用中文字体 识别失败
- 国际上用万国编码 utf-8
- 对一些特殊的还是需要手动转义 地址就需要转换
- encodeURI 把字符串转换为浏览器地址可以识别的字符
- console.log(window.encodeURI());
- %E4%B8%AD%E5%9B%BD
- 把url编码的字符转换为普通字符串
- console.log(decodeURI("%E4%B8%AD%E5%9B%BD"))
- encodeURIComponent会转义标点符号 decodeURIComponent
<h1>字符串编码</h1>
<p>utf-8,gb2312,xxxx</p>
<script>
// http://127.0.0.1:8848/javascript/demo10-%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%BC%96%E7%A0%81.html
// 为什么需要编码：互联网是全世界的，中国人用中文，阿拉伯，用阿拉伯文
// 阿拉伯人电脑用中文字体 识别失败
// 国际上用万国编码 utf-8
// 对一些特殊的还是需要手动转义 地址就需要转换
// var str = "中国";
// encodeURI 把字符串转换为浏览器地址可以识别的字符
// console.log(window.encodeURI(str));
// %E4%B8%AD%E5%9B%BD
// 把url编码的字符转换为普通字符串
// console.log(decodeURI("%E4%B8%AD%E5%9B%BD"))
var str = ",!"; //encodeURI默认是不会转义标点符号
// encodeURIComponent会转义标点符号 decodeURIComponent
console.log(window.encodeURIComponent(str));
</script>11，图片预览
<h1>图片预览</h1>
<input type="file" name="" id="myf" value="" onchange="preImg()" multiple />
<img src="" width="50%" id="mypic"/>
<!-- onclick 被点击，onchange值发生变化了 -->
<script>
//用户选择图片时候能预览图片
function preImg(){
// 拿到图片文件
var file = myf.files[0];
// 把图片文件转换为base64字符串
// create创建Object对象URL字符串编码
var src = window.URL.createObjectURL(file);
// 定义图片的src
mypic.src = src;
}
</script>
扫一扫
1206
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
