原生js概念知识点

/*DOM: Document Object Medel
文档:html页面
文档对象:页面中的元素
文档对象模型:为了能让程序(js)操作页面中的元素 
DOM 看做一颗树状结构 里面的元素为节点(DOM节点),同时定义方法操作树
元素.childNodes:子节点列表集合
childNodes只包含一级子节点,不包含孙及以下。
标准下:包含文本和元素节点,也包含非法嵌套类型
非标准下:只包含元素类型节点,ie7不包含非法嵌套
元素.nodeType:只读 属性当前元素的节点类型
元素节点:1 \\ 文本节点:3
//属性
//元素属性:元素.attributes 只读属性集合
DOM类型:12种 元素节点、文本节点(也算)
children:只读属性 子节点列表集合。

children:只包含一级子节点,不包含孙及以下。*/

/*
元素.firstChild、lastChild:第一个(最后一个)元素
标准下firstChild会包含文本类型的节点(无效)
非标准:只包含元素节点
元素.firstElementChild(lastElementChild、firstElementChild=children[0]、nextElementSibling、previousElementSibling)
(可以直接再浏览器中使用该属性 需加Element):只读 属性 标准下获取第一个元素类型的子节点
元素.nextElementSibling:下一个兄弟节点
元素.previousElementSibling:上一个兄弟节点

  */

    元素.parentNode:只读 属性 当前节点的唯一的父级节点.(可以直接使用)
    元素.offsetParent:只读 属性 离当前元素最近的一个有定位的父节点
    如果没有定位父级默认为body

    */

/*document.createElement(要创建的标签名)创建元素
父级.removeChild(要删除的元素) 删除元素
添加到指定位置
父级.appendChild(要添加的元素)方法 追加(创建的标签)子元素
oUl.appendChild(oLi);//后面添加
父级.insertBefore(新的元素,被插入元素)
oUl.insertBefore(oLi,oUl.children[0]);//前面插入
父级.replaceChild(新节点,被替换的节点)
document.body.replaceChild(oDiv,oP);前一个替换后一个
oP.appendChild(oDiv);

appendChild,insertBefore,replaceChild都可以操作动态创建出来的节点,也可以操作已有节点*/

//alert(oTab.tBodies[0].rows[1].cells[1].innerHTML);//dd
  /*tHead:表格头
 tBodies:表格内容
 tFoot:表格尾
 rows:行
 cells:列

  */

/*<input type="text" id="text1" name="text1"/>
name :oForm.text1.value/父级.name[第几个].value
有name属性的用name选择比id更好

alert(oForm.text1.value);*/

// onfocus:当元素获取到焦点的时候触发
//onblur:当元素失去焦点的时候
// obj.focus();给指定元素设置焦点
// obj.blur();取消指定元素的焦点

//obj.select();只能选择用户输入的内容

事件冒泡:当一个元素接收到事件的时候,会把他接受到的所有传播给他的父级;一直到 window 为事件冒泡(该发生还是会发生)

//给一个对象绑定一个事件处理函数的第一种形式

//给一个元素绑定事件函数的第二种形式:
//给一个对象的同一个事件绑定多个不同的函数:(同一个按钮点第一次发生ss,第二次 发生xx)

//document.onclick = fn1;
function fn1(){
alert(1);

}

ie:obj.attachEvent(事件onclick,函数名称);
document.attachEvent('onclick',fn1);
ie:没有捕获,点击加on、顺序为从最后一个到第一个
标准:obj.addEventListener(事件不用on,函数名称,是否捕获true or false)
是否捕获:默认为false;false:冒泡、true:捕获;

标准:有捕获、事件名称没有on、顺序为第一排到最后

//事件取消
/*
ie:obj.detachEvent(事件名称,函数名字);
标准:obj.removeEventListener(事件名称,函数名字,是否捕获)

*/

/* 
onkeydown:当键盘按键按下;如果按下不抬起会连续触发
onkeyup:当键盘按键抬起;
// 不是所有元素都能够接受键盘事件,有焦点就可以

按下具体的键位
event.keyCode:数字类型 键盘按键的值 键值
ctrlKey、shiftKey、altKey 布尔值
当一个事件发生的时候,如果 ctrl || shift || alt
键为按下状态则返回true否则false

<script type="text/javascript">
      document.onkeydown=function(event){//键盘按下发生的事
            var e = event || window.event || arguments.callee.caller.arguments[0];
// alert(event.keyCode)//数字代表的键位
             if(e && e.keyCode==13){ // enter 键
                 alert('按下了回车键');
            }
        }; 
</script>

事件默认行为:当一个事件发生的时候浏览器自己默认做得事情
/*
怎么阻止?:
当前这个行为是什么事件触发的,然后在这个事件的处理函数中使用return false;
oncontextmenu:右键菜单事件,显示出来时候触发

猜你喜欢

转载自blog.csdn.net/a772116804/article/details/79804508