JS DOM、点击事件
JS DOM
加载事件onload
js代码执行的时候，需要html&css的支持
onload在页面加载完之后执行
dom：用JS对html标签进行增删改查
元素节点获取
var name = document.getElementById("userName");
var inputs = document.getElementsByTagName(''input);
文本节点获取
需要借助div元素节点在获得其内部的文本节点。
<div>hello<div>
var dvnode = document.getElementsByTagName('div')[0];
divnode.firstChild; //(或者调用lastChild)获得元素div内部的第一个子节点对象，而不是自己这个节点
兄弟节点
firstChild、lastChild：父节点获得第一个/最后一个子节点
nextSibling：获得下一个兄弟节点
previousSibling：获得上个兄弟节点
childNodes：父节点获得内部全部的子节点信息
<script>
window.onload = function() {var ull = document.getElementsByTagName('ul')[0];console.log(ull.childNodes);console.log(ull.firstChild);console.log(ull.firstChild.nextSibling);console.log(ull.lastChild);console,log(ull.lastChild.previousSibling);
}
</script>父节点
节点名.parentNode
console.log(blue);
console.log(blue.parentNode);
属性值操作
1. 获取属性值
itnode.属性名; //只能操作五c规定的属性值
itnode.getAttribute(属性名); //规定的和自定义的都可以获取
2. 设置属性值
itnode.属性名 = 值; //只能操w3c规定的属性
itnode.setAttribute(名称，值); //规定的和自定义的都可以设置
console.log(baidu.className); //className是class的一个别名，不可以直接访问class属性Field、Attribute、Property
节点创建和追加
1. 创建
元素节点：document.createElement(tag标签名);
文本节点：document.createTextNode(文本内容);
属性设置：node.setAttribute(名称，值);
2. 追加
父节点.appendChild(子节点);
父节点.insertBefore(newnode,oldnode); //newnode放到oldnode的前边
父节点.replaceChild(newnode,oldnode); //newnode替换到oldnode节点
节点删除
父节点.removeChild(子节点);
知道子节点的，需要通过子节点找到父节点，然后再删除子节点：
green.parentNode.removeChild(green);
点击事件
通过鼠标、键盘对页面所做的动作就是事件。事件一旦发生需要有事件处理，该处理成为“事件驱动”，事件驱动通常由函数担任
onclick、onmouseover、onmouseout、onkeyup、onkeydown、onblur、onfocus、onsubmit
在标签内些onclick事件
<input id="btnld" type="button" value="Press Me" οnclick="alert('thanks');">
在JS写οnclick=function(){}函数
var btn = document.getElementById('btnld');
btn.onclick = function() {
alert('thanks');
}