原生js获取document_原生JS常用API整理

Anchor 对象：指HTML超链接

1.修改一个链接的文本，链接和target

//html部分

访问 Microsoft

改变超链接的文本和 URL。也改变 target 属性。target 属性的默认设置是 "_self"，这意味着会在相同的窗口中打开链接。通过把 target 属性设置为 "_blank"，链接将在新窗口中打开。

//js部分

function changeLink(){

document.getElementById(‘myAnchor’).innerHTML=“访问 W3School"

document.getElementById(‘myAnchor’).href=“http://www.w3school.com.cn"

document.getElementById(‘myAnchor’).target=”_blank”

}

Document 对象：指 页面文档文本

1.document输出流输出 文本 或者 HTML

document.write(“Hello World!”) //Hello World

document.write(“

Hello World!”) //带h1标签效果的 Hello World

document.write(document.title) //返回当前页面的标题

document.write(document.URL) //返回当前页面的URL

document.URL , document.referrer , location.href 的区别：

①. 从输出结果上，document.URL 和 windows.location.href 没有区别。

②. 非要说区别的话，你只可以读取document.URL的值，不能修改它。windows.location.href的值你即可以读取也可以修改，可以使用它进行页面跳转。

③. referrer则是返回前一个来源页面的URL，并不是当前页面。

2.元素选择

第一个返回选中id，其余则是返回一个数组

document.getElementById()

document.getElementsByName()

document.getElementsByClassName()

document.getElementsByTagName()

Event 对象

1.获取鼠标的按键，返回按键索引 event.button

请在文档中点击鼠标。一个消息框会提示出您点击了哪个鼠标按键。

2.获取光标的坐标 event.clientX

x=event.clientX

y=event.clientY //获取光标的位置Y轴

3.获取按键码 event.keyCode

Form 和 Input 对象

1.复选框

//js

document.getElementById("myCheck").checked=true //选中

document.getElementById("myCheck").checked=false //取消选中

2.获取input的value

function check(browser)

{

document.getElementById("answer").value=browser

}

您喜欢哪款浏览器？

Internet Explorer

Firefox

Netscape

Opera

您喜欢的浏览器是：

3.form表单相关

①reset()可以清空表单数据

②submit()可以提交表单

function formReset(){

document.getElementById(“myForm”).reset()

}

document.getElementById(“myForm”).submit()

document.getElementById(‘text1’).focus() //获取焦点

document.getElementById(‘text1’).blur() //失去焦点

在下面的文本框中输入一些文本，然后点击重置按钮就可以重置表单。

姓名：

Location 对象

window.location="/index.html" //基于原有域名下的页面跳转

window.location.reload(); //重载页面

window.location , window.location.href , window,location.replace的区别

window.location是页面的位置对象，页面基于域名后添加新增的url跳转

window.location.href是 location的一个属性值，页面替换url跳转

如果需要打开新窗口，使用window.open('')方法

有3个页面 a,b,c

如果当前页面是c页面，并且c页面是这样跳转过来的：a->b->c

1：b->c 是通过window.location.replace("…xx/c") 此时b页面的url会被c页面代替，并且点击后退按钮时会回退到a页面(最开始的页面)

2：b->c是通过window.location.href("…xx/c") 此时b页面的路径会被c页面代替，但是点击回按钮后页面回退的是b页面

两者的区别: 两者后退时所回退的页面不一样

Navigator 对象

用于检测和获取浏览器相关信息

navigator.appName //appname

navigator.appVersion //浏览器的版本信息

naviigator.appCodeName //浏览器代码

navigator.cookieEnabled //是否启用了cookie

navigator.userAgent //浏览器的用户代理报头

Option 和 Select 对象

启用与禁用select

document.getElementById(“mySelect”).disabled=true

document.getElementById(“mySelect”).disabled=false

设置可以选取多个option

document.getElementById(“mySelect”).multiple=true

更改选择项

document.getElementById(“orange”).selected=true;

window 对象

window.open() //打开新窗口

window.location //在域名后追加地址进入新页面

window.location.href //页面地址

window.location.reload() //页面重载

window.print() //打印页面

window.scrollTo(100,500) //窗口滚动到指定位置