如何查看某个节点下的节点或值

直接输出一个节点集合，在浏览器控制台，把那节点一点一点的剥开就可以了

例如

console.log(Node.childNodes);//

编写js是的注意

1. 注意可以平稳退化（浏览器禁止支持js时，也要有相似的功能）
2. 是否向后兼容,注意浏览器是否支持该js的语句(虽然每个浏览器支持js都比较好，但也有个别)，在使用之前可以先检测一下，可以写在函数的最前面，不能使用则返回false结束，可以就继续执行，：如

//不能加括号，以为如果加了括号，就是检测这个函数的值了
if(document.getElementById){
  console.log("可以使用");
}
//这个也可以检测，也比前面那个好，不可用则返回false
function test() {
  if(!document.getElementById){
    return false;
  }
}

3. 对于向后兼容有浏览器嗅探技术，不过不推荐，因为浏览器可能会撒谎，而且代码量也是越来越多，不过正在被更简单，更健壮的对象检测技术替代
4. 不要忽略脚本对Web应用整体性能的影响，如：外部引入的Js一般是放在文档的后面。
5. 使用时要压缩脚本，把除代码意外的删掉，把注释、空格等删除和把代码写精简，把变量名写简单，所以脚本代码，可以有两份，一份压缩的，一份工作的，并在精简的文件名后加min(abc.min.js)
6. 添加节点的时候是默认往最后一个子节点之后。相当于就是你用js插入数据在某个元素之后，你不要想着后插的那个元素会把先插入的那个元素往后挤。
7. 写函数时，尽量抽象，把具体的值装换为参数，这样可以更加抽象，更通用，可以适用于其他元素后面那个就要比前面那个更加通用

function setPosition() {
  if(!document.getElementById){
    return  false;
  }
  if(!document.getElementById("one")){
    return false;
  }
  let node=document.getElementById("one");
  node.style.position="absolute";
  node.style.top="20px";
  node.style.left="20px";

--------------------------------------------------------

function setPosition(elementID,top,left,position="absolute") {
  if(!document.getElementById){
    return  false;
  }
  if(!document.getElementById(elementID)){
    return false;
  }
  let node=document.getElementById(elementID);
  node.style.position=position;
  node.style.top=top;
  node.style.left=left;

}

9. 如果html中的标签不是主要的内容的标签，只是为了实现Js功能而添加的标签，那么我们用js生成标签即可，防止标签的混乱。
   下面代码的h3和image1就可以用js生成因为这两个元素只是为了显示上面li的信息而已。

<div>
  <section>
    <h1>imageList</h1>
    <ul id="imageList">
      <li><a title="1111" href="../image/u=1642702903,1895459834&fm=26&gp=0.jpg" >图片一</a></li>
      <li><a title="2222" href="../image/u=825479939,1378551285&fm=26&gp=0.jpg" >图片二</a></li>
    </ul>
    <h3 id="imageDescription"></h3>
    <img id="image1" src="">
  </section>
</div>

一：let与var

1. let可以声明块级作用域的变量
2. JS只有函数作用域和全局作用域，没有块级作用域，{}(块级作用域)限定不了var声明变量的访问范围，然而let却可以被限定在块中。

var

{
  var s=2;
}
console.log(s);//2

let

{
  let s=2;
}
console.log(s);//s is not defined

二:小知识点

1. JS只有函数作用域和全局作用域，没有块级作用域，{}(块级作用域)限定不了var声明变量的访问范围，却可以限定let。
2. typeof 对象返回的是 object,typeof 函数返回的是function
3. console.log(typeof showImage);不能加括号
4. 在同一个元素节点中添加文本节点和元素节点都是一次追加的如：<p>this is<em>your</em>food</p> p->this…->em->food依次添加
5. 如果有要去完成某一个事件，然而又不能用全局变量和局部变量，那么我们可以用属性，因为在js中可以自己创建一个属性，因为js是允许自己创建一个新的属性的。

function setPosition(elementID,top,left,position="absolute") {
  if(!document.getElementById){
    return  false;
  }
  if(!document.getElementById(elementID)){
    return false;
  }
  let node=document.getElementById(elementID);
  node.style.position=position;
  node.style.top=top;
  node.style.left=left;
  node.move=1;//就为node 元素创建了一个新的属性move

}

三：==与===的区别

==操作符会先将两边的值进行强制类型转换再比较是否相等，而===操作符不会进行类型转换。==操作符只要求比较两个值是否相等，而**===操作符不仅要求值相等，而且要求类型相同**。!=和!==类似.

四： DOM解释

D:document
O:object 对象
M：model

五：childNodes

1. 返回的时某个节点的所有子节点，有时会和我们想的节点个数不一样，要大得多。
2. 因为在DOM中除了元素节点还有文本节点等，文档里的任何东西都可以看成一个节点，甚至是空格。
   如何解决呢?
   我们可以和TypeNode配合使用
   元素节点的nodeTyPe属性值是1。
   属性节点的nodeTyPe属性值是2。
   文本节点的nodeType属性值是3。

六：nodeValue

1. 对于文档节点来说, nodeValue返回null. 对于text, comment, 和 CDATA 节点来说, nodeValue返回该节点的文本内容. 对于 attribute 节点来说, 返回该属性的属性值.
2. 对于获取text，获取节点下的子节点才是text.
3. 如果在节点的文本节点中没有设值，那么nodeValue为未定义，会报错。

七：window.open

简介:打开另一个窗口
函数:window.open(url , name , features)
url:跳转网址
**name:**窗口名字
**feature:**打开窗口的格式。

以谷歌浏览器为例

1. 没加入name则是打开一个新标签，似乎feature也没有起作用.
2. 加了name则是重新打开一个安feature样式的新窗口
3. 加了name之后，更换url只会覆盖旧窗口的内容，而不会再打开一个窗口（只不过会关了在开）

八:插入节点问题appendChild

代码没给出完，我插入的是节点，
以前我都认为后插的在上面，会把先插入的挤下去

1. 先插入的在上面
2. imageList.appendChild(p); imageList.appendChild(img);
   
3. imageList.appendChild(img); imageList.appendChild(p);

九:AJAX

1. ajax的核心对象是XMLHttpRequest
2. 注意使用同源策略，因为ajax只能访问属于同域的数据
3. XMLHttpRequest在发送请求后（send()），不会停止下来等待返回结果，而是会而是会继续往下执行。
4. 它的应用主要依赖于服务器端，而非客户端

十:if判断相关

1. 如果要用undefined作为条件判断，就要用typeof，因为这样就不会报未定义的错，而是把错误转化为字符串去比较

 if(typeof dl.childNodes[0]!=="undefined"){
     return false;
   }

一些html标签

1. blockquote 元素前后添加了换行，并增加了外边距。

<blockquote>
This is a long quotation. This is a long quotation. This is a 
aassdd
</blockquote>

2. 使用Alt + accessKey (或者 Shift + Alt + accessKey) 来访问带有指定快捷键的元素，

<a href="#" accesskey="c">ssss</a>

这是一些俗成的快捷键

对style样式的获取

1. 对css的外联样式js不能获取，只能获取行内(内嵌)样式
2. 获取中间代减号的样式，js中转换成了驼峰命名如**CSS** font-size: 20em; JSconsole.log(p.style.fontSize);

获取下一个元素节点

 function getNest(node) {
    if(node.type===1){
      return node;
    }if(node.nextSibling){
      return getNest(node.nextSibling);
    }
  }

table各行变色

  function settingTable() {
    let tables=document.getElementsByTagName("table");
    for(let i=0;i<tables.length;i++){
      let table=tables[i];
      let rows=table.getElementsByTagName("tr");
      let odd=true;
      for(let j=0;j<rows.length;j++){
        if(odd===false){
          rows[j].style.background="red";
          console.log(rows[j]);
          odd=true;
        }else {
          odd=false;
        }
      }
    }
  }

函数注意点

1. setTimeout(函数,时间) ，注意函数哪里要加空号，否则会出错，函数依然运行，不过没有时间的限制了
   let removeTime=setTimeout("movePosition(img)",4000);

某些H5新特性

表单

video

em,px,rem区别

px表示“绝对尺寸”，利用px设置字体的大小和元素的宽高较为精确。px的缺点就是不能适应浏览器缩放时产生的变化，因此一般不用于响应式网站。

em表示相对尺寸，会根据相应设备屏幕尺寸的变化而变化。其相对于父容器的font-size。浏览器默认字体大小为16px，如果在html中未设置font-size，那么默认font-size为16px，等于1em。比如你当前的屏幕为38601080，设置font-size为50px，那么1em等于50px；现在屏幕分辨率变成了1366768，那么font-size应变为768*50/1080，约为35.55px，则1em等于35.55px。

rem也表示相对尺寸，其参考对象为根元素的font-size。与em不同的是，它不受父容器的font-size的影响
em,px,rem是引用的博主 「卜居易」的原创文章

rem,px,rem区别的原文