标签：dom
文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。
注：一般说的JS让页面动起来泛指JavaScript和Dom
DOM之选择器：
document.getElementById(‘id‘); document.getElementsByName(‘name‘); document.getElementsByTagName(‘tagname‘);
内容
innerText innerHTML var obj = document.getElementById(‘nid‘) obj.innerText # 获取文本内容 obj.innerText = "hello" # 设置文本内容 obj.innerHTML # 获取HTML内容 obj.innerHTML = "<h1>asd</h1>" # 设置HTML内容 特殊的： input系列 textarea标签 select标签 value属性操作用户输入和选择的值
创建标签
方式一：
var obj = document.createElement(‘a‘);
obj.href = "http://www.etiantian.org";
obj.innerText = "老男孩";
var container = document.getElementById(‘container‘);
//container.appendChild(obj);
//container.insertBefore(obj, container.firstChild);
//container.insertBefore(obj, document.getElementById(‘hhh‘));
方式二：
var container = document.getElementById(‘container‘);
var obj = "<input type=‘text‘ />";
container.innerHTML = obj;
// ‘beforeBegin‘, ‘afterBegin‘, ‘beforeEnd‘, ‘afterEnd‘
//container.insertAdjacentHTML("beforeEnd",obj);标签属性
var obj = document.getElementById(‘container‘); 固定属性 obj.id obj.id = "nid" obj.className obj.style.fontSize = "88px"; 自定义属性 obj.setAttribute(name,value) obj.getAttribute(name) obj.removeAttribute(name)
提交表单
document.geElementById(‘form‘).submit()
事例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM之选择器</title>
</head>
<body>
<div>
<div id="n1">n1</div>
<a>123</a>
</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div>
<div class="c1">111</div>
<div class="c1">222</div>
<div class="c1">333</div>
</div>
<form>
<p>用户名：<input name="username" value="123"></p>
<p>密码：<input name="pwd" value="456"></p>
</form>
<script type="text/javascript">
var nid=document.getElementById(‘n1‘);
nid.innerText="jwh";
var lis=document.getElementsByTagName(‘li‘);
for (var i in lis){
var item =lis[i];
item.innerText=i;
}
var lis2=document.getElementsByClassName(‘c1‘);
for(var i in lis2){
var item=lis2[i]
item.innerText=i
}
var username=document.getElementsByName(‘username‘)[0];
var pwd=document.getElementsByName(‘pwd‘)[0];
console.log(username.value,pwd.value)
</script>
</body>
</html>执行效果
dom自增数字
事例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dom自增数字</title>
</head>
<body>
<div>
<div id="num"> 1</div>
<input type="button" value="+1" onclick="Add();"/>
</div>
<div>
<div id="n1">n1</div>
<a>123</a>
</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div>
<div class="c1">111</div>
<div class="c1">222</div>
<div class="c1">333</div>
</div>
<form>
<p>用户名：<input name="username" value="123"></p>
<p>密码：<input name="pwd" value="456"></p>
</form>
<script type="text/javascript">
function Add() {
var nid=document.getElementById(‘num‘);
var text=nid.innerText;
text=parseInt(text);
text+=1;
nid.innerText=text;
}
</script>
</body>
</html>执行结果：
事件和搜索框
事例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dom事件和搜索框</title>
</head>
<body>
<input type="text" id="search" value="输入关键字" onfocus="Focus();" onblur="Blur();"/>
<script type="text/javascript">
function Focus(){
var nid=document.getElementById(‘secrch‘);
var value=nid.value;
if (value=="输入关键字"){
nid.value="";
}
}
function Blur() {
var nid=document.getElementById(‘secrch‘);
var value=nid.value;
if(!value.trim()){
nid.value="输入关键字";
}
}
</script>
</body>
</html>执行结果：
标签：dom
原文地址：http://9272317.blog.51cto.com/9262317/1827464
