1.介绍
dom : document object model 文档对象模型
DOM技术:js语言与html/xml之间沟通的桥梁。
DOM可以让我们通过js语言对html文档进行增删改查操作。
把html文档的组成内容划分为各种节点(对象):
- 文档节点(document),其实HTML根节点的父节点
- 元素节点
- 文本节点
- 属性节点
- 注释节点
2.三种方式获得元素节点对象(查找)
具体操作方法:
- document.getElementById(id属性值);
每次只返回一个元素节点对象
</head>
<body>
<h2>获得节点元素</h2>
<input type="text" id="username" value="xiaoming"/><br />
<input type="text" id="usermail" value="xiaoming@qq.com"/><br />
<input type="text" id="usertel" value="123456789"/><br />
</body>
</html>
<script type="text/javascript">
var tel = document.getElementById("usertel");
console.log(tel);
</script>
- document.getElementsByTagName(tag标签名称);
每次返回一个集合列表对象,可以通过下标方式变为具体元素对象:列表[下标]或列表.item(下标)
</head>
<body>
<h2>获得节点元素</h2>
<input type="text" id="username" value="xiaoming"/><br />
<input type="text" id="usermail" value="xiaoming@qq.com"/><br />
<input type="text" id="usertel" value="1234588889"/><br />
</body>
</html>
<script type="text/javascript">
var hh = document.getElementsByTagName("h2");
console.log(hh);
</script>
- document.getElementsByName(tag标签名称);
不推荐,有浏览器兼容问题,通常应用
在form表单里面
</head>
<body>
<h2>获得节点元素</h2>
<input type="text" id="username" name="1" value="xiaoming"/><br />
<input type="text" id="usermail" name="2" value="xiaoming@qq.com"/><br />
<input type="text" id="usertel" name="3" value="1234789"/><br />
</body>
</html>
<script type="text/javascript">
var email = document.getElementsByName('2');
console.log(email);
</script>
3.获得文本节点
hello
需要借助div元素节点再获得其内部的文本节点;
dvnode.firstChild; //或调用lastChild,因为既是最大的也是最小的孩子节点
</head>
<body>
<h2>获得文本节点</h2>
<input type="text" id="username" name="1" value="xiaoming"/><br />
<input type="text" id="usermail" name="2" value="xiaoming@qq.com"/><br />
<input type="text" id="usertel" name="3" value="1234789"/><br />
</body>
</html>
<script type="text/javascript">
//元素节点对象。firstChild/lastChild;
var hh = document.getElementsByTagName('h2')[0]
console.log('hh.firstChild');
//通过文本节点获得对应的文本信息
console.log(hh.firstChild.nodeValue); //文本节点调用nodeValue获得文本信息
</script>
4.子节点和兄弟节点获取
firstChild,lastChild:父节点获得第一个/最后一个子节点
nextSibling:获得下一个兄弟节点
previousSibling:获得上一个兄弟节点
childNodes:父亲节点获得内部全部的子节点信息
</head>
<body>
<h2>获取子节点</h2>
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
</body>
</html>
<script type="text/javascript">
var ull = document.getElementsByTagName('ul')[0];
console.log( ull.childNodes);
</script>
</head>
<body>
<h2>获取兄弟节点</h2>
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>重庆</li>
</ul>
</body>
</html>
<script type="text/javascript">
var guang = document.getElementsByTagName('li')[2];
console.log( guang.nextSibling.nextSibling);
console.log( guang.previousSibling.previousSibling);
</script>
</head>
<body>
<h2>获取第一个节点</h2>
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>重庆</li>
</ul>
</body>
</html>
<script type="text/javascript">
var hh = document.getElementsByTagName('h2')[0];
console.log(hh.firstChild);
</script>
5.获取父节点:parentNode
</head>
<body>
<h2>子节点和兄弟节点</h2>
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>重庆</li>
</ul>
</body>
</html>
<script type="text/javascript">
var hai = document.getElementsByTagName('li')[1];
console.log(hai.parentNode.parentNode);
</script>
6.属性操作
6.1 属性值操作
百度
- 获取属性值:
元素节点node.属性名称; //只能操作3c规定的属性
元素节点node.getAttribute(属性名称); //规定的和自定义的都可以获取 - 设置(修改)属性值
元素节点node.属性名称 = 值; //只能只能操作3c规定的属性
元素节点node.setAttribute(属性名称); //规定的和自定义的都可以设置
</head>
<body>
<h2>属性值操作</h2>
<input type="text" name="username" value="tom" class="orange" weight="130" /></br/>
<input type="button" value="触发"onclick="f1()" />
<input type="button" value="设置"onclick="f2()" />
</body>
</html>
<script type="text/javascript">
var nm = document.getElementsByTagName('input')[0];
function f1(){
//获取
console.log(nm.type);
console.log(nm.value);
console.log(nm.name);
//console.log(nm.weight); //自定义的获取不了
console.log(nm.getAttribute('weight'));
console.log(nm.className); //class是js的关键字,需要变形为classname
}
function f2(){
//设置
nm.name="usertel";
nm.value ="1234"
nm.className="banana";
// nm.type = "checkbox"; //不推荐 可能不兼容
//nm.weight="150";
nm.setAttribute('weight',150);
}
</script>
获得表单域信息:元素节点对象.value;(获取后可以进行表单验证)