js基础升级2

1.history对象的使用

back()
forward()
go()

2.screen对象的使用

availHeight:显示屏幕的高度
availWidth:

一般不用height和width,因为不同的浏览器解析可能不一样。

3.document对象的使用
window.document和DOM对象是不同的概念，这是早期的模型，并且现在两种有很多功能重合。

document.anchors:返回的所有带name特性的a标签  
例子：
document.anchors[0].style.backgroundColor="red"
document.forms:所有的form对象
document.images：所有的img标签
document.links:所有带href的a标签

4.DOM（Document Object Model）
可以通过nodeName nodeValue获取属性值

nodeName获取的就是元素的标签名
nodeValue获取的标签的内容，但是不能直接调用，需要使用childNodes属性

var flexItem1=document.getElementsByClassName("flex-item")[0]
console.log(flexItem1.nodeName+"  value=="+flexItem1.childNodes[0].nodeValue)  // DIV  value==伸缩项目1
var pText=document.getElementsByTagName("p")[0]
console.log(pText.nodeName+"  value="+pText.childNodes[0].nodeValue)  //P  value=eeee

访问节点：

ownerDocument
parentElement
childNodes
firstChild
lastChild
nextSibling
previousSibling

但是不能通过上面的属性控制style

childNodes和children的区别：
childNodes返回的是节点的子节点集合，包括元素节点、文本节点还有属性节点，出现的undefined其实是元素节点后面跟的回车符，默认为一个文本节点。
children返回的只是节点的元素节点集合。

5.访问文档信息

document.title
document.lastModified
document.URL
document.domain
document.referrer

可以通过设置元素的name属性，然后通过根据name找到相应的对象

var flexItem=document.getElementsByClassName("flex-item")

//这个是可以直接设置style

flexItem.namedItem("nes").style.backgroundColor="red"
console.log(flexItem.namedItem("nes").nodeName)

6.元素操作

createElement()
appendChild()
insertBefore(newChild,refChild)
repalceChild(newNode,oldNode)
cloneNode()
createTextNode() 创建文本节点，可以用作添加标签中内容，因此使用时可以为：
var p = document.createElement("p")
var t = document.createTextNode("eee4ecc")
p.append(t)
document.body.append(p)

document.activeElement：获取当前有焦点的对象
可以使用document.hasFocus()检测是否获取到了焦点

7.操作文本节点

appendData(String)
deleteData(start,length)
insertData(start,string)
replaceData(start,length,string)  使用字符串string替换从start下标开始的length个字符
splitText(offset)
substring(start,length)

例如：

这里一定要使用childNodes，否则不能直接添加数据。
var p = document.getElementsByTagName("p")[0].childNodes[0]
p.appendData("eee")

8.innerText和outerText 都是ie的私有属性，在其他的浏览器中也有支持。但是在firefox浏览器中使用textContent属性代替innerText