待补充,不完整 3/20
<head>
<meta charset="utf-8" /><title></title>
<style type="text/css">
.cccc{
border: 1px solid red;
width: 100px;height: 100px;
}
</style>
</head>
<body>
<input type="text" id="inputcountry" value="" />
<button οnclick="task()">点击我</button>
<div id="asia" class="cccc">
<span id="china">
china
</span>
<span id="korea">
korea
</span>
<span id="indio">
indio
</span>
</div>
<script type="text/javascript">
//特征相关属性
var china = document.getElementById('china');
console.log(china);
var asia = document.getElementById('asia');
console.log(asia);
console.log(asia.innerHTML);//不包括自身
console.log(asia.outerHTML);//包括自身
asia.classList.add('aaa','bbb');//添加类名
asia.classList.remove('bbb');//移除类名
console.log(asia.classList.contains('bbb'));//查看是否存在bbb
console.log(asia.classList.item(1));//输出第2个类名
console.log(asia.className);//输出所有类名
console.log(asia.classList);//输出这个类中的所有元素数组
//盒子模型相关属性
console.log(asia.clientHeight);
console.log(asia.clientWidth);
//相关节点的属性
console.log(asia.children);//所有子元素的数组
console.log(asia.childElementCount);//
console.log(asia.children.length);//含0,1,2的子元素
//查找相关属性
console.log(asia.querySelectorAll('span'));//父元素的所有子元素
console.log(asia.querySelector('span'));//父元素的第一个子元素
驼峰命名法
<div id="anc" class="a" date-helloworld="hello">
</div>
var anc = document.getElementById('anc');
console.log(anc.dateset.helloWorld);注意大写