原生js    firstChild  获取元素的第一个节点问题

firstChild 获取当前元素节点下的第一个子节点。

获取到的子节点可能是元素节点，但编程中更可能是注释节点或文本节点。
没有子节点则返回null



下面引用代码说明
下面代码我们需求是获取div的第一个子元素节点。但是结果返回的是文本节点，因为兼容问题，

.   在IE9+和其他标准浏览器中，div与p之间的空白区域被认为是第一个子节点为空白节点（即文本节点），div显示数字3。

.   在IE8和IE8以下浏览器中，div显示数字1，是元素节点。声明 <!DOCTYPE>，与IE9+和其他标准浏览器一致。
<div id="demo">
   <p >我是第1个p</p>
   <p >我是第2个p</p>
   <p >我是第3个p</p>
</div>
<script type="text/javascript">
   let ul = document.getElementById("demo");
   let first =ul.firstChild;
   console.log(first.nodeType);   //3      nodeType 属性返回以数字值返回指定节点的节点类型。1 代表元素节点   2 代表属性节点   3 代表文本节点
</script>

这里我们可以这样做

把空白部分清空（根据具体需求，这里不推荐）
<div id="demo"><p >我是第1个p</p><p >我是第2个p</p><p >我是第3个p</p></div>
<script type="text/javascript">
   let ul = document.getElementById("demo");
   let first =ul.firstChild;
   console.log(first.nodeType);   //1      nodeType 属性返回以数字值返回指定节点的节点类型。1 代表元素节点   2 代表属性节点   3 代表文本节点
</script>

也可以使用firstElementChild代替firstChild
<div id="demo">
   <p >我是第1个p</p>
   <p >我是第2个p</p>
   <p >我是第3个p</p>
</div>
<script type="text/javascript">
   let ul = document.getElementById("demo");
   let first =ul.firstElementChild;
   console.log(first.nodeType);   //1      nodeType 属性返回以数字值返回指定节点的节点类型。1 代表元素节点   2 代表属性节点   3 代表文本节点
</script>

想要判读元素是否在页面内首先需要获取两个量：
1、$("#test1").offset().top 元素距离顶部的距离
2、$(document).scrollTop() 页面翻过去的距离
用第一个量减去第二个量就能判断出元素距离浏览器窗口顶部的距离，再根据浏览器窗口高度即可知道元素是否在窗口中出现
$(window).height() 浏览器窗口高度

即：0 < $("#test1").offset().top - $(document).scrollTop() < $(window).height() 则表明在窗口中出现




关于clientHeight、offsetHeight、scrollHeight




window.screen.availWidth 返回当前屏幕宽度(空白空间) 

window.screen.availHeight 返回当前屏幕高度(空白空间) 

window.screen.width 返回当前屏幕宽度(分辨率值) 

window.screen.height 返回当前屏幕高度(分辨率值) 

window.document.body.offsetHeight; 返回当前网页高度 

window.document.body.offsetWidth; 返回当前网页宽度 




我们这里说说四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释。




这四种浏览器分别为IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。




clientHeight

大家对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。




offsetHeight

IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。

NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。




scrollHeight

IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。

NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。




简单地说

clientHeight 就是透过浏览器看内容的这个区域高度。

NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于 clientHeight 时，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。

IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。




同理

clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可。




=======================================================================




clientHeight与offsetHeight的区别




许多文章已经介绍了clientHeight和offsetHeight的区别，就是clientHeight的值不包括scrollbar的高度，而offsetHeight的值包括了scrollbar的高度。然而，clientHeight和offsetHeight的值到底由什么组成的呢？如何计算这两个数的值？




1. clientHeight和offsetHeight的值由什么决定？




假如我们有以下的DIV，主要显示的文字为"This is the main body of DIV"。




如上图所示，clientHeight的值由DIV内容的实际高度和CSS中的padding值决定，而offsetHeight的值由DIV内容的实际高度，CSS中的padding值，scrollbar的高度和DIV的border值决定；至于CSS中的margin值，则不会影响clientHeight和offsetHeight的值。




2. CSS中的Height值对clientHeight和offsetHeight有什么影响？




首先，我们看一下CSS中Height定义的是什么的高度。如在本文最后部分“APPENDIX示例代码”（注：以下称为“示例代码”）中，innerDIVClass的Height值设定为50px，在IE下计算出来的值如下所示。也就是说，在IE里面，CSS中的Height值定义了DIV包括padding在内的高度（即offsetHeight的值）；在Firefox里面，CSS中的Height值只定义的DIV实际内容的高度，padding并没有包括在这个值里面(70
 = 50 + 10 * 2)。




in IE: 

innerDiv.clientHeight: 46

innerDiv.offsetHeight: 50

outerDiv.clientHeight: 0

outerDiv.offsetHeight: 264




in Firfox:

innerDiv.clientHeight: 70

innerDiv.offsetHeight: 74

outerDiv.clientHeight: 348

outerDiv.offsetHeight: 362







在上面的示例中，也许你会很奇怪，为什么在IE里面outerDiv.clientHeight的值为0。那是因为示例代码中，没有定义outerDIVClass的Height值，这时，在IE里面，则clientHeight的值是无法计算的。同样，在示例代码中，如果将innerDIVClass中的Height值去年，则innerDIV.clientHeight的值也为0。(注：在Firefox下不存在这种情况)。




如果CSS中Height值小于DIV要显示内容的高度的时候呢（当CSS中没有定义overflow的行为时）？在IE里面，整个clientHeight（或者offsetHeight）的值并没有影响，DIV会自动被撑大；而在Firefox里面，DIV是不会被撑开的。如在示例代码中，将innerDivClass的Height值设为0，则计算结果如下所示。IE里面的DIV被撑开，其clientHeight值等于内容的高度与padding*2的和；而Firefox里面，文字将溢出DIV的边界，其clientHeight值正好是padding值的两倍。




In IE:

innerDiv.clientHeight: 38

innerDiv.offsetHeight: 42

outerDiv.clientHeight: 0

outerDiv.offsetHeight: 256




In Firefox:

innerDiv.clientHeight: 20

innerDiv.offsetHeight: 24

outerDiv.clientHeight: 298

outerDiv.offsetHeight: 312

下面给大家分享一个小案例，如下图：
目的：当鼠标在第一个 div 中移动时，可以在第二个 div 中会显示鼠标对应的坐标值

一、创建两个 div 元素并为其设置 CSS 样式，如下图：


运行效果，如下图：


二、书写 JavaScript 部分，先获取两个 div 元素，如下图：

三、当鼠标移入第一个 div 时，触发上述效果，因此我们使用"onmousemove"事件，如下图：




onmousemove：该事件会在鼠标在元素中移动时触发
四、执行上述代码，如下图：
事件对象：当事件的响应函数被触发时，浏览器每次都会将一个事件作为实参传递给响应函数



在事件对象中封装了当前事件相关的一切信息，比如鼠标的坐标 、键盘哪个按钮被按下 、鼠标滚轮滚动的方向等


五、获取鼠标指针的坐标值，使用以下方法，如下图：

五、使用鼠标 / 键盘属性 clientX、clientY，如下图：

六、执行上述代码，如下图：

七、测试其在各浏览器的兼容性问题，发现谷歌、火狐、 IE9 及以上浏览器，均可运行，但是 IE8 及以下浏览器会报错，如下图：

八、分析原因，并修改代码，如下图：
在 IE8，响应函数被触发时，浏览器不会传递事件对象
在 IE8 及以下的浏览器中，是将事件对象作为 window 对象的属性保存


九、此时 IE8 及以下浏览器均可运行，如下图：

十、经测试，各浏览器均可完美运行，案例完成 ！

JS中获取元素方法
JS中有很多获取元素的方法
Id（id名）
TagName（标签名）
ClassName（类名）
选择器
获取第一个元素
获取第所有元素

JS中有很多获取元素的方法
可以通过id，name，class等。
Id（id名）
document.getElementById()
//通过id进行获取
<div id="one">hello world!</div>
var element= document.getElementById("one");//括号内是元素的id名

返回值

元素的id应该是唯一的，如果元素存在则返回DOM的Element对象，如果未找到则返回null。
TagName（标签名）
document.getElementsByTagName()
//通过Name进行获取
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>
var li_list = document.getElementsByTagName("li");

返回值

这里的name是指元素的标签名称（div）并非属性中的name值，返回的是符合name参数的元素的集合，好像是伪数组。
//通过Name进行获取
<ul id = "one">
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>

<ul id = "two">
	<li>4</li>
	<li>5</li>
	<li>6</li>
</ul>
var ul_two = document.getElementsById("two");
var ul_two_li = ul_two.getElementsByTagName("li");

如果存在多个符合标签名字的元素而你只想获取其中部分的，可以先通过getElementsById 获取包含它的父级元素当做document，然后再进行getElementsByTagName 获取。
ClassName（类名）
document.getElementByClassName()
//通过class进行获取
<div id="one" class = "box">hello world!</div>
<div id="two" class = "box">hello world!</div>
var element= document.getElementByClassName("box");//括号内是元素的class名

返回值

同样是返回一个符合classname的元素集合。
选择器
选择器很方便，不用使用特定的形式来选中元素，只需要使用对应的规则计算机即可明白你想使用什么方式来获取。
//通过class进行获取
<div id="one" class = "box">hello world!</div>
<div id="two" class = "box">hello world!</div>

id：# + id名（"#one"）

ClassName：. + 类名(".box")

TagName：标签名(“div”)
获取第一个元素
document.querySelector()
//通过class进行获取
<div id="one" class = "box">hello world!</div>
<div id="two" class = "box">hello world!</div>
var element= document.querySelector(".box");//获取第一个div
var element= document.querySelector("#two");//获取第二个div
var element= document.querySelector("div");//获取第一个div

获取第所有元素
document.querySelectorAll()
//通过class进行获取
<div id="one" class = "box">hello world!</div>
<div id="two" class = "box">hello world!</div>
var element= document.querySelector(".box");//两个div都获取
var element= document.querySelector("#two");//获取第二个div
var element= document.querySelector("div");//两个div都获取

初学JS小白一枚，有什么问题或者还有其他方法还请见谅和评论。