<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Element类型（html元素，操作特性 attributes 属性， 创建元素,元素的子节点）</title>
</head>
<body>
<div id="myDiv" class="bd" title="Body text" lang="en" onclick="function click(i){
alert(i);
}">v</div>
</body>
<script>
/*Element
节点具有以下特征：nodeType的值为1；nodeName的值为元素的标签名；nodeValue的值为null；
parentNode可能是Document或Element；
其子节点可能是Element、Text、Comment、ProcessingInstruction、CDATASection或EntityReference。
要访问元素的标签名，可以使用nodeName属性，也可以使用tagName属性
* */
var div = document.getElementById("myDiv");
console.log(div);
console.log(div.id);
console.log(div.className);
console.log(div.title); //"Body text"
console.log(div.lang); //"en"
console.log(div.dir); //" "
div.id = "someOtherId";
div.className = "ft";
div.title = "Some other text";
div.lang = "fr";
console.log(div.id);
console.log(div.className);
console.log(div.title); //"Body text"
console.log(div.lang);
/*操作特性的DOM方法主要有三个，分别getAttribute()、setAttribute()和removeAttribute()。这三个方法可以针对任何特性使用
自定义特性应该加上data-前缀以便验证。
通过setAttribute()方法既可以操作HTML特性也可以操作自定义特性。通过这个方法设置的特性名会被统一转换为小写形式，即"ID"最终会变成"id"。
像下面这样为DOM元素添加一个自定义的属性，该属性不会自动成为元素的特性。div.mycolor = "red"; alert(div.getAttribute("mycolor")); //null（IE除外）
*
* */
function click(i){
alert(i);
}
var cli=div.getAttribute('onclick');
console.log(cli);
div.removeAttribute("class");
console.log(div.className);
console.log(div);
/*
document.createElement()方法可以创建新元素。这个方法只接受一个参数，即要创建元素的标签名这个标签名在 HTML 文档中不区分大小写，而在 XML（包括 XHTML）文档中，
则是区分大小写的。在使用 createElement()方法创建新元素的同时，也为新元素设置了 ownerDocuemnt 属性。此时，还可以操作元素的特性，为它添加更多子节点，
由于新元素尚未被添加到文档树中，因此设置这些特性不会影响浏览器的显示。
* */
/*
元素可以有任意数目的子节点和后代节点，因为元素可以是其他元素的子节点。元素的childNodes 属性中包含了它的所有子节点，这些子节点有可能是元素、文本节点、注释或处理指令。
元素也支持getElementsByTagName()方法。
* * */
</script>
</html>