前端需要谨记的知识备份

来源：互联网发布：网络语笔芯是什么编辑：程序博客网时间：2024/05/10 07:05

1.DOM

节点之间的关系：父子级，兄弟级

节点操作：获取父子节点，兄弟节点

文档的根节点：document.documetElement

body节点：document.body

当前激活的节点：document.acticeElement //IE

鼠标节点操作：

鼠标事件对象：event

鼠标来源节点：event.fromElement

鼠标去向节点：event.toElement

当前激活的节点：event.srcElement //IE

event.target //ff

节点对象：node

       获取父节点：node.parentNode, node.parendElement,
       获取所有子节点：node.childNodes（包含文本节点及标签节点）,node.children
       获取第一个子节点：node.firstChild
       获取最后一个子节点： node.lastChild
       获取上一个兄弟节点：node.nextSibling
       获取下一个兄弟节点：node.previousSibling

获取所有兄弟节点：

jquery: $(dom).siblings();

js: 思路：先获取该节点的父节点，通过父节点获取父节点的所有子节点，

排除当前节点

2.DOM操作

增、删、改、查

增加：写、创建、克隆、插入

写：document.write()

创建：document.createElement() || document.createTextNode()

克隆：cloneNode()

插入：appendChild() || inserBefore()

删除：

删除节点：removeChild()

删除元素属性：removeAttribute()

修改：

修改节点：replaceChild()

修改属性：setAttribute()

查找：

查找节点：

通过ID获取节点：document.getElementById("id")

获取相同元素的节点：getElementByTagName("a")

获取相同名称的节点：getElementByName("name")

查找元素：

getAttribute()

3.如何使用事件,DOM 事件模型

在DOM元素上绑定事件处理器 //兼容

window.onload=function(){…}

obj.onmouseover=function(e){…}

obj.onclick=function(){…}

W3C事件模型 //IE不支持

window.addEventListener(‘load’,function(){…},false);

document.body.addEventListener(‘keypress’,function{…},false);

obj.addEventListener(‘mouseover’,callBack,true);

function callBack(){…}

IE事件模型 //IE

window.attachEvent(‘onload’,function(){…});

document.body.attachEvent(‘onkeypress’,myKeyHandler);

阻止默认事件

阻止默认事件：在W3C下调用e.preventDefault()，IE下 window.event.returnValue＝false

阻止事件冒泡：在W3C标准里调用e.stopPropagation()，IE下 window.event.cancelBubble=true。

4.XMLHttpRequest

IE7+、所有浏览器都内置了 XMLHttpRequest对象

var xhr = new XMLHttpRequest()

IE5/IE6 下

var xhr = new ActiveXObject("Microsoft.XMLHTTP")

发起XMLHttpRequest请求

   xhr.onreadystatechange=state_Change;   xhr.open("GET",url,true);   xhr.send(null)

5.严格模式与混杂模式

告诉浏览器如何解析CSS=》盒模型引发

严格模式：W3C标准模式

混杂模式：兼容老旧浏览器

6.盒模型

标准盒模型：

w3c 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分

IE盒子模型

ie 盒子模型的范围也包括 margin、border、padding、content，和标准 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 pading。

7.块级元素与行内元素

行内元素会在一条直线上排列，都是同一行的，水平方向排列

块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。

块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。

行内元素与块级元素属性的不同，主要是盒模型属性上

行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效

行内元素转换为块级元素 display:block (字面意思表现形式设为块级)

8.浮动元素

float || clear

1.脱离文档，不占据空间大小，浮动到包含边框或者另一个浮动元素边框

0 0