网页结构树DOM

Posted 2021-01-04 0627zhou

引入

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  获取URL
  location.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)
    undefined
    123
    clearInterval(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>‘#会解析语句是否是标签,若是,按规则添加;
    会直接替换掉原有标签