js知识点，js DOM编程艺术第二版

2021/9/8 20:09:43

编程Tag： js node let Dom 知识点节点 false document

本文主要是介绍js知识点，js DOM编程艺术第二版，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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

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

例如

console.log(Node.childNodes);//

在这里插入图片描述

编写js是的注意

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

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

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

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;

}

如果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

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

var

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

let

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

二:小知识点

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

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

六：nodeValue

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

七：window.open

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

以谷歌浏览器为例

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

八:插入节点问题appendChild

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

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

九:AJAX

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

十:if判断相关

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

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

一些html标签

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

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

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

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

这是一些俗成的快捷键
在这里插入图片描述

对style样式的获取

对css的外联样式js不能获取，只能获取行内(内嵌)样式
获取中间代减号的样式，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;
        }
      }
    }
  }

函数注意点

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

某些H5新特性