DOM
DOM 节点类型
文档节点 Document - 根节点。
文档类型节点 DocumentType - DTD 引用即 <!DOCTYPE> 。
元素节点 Element - 标签。
文本节点 Text - 标签中的文本或 CDataSection 内包含的普通文本。
属性节点 Attr - 元素的属性。
CDataSection - 通常是文本节点和注释节点的父类。
注释节点 Comment - 注释。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 300px;
height: 300px;
background-color: ghostwhite;
}
</style>
</head>
<body>
<a href=""></a>
<div id="div1"></div>
<input type="text" id="inp"/>
<button id="btn">send</button>
<script>
var odiv = document.getElementById("div1");
var oinp = document.getElementById("inp");
var obtn = document.getElementById("btn");
obtn.onclick = function(){
/*获取到文本框的内容*/
var value = oinp.value;
oinp.value = "";
/*创建一个p标签*/
var op = document.createElement("p");
var oa = document.createElement("a");
op.innerHTML = value;
var otext = document.createTextNode("删除");
oa.appendChild(otext);
/*oa.innerHTML = "删除";*/
oa.href="javascript:";
oa.style.fontSize = "12px";
oa.style.color = "red";
/*动态版定*/
oa.onclick = function(){
odiv.removeChild(this.parentNode);
}
/*oa加入到op*/
op.appendChild(oa);
/*op加入到div对象*/
odiv.appendChild(op);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul id="ul">
<li><a href="">韦德</a></li>
<li>霍华德</li>
<li>杜兰特</li>
<li>last element</li>
</ul>
<script>
var oul = document.getElementById("ul");
var oli1 = oul.firstElementChild;
oli1.innerHTML = "梅西";
console.info(oul.firstElementChild);
/*创建一个文本节点*/
var otext = document.createTextNode("梅西");
var lastli = oul.lastElementChild;
//lastli.appendChild(otext);
/*直接操作内容*/
lastli.firstChild.appendData("影响大");
lastli.firstChild.insertData(5,"*"); /*第一个参数是位置，第二个参数文本内容*/
lastli.firstChild.deleteData(0,4); /*两个参数，第一个参数表示起始位置，第二个参数长度*/
lastli.firstChild.replaceData(0,20,"&&&");
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{
position: relative;
}
</style>
</head>
<body>
<ul id="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div id="div1">
<div id="div2">
<div name="div3" style="width: 100px;height: 100px;background-color: #007bc5" id="div3">
<h1>h1</h1>
</div>
</div>
</div>
<script>
var oulEle = document.getElementById("ul1");
/*获取到所有的子节点，childNodes*/
var oul = document.getElementById("div1");
console.info(oul.childNodes);
for(var i=0;i<oul.childNodes.length;i++){
console.info(oul.childNodes[i].nodeType);
}
/*获取到第一个字节点
* 获取到第一个元素节点：火狐 谷歌-》firstElementChild IE-》firstChild*/
var oul2 = document.getElementById("ul1");
var firstc = oul2.firstChild;
console.info(firstc);
var elementChild = oul2.firstElementChild;
console.info(elementChild);
/*兼容性问题*/
var oul3 = document.getElementById("ul1");
var firstC = oul3.firstElementChild;
//firstC.style.backgroundColor = "red"; //改变当前元素的样式
var elementChilds = oul3.firstElementChild || oul3.firstChild;
elementChilds.style.backgroundColor = "green";
/*获取到最后一个子节点*/
var lastElement = oul2.lastElementChild || oul2.lastChild;
lastElement.style.backgroundColor='red';
/*获取到前一个兄弟节点*/
var odiv = document.getElementById("div1");
var Silbingele = odiv.previousElementSibling || odiv.previousSibling;
console.info(Silbingele.nodeName);
/*获取后一个兄弟节点*/
var nextSil = oulEle.nextElementSibling || oulEle.nextSibling;
console.info(nextSil.nodeName);
/*获取到父节点*/
var odiv2 = document.getElementById("div2");
var parNode = odiv2.parentNode;
console.info(parNode.nodeName);
/*定位父级，偏移父节点*/
var odiv3 = document.getElementById("div3");
var divParent = odiv3.offsetParent;
console.info(divParent.id);
/*获取到属性节点*/
var odiv4 = document.getElementById("div3");
var attrArr = odiv4.attributes;
console.info(attrArr[0].nodeType);
/*直接指定属性的名称*/
console.info(odiv4.id);
/*增加和删除属性*/
odiv4.setAttribute("title","123");
odiv4.removeAttribute("title");
odiv4.title = "123";
/*创建一个节点*/
var op = document.createElement("p");
op.innerHTML = "这是增加的p元素";
var odiv5 = document.getElementById("div3");
//默认增加到最后
odiv5.appendChild(op);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul id="ul">
<li class=""><a href="">韦德</a></li>
<li class="hhd">霍华德</li>
<li class="hhd">杜兰特</li>
<li>last element</li>
</ul>
<input type="text" name="username"/>
<script>
/*替换节点*/
var oul = document.getElementById("ul");
var oli1 = oul.firstElementChild;
var onewli = document.createElement("li");
var onewText = document.createTextNode("james");
onewli.appendChild(onewText);
oul.replaceChild(onewli,oli1);
/*克隆节点*/
var newli = oul.lastElementChild;
var cloneli = newli.cloneNode(false); /*true 深度克隆 false：浅度克隆*/
//oul.appendChild(cloneli);
oul.appendChild(newli);
/*class*/
var arrclass = document.getElementsByClassName("hhd")[1];
console.info(arrclass);
/*通过标签名字找到对象*/
var liArr = document.getElementsByTagName("li")[0];
console.info(liArr)
/**/
var nameArr = document.getElementsByName("username");
console.info(nameArr)
nameArr[0].style.backgroundColor="red";
</script>
</body>
</html>
