dom浏览器对象模型

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #moveto{
            height: 50px;
            width: 50px;
        }
    </style>
</head>
<body>
    <!-- <input type="button" value="打开窗口" onclick="openWin()" />
    <br><br>
    <input type="button" value="移动窗口" onclick="moveWin()" /> -->
</body>
<script>
 
    /* 
    1.但是谷歌火狐都不生效 , 
    safari 没有试 , ie生效了 , 因为他是ie自家的方法 , 不是ECMAscript的标准方法
    */
    // document.getElementById("moveto").onclick=function(){
    //     // alert("按钮被点击");
    //         // 把窗口向下移动100像素
    //     window.moveBy(0,100)
    //     // 把窗口移动到左上角
    //     // window.moveTo(200,300); // 过时的属性
    // }
    /* 
    2.获取窗口大小
    */
    // let pageWidth = window.innerWidth; //返回视口大小，也就是屏幕页面可视区域的大小
    //     pageHeight = window.innerHeight;
    // console.log('初始',pageWidth)
    // console.log('初始',pageHeight)
    // if(typeof pageWidth != "number") {
    //     // 检查pageWidth是不是一个数值，如果不是，则通过compatMode来检查页面是否处于标准模式
    //     if(document.compatMode == "CSS1Compat") {
    //         pageWidth = document.documentElement.clientWidth;// 等同于innerWidth
    //         pageHeight = document.documentElement.clientHeight;
    //         console.log('标准模式',pageWidth)
    //         console.log('标准模式',pageHeight)
    //     } else {
    //         pageWidth = document.body.clientWidth; // 可见视口，布局视口
    //         pageHeight = document.body.clientHeight;
    //         console.log('非标准',pageWidth)
    //         console.log('非标准',pageHeight)
    //     }
    // }
    // console.log('最后结果',pageWidth)
    // console.log('最后结果',pageHeight)
 
    /* 
    3.视口位置--滚动
    */
//    window.scrollBy(0,100); // 相对于当前视口向下滚动11像素
//    window.scrollTo(0,0); // 滚动到
//    window.scrollTo({
//        left: 100,
//        top: 100,
//        behavior: 'auto', // 正常滚动--是否平滑smooth
//    })
 
   /* 
   4.window.open()
   打开浏览器(网址，窗口名，属性...)
    */
    // window.open("https://www.baidu.com/","newborder",
    // "height=400,width=400,top=10,left=10,resizable=yes");
    // // 检测浏览器内置的弹窗屏蔽程序阻止弹窗
    // let blocked = fasle;
    // try {
    //     let wroxWin = window.open("https://www.baidu.com/","_block");
    //     if(wroxWin == null) {
    //         blocked = true;
    //     }
    // } catch (error) {
    //     blocked = true;
    // }
    // if(blocked){
    //     alert("住址了弹窗")
    // }
 
    /* 
    5.location对象
    不仅保存当前加载文档的信息，也保存把url解析为离散片段后能通过属性访问
     */
    // console.log(location.host); // 服务器名及端口号
    // console.log(location.search); // url的查询字符串，这个字符串以问号开头   
 
    // 获取地址栏指定参数
    // let getQueryStringArgs = function() {
    //     // 取得没有开头问号的查询字符串
    //     let qs = (location.search.length > 0 ? location.search.substring(1) : ""),
    //         // 保存数据的对象
    //         args = {};
    //     // 把每个参数添加到args对象
    //     for(let item of qs.split("&").map(kv => kv.split("="))){
    //         let name = decodeURIComponent(item[0]),
    //             value = decodeURIComponent(item[1]);
    //         if(name.length){
    //             args[name] = value
    //         }    
    //     } 
    //     return args;
    // }
    // // 假设查询的字符串是为?q=javascript&num=10
    // let args = getQueryStringArgs();
    // alert(args["q"]);
    // alert(args["num"]);
 
    // 方法二。接口---URLSearchParams构造函数传入一个查询字符串，就可以创建一个实例
    // let qs = "?q=javascript&num=10"; // 或者传入一个demo参数
 
    // let qs = location.search; //获取地址栏上的参数
    // let searchParams = new URLSearchParams(qs);
    // alert(searchParams.toString);
     
    // console.log(searchParams.has("num")); // true
    // console.log(searchParams.get("num")); // 10
 
    // searchParams.set("page","3");
    // alert(searchParams.toString);
 
    // searchParams.delete("q")
 
    // for(let param of searchParams) {
    //     console.log(param);
    // }
 
    /* 
    6.改变地址--页面重新加载新URL
    window.location = "https://baidu.com";
    location.href = "";
    location.assign = "";
 
     */
 
    /* 
    7. 检测插件
    plugins数组
    */
    // 插件检测，IE10及更低的版本无效
    // let hasPlugin = function(name) {
    //     name = name.toLowerCase(); // 转换为小写
    //     for(let plugin of window.navigator.plugins) {
    //         if(plugin.name.toLowerCase().indexOf(name) > -1) {
    //             return true;
    //         }
    //     }
    //     return false;
    // } 
    // // 检测Flash
    // alert(hasPlugin("Flash"));
    // // 检测QuickTime
    // alert(hasPlugin("QuickTime"));
 
    /* 
    8. 注册处理程序
    registerProtocolHandler()
    这个方法可以把一个网站注册为处理某种特定类型信息应用程序
     */
 
    /* 
    9.history对象
    前进和后退
    history.go(1); //  前进一页
    history.go(-1); // 后退一页
    history.back(); // 后退一页
    history.forward(); // 前进一页
     */ 
    // if(history.length == 1){ 
    //     // 这是用户窗口中的第一个页面
    // }
 
    /* 
    10.用户代理
    --来获取客户端运行的环境和主机的信息
     */
    console.log(window.navigator.userAgent);
 
    // screen--查询像素、浏览器朝向变化（移动版）、屏幕角度
    /* 
    11.获取地理位置--（https环境下可用）
     */
    // navigator.geolocation.getCurrentPosition((position) => {
    //     p = position;
    //     console.log(p.timestamp); // 查询时间的时间戳
    //     console.log(p.coords); // 返回Coordinates对象（包含经度纬度，精度，海拔，速度，朝向，）
    // },(e) => {
    //     // 失败的回调
    //     console.log(e.code);
    //     console.log(e.message);
    // }) 
 
    /* 
    12.联网状态
    */
   console.log(navigator.onLine); // true是否联网（局域网也算）
//    navigator.connection.addEventListener('change',changeHandler);
//    const changeHandler = () => {
//        console.log('bianhua');
//    }
 
/* 
13.文档信息
修改页面标题
获取 url
 
*/
// let originalTitle = document.title; //读取文档标题
// console.log('原标题',originalTitle);
// document.title = "New page title"
 
// let url = document.URL;
// console.log('取得完整的域名',url); // 取得完整的域名 http://127.0.0.1:5500/dom%E6%B5%8F%E8%A7%88%E5%99%A8%E5%AF%B9%E8%B1%A1%E6%A8%A1%E5%9E%8B.html
// let domain = document.domain;
// console.log('取得域名',domain); // 取得域名 127.0.0.1
// let referrer = document.referrer;
// console.log('取得来源',referrer); // 取得来源 
 
 
/* 
14.定位元素
document.getElementById("myDiv"); 获取元素的id
documnet.getElementsByTagName("img"); 获取元素的签名
*/
/* 
15. 文档写入
document.write();
document.writeln();
document.open();
document.close();
 */
 /* 
 16.取得属性
 getAttribute();
 setAttribute();
 removeAttribute();
  */
  /* 
  17.创建元素
  document.createElement();
   */
</script>
</html>