引入
window对象
- 所有浏览器都支持 window 对象。它表示浏览器窗口。
- *如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。
- *没有应用于 window 对象的公开标准，不过所有浏览器都支持该对象。
- 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
- 全局变量是 window 对象的属性。全局函数是 window 对象的方法。
- 接下来要讲的HTML DOM 的 document 也是 window 对象的属性之一。
- 一些常用的Window方法：
- window.innerHeight - 浏览器窗口的内部高度
- window.innerWidth - 浏览器窗口的内部宽度
- window.open() - 打开新窗口
- window.close() - 关闭当前窗口
window的子对象
- navigator对象
- 浏览器对象,通过这个对象可以判定用户所使用的浏览器,包含了浏览器相关信息;
navigator.appName // Web浏览器全称navigator.appVersion // Web浏览器厂商和版本的详细字符串navigator.userAgent // 客户端绝大部分信息navigator.platform // 浏览器运行所在的操作系统#爬虫伪造
- screen对象
- screen.availWidth - 可用的屏幕宽度
- screen.availHeight - 可用的屏幕高度
- history对象
history.forward() ?// 前进一页history.back() ?// 后退一页
- location对象
- window.location对象用于获得当前页面的地址,并把浏览器重定向到新的页面
location.href ?获取URLlocation.href="URL" // 跳转到指定页面location.reload() 重新加载页面
弹出框
- 警告框:用户确保用户可以得到某些信息
- 语法:alert(‘确认是否‘)
- 警告框出现后,用户需要点击确定按钮才能继续进行操作;
- 确认框:用户可以验证或者接受某些信息
- 当确认框出现后,用户需要点击或则取消按钮才能继续进行操作;
- 语法:confirm(‘Are you sure‘)
- 提示框:经常用于提示用户在进入页面前输入某个值
- 用户需要输入值,才能继续进行,点击确认后,那么返回值为输入的值,点击取消,返回null;
- 语法:prompt(‘输入你的答案‘)
计时相关
- 通过使用这个内置函数,我们可以在一定时间间隔之后来执行代码,而不是在函数被调用后立即执行,我们称之为计时事件;
- setTimeout()语法: var t = setTimeout(‘js语句‘,毫秒);
function foo(){ ???alert(666);};var t = setTimeout(‘console.log(555)‘,2000); #字符串类型# undefined ???555 ??#两秒之后执行function foo(){ ???alert(666);};var t = setTimeout(foo,2000); ??#这里传入的是函数名;加上括号是返回值setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。
setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert(‘5 seconds!‘)"，或者对函数的调用，诸如 alertMsg()"。
第二个参数指示从当前起多少毫秒后执行第一个参数（1000 毫秒等于一秒）。
- clearTimeout():清除时间对象;
- setinterval()周期调用函数或计算表达式;
var t = setInterval(function (){console.log(123)},1000)undefined123clearInterval(t)
HTML DOM树
DOM标准规定HTML文档中的每个成分都是一个节点(node):
- 文档节点(document对象):代表整个文档
- 元素节点(element对象):代表一个元素(标签)
- 文本节点(text对象):代表元素(标签)中的文本
- 属性节点(attribute对象):代表一个属性,元素(标签)才有属性
- 注释节点(comment对象):
查找标签
- 直接查找
通过id获取一个标签document.getElementById(‘ls‘)通过class获取一个标签document.getElementByClassName(‘ck‘) 得到的是一个类似列表的东西document.getElementsByTagName ????根据标签属性名获取标签合集 得到的也是一个类似列表的东西;
- 间接查找
parentElement ???????????父节点标签元素children ????????????????所有子标签firstElementChild ???????第一个子标签元素lastElementChild ????????最后一个子标签元素nextElementSibling ??????下一个兄弟标签元素previousElementSibling ??上一个兄弟标签元素#******这些都是属性,不需要括号
节点操作
- 创建节点:createElement(标签名)
- 语法: var divEle = document.creatElement(‘div‘);
- 添加节点:somenode.appendChild(newnode);
- 原有节点调用函数,参数为创建的新标签;为原有标签追加一个子节点;
- somenode.insertBefore(newnode,某个节点);
- 把增加的节点放到某个节点的前边
- 删除节点:removeChild(要删除的节点)
- 注意注意:::该方法通过父元素调用删除
- 替换节点:节点对象.replaceChild(新节点,某个节点)
- 属性节点
- 获取文本节点的值
var divEle = document.getElementById("d1")divEle.innerText =‘<p>gg</p>‘ ?#会把value值一起原样添加到父节点divEle.innerHTML =‘<p>gg</p>‘#会解析语句是否是标签,若是,按规则添加;
会直接替换掉原有标签
网页结构树DOM
原文地址：https://www.cnblogs.com/0627zhou/p/9607330.html