通过 id 查找 HTML 元素
var x=document.getElementById("intro");
通过标签名查找 HTML 元素
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
通过类名找到 HTML 元素
var x=document.getElementsByClassName("intro");
模拟点击:
document.getElementById('Mbutton').click();
模拟输入:
document.getElementById('Mtxt').value='123456';
document.getElementsByName("username")[0].value="netname";
选中复选框:
document.getElementById("myCheck").checked=true;
获得元素的子节点集合:
document.body.childNodes;
document.getElementById('J_QRCodeImg').childNodes;
获取元素集合(动态):
var x = document.getElementsByTagName("p");//返回 HTMLCollection 对象。
获取所有匹配的节点(静态):
document.querySelectorAll("p"); //返回NodeList对象
找出head下所有的标签
document.head.querySelectorAll("*")
找出所有class=box的标签
document.querySelectorAll(".box")
找出所有class=box的div标签
document.querySelectorAll("div.box")
找出所有id=lost的标签
document.querySelectorAll("#lost")
找出所有p标签并且id=lost的标签
document.querySelectorAll("p#lost")
找出所有name=qttc的标签
document.querySelectorAll("*[name=qttc]")
找出所有存在name属性的标签
document.querySelectorAll("*[name]")
找出所有class=hot并且存在name属性的p标签
document.querySelectorAll("p[class=hot][name]")
获取单个(第一个)匹配的节点:
document.querySelector("p");
给对象添加事件句柄:
document.getElementById('Mbutton').addEventListener('click', getUser);
function getUser() {alert("添加的事件代码");}
常见事件:
onchange HTML 元素改变
onclick 用户点击 HTML 元素
onmouseover 用户在一个HTML元素上移动鼠标
onmouseout 用户从一个HTML元素上移开鼠标
onkeydown 用户按下键盘按键
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onsubmit 确认按钮被点击
表单格式:
<form action="demo_form.php" method="post">
<input type="text" name="fname" required="required">
<input type="submit" value="提交">
</form>
获取表单某项的值:
var x=document.forms["myForm"]["fname"].value;
直接在浏览器地址调用/执行JS方法:
javascript:void(MyFunc());
移除元素:
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
判断是否存在指定字符:
element=document.getElementById('myimage');
if(element.src.match("bulbon")){
alert("找到并返回找到的字符");
}else{
alert("返回null");
}
获取Cookie:
var x = document.cookie;
返回Document对象集合:
doucment.images;
</pre>
<pre class="prettyprint lang-js linenums">控制台输出:
console.log("控制台调试输出");
获取URL协议:http:/https:
window.location.protocol;
返回当前 URL 的主机名称和端口号:
window.location.host;
写入HTML 输出流:
document.write("<h2>这是一个标题<h2>");
写入流:
document.getElementById("MyHtml").innerHTML="现在是我的啦";
给window窗口触发添加触发事件:
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = Math.random();
});
添加事件传递参数:
document.getElementById("myBtn").addEventListener("click", function() {
myFunction(p1, p2);
});
function myFunction(a, b) {
var result = a * b;
document.getElementById("demo").innerHTML = result;
}
改变对象的样式:
x=document.getElementById("demo");
x.style.color="#ff0000";
document.getElementById("p2").style.color="blue";
函数表达式:
var x = function (a, b) {return a * b};//匿名函数
添加元素:
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
替换元素:
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
修改Cookie:
document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";
删除Cookie:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
重写Style样式:
document.getElementsByClassName("login-form")[0].style.cssText="float:left;top:10px;";