查询
1.通过id、name、class、标签名查。这称为core dom(核心dom)
- document.getElementById(“id名”);
- document.getElementsByName(“name值”);
- document.getElementsByTagName(“div”)//标签div/p/等,*代表查所有标签
document.getElementsByClassName(“类名”);
2.html dom(了解)
访问数组。document.links[0].href 第一个a标签的href属性。
- 访问表单域。根据表单域的name值/id值。document.form[0].username.value
注意:表单域的name一般不要起成submit,因为form1.submit();是提交表单,起submit相当于属性把方法覆盖了,form1.submit属性把form1.submit()方法覆盖了,js中方法也可以看成属性,只不过方法的属性值是一个函数。
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
//1.根据id查询
var div1 = document.getElementById("btn1");
//2.根据name属性值查询,返回一个数组
var allObject = document.getElementsByName("div");
//3.根据类名(样式名)查询,返回一个数组
var d1 = document.getElementsByClassName("myClass1");
alert(d1.length);
// for(var i in d1){
// alert(d1[i].innerHTML);
// }
//4.根据标签名查询,返回一个数组,"*"表示查询全部标签
var oAllElements = document.getElementsByTagName("*");
var oAll =document.all;
// alert(oAll.length);
// for(var i in oAll){
// alert(oAll[i]);
// }
}
</script>
</head>
<body>
<div id="div1" class="myClass1">
我是div1
<p>nihao</p>
</div>
<div id="div2" class="myClass1">
我是div2
</div>
<span id="span1">
我是span
</span>
</body>
</html>
提交表单:
<script type="text/javascript">
function test () {
var form1 = document.getElementById("form1");
form1.action = "查询.html";
form1.submit();
}
</script>
</head>
<body>
<form id="form1" action="" method="post">
<input type="button" value="提交" onclick="test();"/>
</form>
3.通过节点之间的关系查询
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>(c) Copyright 2017 All Rights Reserved. </title>
<script type="text/javascript">
window.onload = function () {
//所有的dom节点都支持这些属性
//获得文档的根节点,相当于html文档里面的<html>标签
var root = document.documentElement;
var div = document.getElementById("test"); //div加载完才能使用
//Dom的属性 1.nodeName
//alert(root.nodeName + ":" + div.nodeName);//html:div
//2.nodeValue获得文本节点中的文本值
//alert(root.nodeValue + ":" + div.firstChild.nodeValue);
//3.nodeType有三种,代表1、标签、2、属性、3、文本
//1:3:2
//alert(root.nodeType + ":" + div.firstChild.nodeType + ":" + div.getAttributeNode("id").nodeType); //1:3:2
//4.firstChild得到第一个子节点
//alert(root.firstChild);
//5.lastChild得到最后一个子节点
//alert(root.lastChild);
//6.childNodes所有子节点
//7.previousSibling前一个节点
//8.nextSibling 后一个节点
var body = document.body;
//body的第一个子节点可能不是div,是text节点
var textNode = body.firstChild;
alert(textNode.nextSibling.innerHTML);
//9.ownerDocument 获得该节点所属的文档对象
//alert(root.ownerDocument);
//10.attributes 得到属性对象的数组 attributes[0] 访问第一个属性
// var attriArr = div.attributes;
// alert(attriArr.length);
// alert(attriArr[0]);//object Attr
}
</script>
</head>
<body>
<div id="test">
div1
</div>
</body>
</html>
注:body第一个孩子节点可能是text文本节点.
得到、设置dom对象的属性
1.html dom
对象名.属性名
例:img1.src=”../../路径”;
2.core dom
dom对象.getAttribute(“src”);
dom对象.setAttribute(“src”,属性值);
3.对象名[属性名]
img[“src”]=”“;
如果属性是变量,推荐2、3方式。
<script type="text/javascript">
window.onload = function () {
window.setInterval(displayImg,1000);
function displayImg () {
var img1 = document.getElementById("img1");
//var i = 1;
img1.setAttribute("src","images/future2.jpg");//"+(i++)+"
}
}
</script>
</head>
<body>
<img id="img1" src="images/future1.jpg"/><!--"+i+"-->
</body>
使用js操作样式
一、修改单一样式
需求:修改style中的背景颜色
通过dom对象.style.属性值修改,注:div.style得到CSS2Properties对象,无法用来修改整个style.
二、修改整套样式
一次性修改50个样式,上述修改方式要50行代码。而修改整套样式,只需要通过className修改样式。
原本样式为class1,设置div1.className=”class2”;