JavaScript入门

获得元素

• document.getElementById()
• document.getElementsByTagName()
• document.getElementsByClassName()

修改HTML内容

• document.getElementById(id).innerHTML = ‘helloWorld’

修改HTML属性

• element.getAttribute()
• element.setAttribute()
• element.src
• element.href

修改样式

• document.getElementById(id).style.color = 'blue'

DOM事件不同的写法

1. <h1 onclick="alert('helloworld')">请点击该文本</h1>

2. Element.onclick = function(){displayDate()};

3. Element.addEventListener("click", function{});

DOM添加和删除节点

• document.createElement("p")
• document.createTextNode("新增")
• parent.appendChild(child)
• parent.removeChild(child)

var p = document.createElement("p"); // <p></p>  
var word = document.createTextNode("我是新增的p标签");  // 我是新增的p标签

p.appendChild(word);  //<p>我是新增的p标签</p>

var div1 = document.getElementById("div1");
div1.appendChild(p);  

var p1 = document.getElementById("p1");
div1.removeChild(p1);

window.sereen

• screen.availWidth    可用屏幕宽度
• screen.availHeight   可用屏幕高度

window.location

• location.hostname   返回web主机的域名
• location.pathname   返回当前页面的路径和文件名
• location.protocol      返回所使用的web协议(http:// 或 https://)
• location.href             返回(当前页面的)整个URL

window.history

• history.back()        与在浏览器中点击后退按钮相同
• history.forward()    与在浏览器中点击前进按钮相同
• history.go