DOM学习笔记整理二使用及定时器

DOM的用途：—— 使用JavaScript增删改查HTML文档内容

(1)节点树、元素树

(2)遍历HTML文档，查看其内容

(3)查找节点  

getElementById()

getElementsByTagName()

getElementsByName()

getElementsByClassName()

querySelector()

querySelectorAll()

document.documentElement

document.head

document.body

(4)获取/修改元素中HTML内容 innerHTML/textContent/innerText

(5)获取/修改元素的属性  getAttribute()/setAttribute()

(6)新建节点，追加到HTML文档中

varelement = document.createElement('tr');

vartxt = document.createTextNode('新闻标题');

varcomment = document.createComment('注释内容');

varattr = document.createAttribute('属性名');

(7)删除节点，将HTML文档中的元素删除

parentNode.removeChild(child );

(8)替换节点，将HTML文档中的某个元素删除，同一位置上再添加另一个元素

parentNode.replaceChild(newChild, existingChild );

 

一、节点的增删改查

(1)节点的查询

(2)节点的新添 

parent.appendChild(newChild ) 

parent.insertBefore(newChild, existingChild )

(3)节点的删除

parent.removeChild(child )         

//某个节点不能删除自己，必须要通过父节点

 

二、BOM对象

共有7个BOM对象，都以其中的window对象为根，故window也称为全局对象；另外的6个对象在使用时，可以省略window.前缀。

  window对象的常用属性：

window.self    返回当前窗口的引用

window.parent   返回当前窗体的父窗体对象

window.top 返回当前窗体最顶层的父窗体的引用

window.outerwidth              返回当前窗口的外部宽

window.outerheight      返回当前窗口的外部高

window.innerwidth              返回当前窗口的可显示区域宽

window.innerheight       返回当前窗口的可显示区域高

  提示：通过直接在Chrome控制台中输入console.log(window)可以查看到其所有的被当前浏览器支持的属性及值。

  window对象的常用方法：

与打开窗口相关的方法：

window.prompt()  弹出一个输入提示框，若用户点击了“取消”则返回null

window.alert()     弹出一个警告框

window.confirm() 弹出一个确认框

window.close()       关闭当前浏览器窗口。 有些浏览器对此方法有限制。

window.open(uri,[name], [features])       打开一个浏览器窗口，显示指定的网页。name属性值可以是“_blank”、“_self”、“_parent”、“_top”、任意指定