js对象及DOM

对象：Windows里

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

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

/* 基础路径： origin

* 安全协议： protocol

* 端口名称： hostname

* 端口号： port

* 查询内容部分： search*/

function assignPage () {

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

}

function reloadPage () {

location . reload ()刷新

}

function replacePage () {

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" ));

var inputs = document . getElementsByTagName ( "input" );

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

{

console . log ( inputs [ i ]);

}

// 增强 for 循环；

for ( item in inputs )

{

console . log ( item );

}

改变属性

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

var img = document . getElementById ( "img" );

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

function getAtt () {

var src = img . getAttribute ( "src" );

console . log ( src );

var id = img . getAttribute ( "id" );

console . log ( id );

}

function setAtt () {

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

}

添加事件：

/* 在 ie 低版本中无效

* 书写比较繁琐 */

function add () {

var show = document . getElementById ( "show" );

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

show . onclick = showHello ;

}

function showHello () {

alert ( "hello" );

}

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

操作CSS文件

function change () {

var a = 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 "; 适用于还有行内样式时。追加样式。

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