面试html部分

佚名 7年前 (2019-04-11) 随笔 632人围观抢沙发百度已收录

1.DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。

DOM是文档对象模型的简称

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

DOM模型中两个节点可能存在的关系有两种：父子关系，兄弟关系。

添加节点：appendChild(Node newNode):将newNode 添加成当前节点的最后一个子节点；

insertBefore(Node newNode,Node refNode):在ref节点之前插入newNode节点；

replaceChild(Node newChild,Node oldChild):将oldChild节点替换成newChild节点。

移除节点：removeChild(oldChild):删除oldChild子节点。

复制节点：Node cloneNode(boolean deep):复制当前节点，当deep为true时，表示在复制当前节点的同时，复制该节点的全部后代节点，当为false时，表示进复制当前节点。

创建节点：document.createElement(Tag):创建Tag标签对应的节点。

查找节点：document.queryselectorAll(Tag) 查找符合条件的节点

2.IE和标准DOM事件模型之间存在的差别。

事件类型 ie 标准

阻止冒泡 e.cancelBubbble = true e.stopPropagation()

阻止默认事件 e.returnValue = false e.preventDefault()

目标元素 srcElement target

3.XMLHttpRequest 对象用于在后台与服务器交换数据。

XMLHttpRequest 优点：

在不重新加载页面的情况下更新网页
在页面已加载后从服务器请求，接收数据
在后台向服务器发送数据

<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
  {// code for all new browsers
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)//老版本
  {// code for IE5 and IE6
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlhttp!=null)
  {
  xmlhttp.onreadystatechange=state_Change;
  xmlhttp.open("GET",url,true);
  xmlhttp.send(null);
  }
else
  {
  alert("Your browser does not support XMLHTTP.");
  }
}

function state_Change()
{
if (xmlhttp.readyState==4)
  {// 4 = "loaded"
  if (xmlhttp.status==200)
    {// 200 = OK
    // ...our code here...
    }
  else
    {
    alert("Problem retrieving XML data");
    }
  }
}
</script>

4.盒模型 —— 外边距、内边距和边框之间的关系，及IE8以下版本的浏览器中的盒模型

ie 5 6的宽度是content + border+padding
标准盒模型的宽度是content
统一盒模型解决这种办法是设置box-sizing
还有不要给固定宽度的元素加内边距，给他的父元素或者子元素加