<!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" οnclick="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>