一.DOM对象获得元素标签方式:
1.直接获得元素标签的方式 :id Tagname Name
通过getElementById获得单个元素标签
var uname=document.getElementById("username");
通过getElementsByTagName获得全部元素标签
var inp=document.getElementsByTagName("input");
通过getElementsByName获得多个元素标签
var name=document.getElementsByName("hobby");
2.间接获得元素标签的方式 childNodes parentNode nextElementSibling previousElementSibling
var child=sel.childNodes; 空白文档也是一个子节点
var parent=opt.parentNode;
var nex2=opt.nextElementSibling;
var pre2=opt.previousElementSibling;
二.DOM对象获得操作元素属性:
1.获得元素属性
方式一:由节点元素标签获得属性(属性的即时值)
var va=inp1.value;
方式二:由节点元素标签获得属性(属性的默认值
var ty2=inp1.getAttribute("type");
2.操作元素属性:
方式一:inp1.type="button";
方式二:inp1.setAttribute("type","button");
三,DOM对象获得操作元素样式:
1.获得元素标签样式:通过标签元素名.style.width
2.操作元素标签样式:方式一:改变元素标签样式:直接修改
元素标签名.style.width="300px"
方式二:改变元素标签样式:通过增加class类来增加对应的css样式 注意:className
div1.className="div2";
四.DOM对象获得操作文本内容:
1.innerHTML会获得HTML内容 innerHTML添加时会解析内容
2.innerText会获得纯文本内容 innerText添加时直接添加所有内容
3.单标签:获得的时候都是用value获得
4.特殊的标签:select、textarea 用value获得
五.DOM对象操作元素标签:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function addNodes(){
/*1.创建p元素标签*/
var p=document.createElement("p");
/*增加p标签的文本内容:照片*/
p.innerText="照片:";
/*增加p标签的input标签*/
var input1=document.createElement("input");
/*给input标签增加属性*/
input1.type="file";
var input2=document.createElement("input");
input2.type="button";
input2.value="删除";
/*2.获取表单标签,把p标签添加到表单标签*/
var fom=document.getElementById("fom");
/*fom.appendChild(p);
p.appendChild(input1);
p.appendChild(input2);*/
/*3.获得最后一个p标签,使添加的标签在它前面*/
var lastNode=document.getElementById("lastNode");
fom.insertBefore(p,lastNode);
p.appendChild(input1);
p.appendChild(input2);
/*4.实现删除标签元素操作*/
input2.onclick=function(){
/*移除p下的子节点*/
p.removeChild(input1);
p.removeChild(input2);
/*移除节点本身*/
p.remove();
}
}
</script>
</head>
<body>
<form id="fom">
<p>
用户名:<input type="text" id="" value="" />
</p>
<p>
照片:<input type="file" />
<input type="button" value="添加" onclick="addNodes()"/>
</p>
<p id="lastNode">
<input type="button" value="提交" />
<input type="button" value="清空" />
</p>
</form>
</body>
</html>