前端知识汇总【面试用】（一）

来源：互联网发布：什么软件用网络打电话编辑：程序博客网时间：2024/05/01 07:28

1 DOM基本知识与操作

1.1 DOM结构

document.documentElement 返回文档的根节点<html>

           document.body <body>
            document.activeElement 返回当前文档中被击活的标签节点(ie)
            event.fromElement 返回鼠标移出的源节点(ie)
            event.toElement 返回鼠标移入的源节点(ie)
            event.srcElement 返回激活事件的源节点(ie)
            event.target 返回激活事件的源节点(firefox)
            当前对象为node
            返回父节点：node.parentNode, node.parendElement,
            返回所有子节点：node.childNodes（包含文本节点及标签节点）,node.children
            返回第一个子节点：node.firstChild
            返回最后一个子节点： node.lastChild
            返回同属上一个子节点：node.nextSibling
            返回同属下一个子节点：node.previousSibling

如何访问节点childNods属性中NodeList对象，（NodeList能够动态反应DOM的变化）：

var firstChild=someNode.childNodes[0];

var secondChild=someNode.childNodes.item(1);

var count=someNode.childNodes.length;
parentNode和parentElement功能一样，childNodes和children功能一样。但是parentNode和childNodes是符合W3C标准的，可以说比较通用。而另外两个只是IE支持，不是标准，Firefox就不支持 ,所以大家只要记得有parentElement和children就行了

1.2 DOM操作

添加节点：var returnedNode=someNode.appendChild(newNode); //向childNodes列表末尾添加节点

alert(returnedNode==newNode); //true

var returnedNode=someNode.insertBefore(newNode,someNode.firstChild);//在某个个节点前插入（此处第一个节点前）

移除节点：var formerFirstChild=someNode.removeChild(someNode.firstChild);//移除第一个节点

复制节点：cloneNode(true);//深复制，包含其childNodes

cloneNode(false);//浅复制，不包含childNodes

创建节点：createDocumentFragment() //创建一个DOM片段

createElement() //创建一个具体的元素，创建完还需insert进文档结构中

createTextNode() //创建一个文本节点

查找节点：getElementsByTagName()//通过标签名称，返回的是包含０或多个元素的NodeList

getElementsByName()//通过元素的Name属性的值，同TagName

getElementById()//通过元素Id，唯一性，当为多个时仅返回第一个

兼容性：IE7及以前版本还会返回name特征与给定ID匹配的表单元素；解决方法就是不让表单字段的name与其他元素的ＩＤ相同

替换节点：someNode.replaceChild(A,B); //用A替换B

0 0