您的位置：首页 > Web前端 > JavaScript

DOM文档对象模型

2017-09-13 20:07 423 查看

查询

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:d
4000
iv
//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”;

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： dom 标签使用js操作样式 html-dom coredom

相关文章推荐

新的分享

章节导航