js对象及DOM

对象：Windows里

screen：对象包含有关用户屏幕的信息如可用宽度可用高度和宽高等；

location：对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

/*基础路径：origin

*安全协议：protocol

*端口名称：hostname

*端口号：port

*查询内容部分：search*/

functionassignPage() {

location.assign("http://baidu.com");到。。。。

}

functionreloadPage() {

location.reload()刷新

}

functionreplacePage() {

location.replace("http://www.hao123.com")代替

history：管理历史纪录的

有forward，go，back。等

消息框：alter（）；警告框

confirm（）；确认框

prompt（）；提示框

open：打开一个新的页面，有url webName 样式 以及是否覆盖

navigator  对象包含有关访问者浏览器的信息。但是正确率不太靠谱；

Timing：setimeout（）；

clearimeout（）

DOM：

//文档就绪函数，当文档加载完毕再触发对应事件

/* window.onload = function () {

alert(document.getElementById("btn").innerHTML);

};*/

// id选择器：若有同名id则只返回在上方的那个。

//如果没有指明id，则返回一个null

/*DOM文档对象模型，浏览器通过渲染HTML文件生成一个层次分明的DOM数

* JS可以通过这种层级关系对其中任意一个DOM节点进行操作

* Core Dom:通用性，可以作用于XML HTML等任意具有结构性的文档

* Xml Dom专门操作XML文档

* HTML Dom专门操作HTML文档*/

//数组类型，会有多个返回值.document.getElementsByClassName(),document.getElementsByTagName()都会返回数组类型的。

console.log(document.getElementsByName("sex"));

console.log(document.getElementsByTagName("input"));

varinputs= document.getElementsByTagName("input");

for(vari= 0;i< inputs.length;i++)

{

console.log(inputs[i]);

}

//增强for循环；

for(itemin inputs)

{

console.log(item);

}

改变属性

/*1查找你要操作的元素*/

varimg= document.getElementById("img");

/*2.获取对应的属性值*/

functiongetAtt() {

varsrc= img.getAttribute("src");

console.log(src);

varid= img.getAttribute("id");

console.log(id);

}

functionsetAtt() {

img.setAttribute("src","../../../../img/2.jpg");

}

添加事件：

/*在ie低版本中无效

*书写比较繁琐*/

functionadd() {

varshow= document.getElementById("show");

// show.setAttribute("onclick","showHello()");

show.onclick= showHello;

}

functionshowHello() {

alert("hello");

}

//替代方法。点符号法。直接赋值；

操作CSS文件

functionchange() {

vara= document.getElementById("text");

/* text.style.color = "red";

text.style.fontSize = "30px";*/

//太过麻烦

//方法1：

// cssText

// text.style.cssText = "color:red;font-size:30px;font-style:italic";

//没有代码提示

/*方法2

*同过更改classname来匹配已经写好的样式文件*/

text.className+= " new ";

// text.className += ";new ";适用于还有行内样式时。追加样式。

需要注意很多属性是驼峰写法。