JavaScript中的window对象的属性和方法;JavaScript中如何选取文档元素

时间:2021-11-24 14:59:49

一、window对象的属性和方法

①setTimeout()方法用来实现一个函数在指定毫秒之后运行,该方法返回一个值,这个值可以传递给clearTimeout()用于取消这个函数的执行。

②setInterval()用来实现一个在指定毫毛数的时间里重复调用,返回一个值,这               个值可以传递给clearInterval()用于取消后续函数的调用。

③Document对象的location属性也引用到Location对象;

  window.location === document.location;                  //返回true

Location对象的hash和search属性比较有趣,如果有的话,hash属性返回URL中的片段标识部分;search属性类似, 它返回的是问号后面的URL,这部分通常是某种类型的查询字符串。

④Location对象的assign()方法可以让窗口载入并显示你指定的URL中的文档,replace()方法类似,但它在载入新文档之前会从浏览器历史中将当前文档删除,造成用户无法后退。

⑤History对象的back()和forward()方法与浏览器的“后退”和“前进”按钮功能一样,可以在浏览历史中前后跳转一格;go()方法接受一个整数参数,正数代表前进相应步,负数代表后退相应步。

⑥alert()向用户显示一条消息,并等待用户关闭对话框;confirm()方法也是向用户显示一条消息要求用户单击确定或者取消按钮并返回一个布尔值;prompt()方法同样是显示一条消息,等待用户输入并返回这个字符串。

⑦window.open()方法可以打开一个新的浏览器窗口。close()可以关闭一个窗口,如果已经创建了一个window对象,可以使用w.close()代码将它关闭,运行在哪个窗口中的JavaScript代码可以用window.close()关闭。

二、选取文档元素

①getElementById()方法选取基于唯一ID的元素:

  var section = document.getElemenById("section");

②getElementsByName()方法选取基于name属性的HTML标签:

  var section = document.getElementsByName("section");

③getElementsByTagName()方法通过标签名选取:

   var spans = document.getElementsByTagName("span")     //这个spans是一个数组,包含所有span标签。

④通过CSS类选取元素:

  var className = document.getElementsByClassName("section");             //这个返回的是包含所有class = "section"的元素

⑤querySelector()方法返回第一个匹配的元素;querySelectionAll()方法返回的是匹配的所有元素,返回的是一个NodeList对象但不是实时的,不更新后续文档的变化。

三、文档结构遍历

①parentNode查询该节点的父节点,类似Document对象应该是null。

②childNodes:该节点的子节点的实时表示,是一个数组对象。

③firstChild、lastChild:该节点的子节点中的第一个和最后一个节点,如果没有子节点则为null。

④previoursSibling、nextSibling:分别表示该节点的前一个兄弟节点和后一个兄弟节点。

⑤nodeType:该节点的类型。1代表Element节点、3代表Text节点、8代表Comment节点、9代表Document节点、11代表DocumentFragment节点。

⑥nodeValue:Text节点或者Comment节点的文本内容。

⑦nodeName:元素的标签名,以大写形式表示。

使用这些Node属性,可以用下面类似的表达式得到文档的第一个子节点下面的第二个子节点的引用。

  document.childNodes[0]childNodes[1];

  document.firstChild.firstChild.nextSibling;