跟随我在oracle学习php（12）

DOM 文档对象模型 body：(什么时候）找到标签 操作标签
找到标签：(都会返回一个js对象)
document.getElementById() 通过id
document.getElementsByName() 通过name值
document.getElementsByTagName() 通过标签名
document.getElementsByClassName()通过class值
<button id="btn">id-btn</button>
<button >btn</button>
<button >btn</button>
<button >btn</button>

<script>
var btnDom = document.getElementsByTagName('button');
console.log(btnDom); //找出来的东西叫集合 类似是数组
for(var i in btnDom){ //用for in 遍历的时候 全出来了
if(isNaN(i)){ //需要判断非数字的跳过
continue;
}
console.log(btnDom[i]);
}
console.log('-----------------');
for(var i =0;i<btnDom.length;i++){　//这种遍历不用判断
console.log(btnDom[i]);
}
</script>

结合嵌套来找

节点操作
在对一些元素进行节点操作的时候需要通过对其父节点以及其他有关系的节点来进行相关设置，以下为部分层级关系的获取

元素.parentNode //获取父元素节点
元素.firstElementChild //获取第一个子节点，也有firstChild来获取的，但是存在bug
元素.children //获取所有子节点
元素.ownerDocument //获取该节点文档根节点
元素.previousElementSibling //获取当前节点的前一个同级节点
元素.nextElementSibling //获取当前节点的后一个同级节点

操作js对象 假设：obj里面存了一个js对象
内容：
非表单元素：obj.innerHTML（获取） obj.innerHTML=***（修改）
表单元素：obj.value obj.value=***

样式:
obj.style.color obj.style.color="red"
带有-的变成“-”后面首字母大写然后去掉“-”这种操作只能操作行内样式
属性：
obj.setAttribute('属性名','属性值');//覆盖性设置属性
obj.getAttribute('属性名');//得到属性值
obj.removeAttribute('属性名'); //删除属性
事件：
方式1：onclick属性
方式2：js中定义
obj.onclick=function(){

}(不可传参数）
方式3：
obj.addEventListener('click',f1)(不可传参数，可添加多种方法，删除时从最后一个删）

创建删除元素对象：
obj.remove();
document.createElement('标签名')创建，传回对象，没有内容没有属性，不在页面里
var bdobj=document.getElementsByTagName('body')[0];

bdobj.append(btnobj);使在页面显示

事件对象：
事件流：多个彼此嵌套元素，他们拥有相同的事件，最内部元素事件被触发后，外边多个元素的同类型事件也会被触发，多个元素他们同类型事件同时执行的效果称为“事件流”

获取事件对象：
node.onclick = function(evt){evt就是事件对象}
addEventListener(类型,function(evt){}/函数名字);
为兼容老版IE:var evnt = evt ? evt : window.event；
阻止事件流：
event.stopPropagation(); //主流浏览器

eval() 函数计算 JavaScript 字符串，并把它作为脚本代码来执行。

如果参数是一个表达式，eval() 函数将执行表达式。如果参数是Javascript语句，eval()将执行 Javascript 语句。

Option()构造函数接受两个参数：文本(text)和值(value);第二个参数可选.虽然这个构造函数会创建一个Object的实例，但是兼容DOM的浏览器会返回一个<option>元素。我们依然可以使用appendChild()将新的选项加到选择框中。例如：

var newOption = new Option("Option text","Option value");
selectbox.appendChild(newOption);
这种方式在除IE之外的浏览器都可以使用。由于存在BUG,IE在这种方式下不能正确设置新选项的文本。