introjs更新dom element｜或者说获取新的dom元素（已解决）

问题：使用introjs制作新手引导页时，对于新生成的元素如何使已开启的intro引导页获取？（具体来说就是需要引导使用查询功能，但是目前只能定位查询之前存在的页面，但是查询之后的页面定位不到，需要更新后才可以。）

经过一段时间的试错尝试，终于解决了！
赶紧前来记录一番。
参考的这个issuerefresh should refresh cached elements #328
题外话：用这些库遇到问题的话还是要回归到库所在GitHub的issue呀，可以少走很多弯路。

其实就是在onbeforechange中更新element就可以。

let helpDialog = introJs();
helpDialog.setOptions({
    steps: [
        {
            title: '新手引导页',
            intro: 'Hello World! 👋'
        },
        {
            title: '新手引导页',
            element: document.querySelector('#step1'),
            intro: 'This is step1',
            position: 'right'
        },
        {
            title: '新手引导页',
            element: document.querySelector('#step2'),
            intro: 'This is step2',
            position: 'right'
        },
        {
            title: '新手引导页',
            element: document.querySelector('#step3'),
            intro: 'This is step3',
            position: 'right'
        },
        {
            title: '新手引导页',
            element: document.querySelector('#step4'),
            intro: 'This is step4',
            position: 'right'
        },
    ]
});
helpDialog.onbeforechange(function (targetElement) {
    helpDialog._introItems[3].element = document.querySelector('#step3');
    helpDialog._introItems[3].position = 'right';
    helpDialog._introItems[4].element = document.querySelector('#step4');
    helpDialog._introItems[4].position = 'right';
});
helpDialog.start();

上述代码还更新的position，因为在使用过程中发现会错位，所以可以重新设置一下position。

参考：

1. Can IntroJS ‘refresh’ the highlighted elements after the intro is started?
2. How to stop triggering introjs after first walkthrough?
   
3. Select an element added at runtime when intro is running
   
4. Highlighting a new dom element using intro.js
   
5. Steps for the new elements (from the javascript dynamic DOM) #314
6. New Element Not Able To Be Selected #495
7. refresh should refresh cached elements #328
8. Add Steps after start #717
9. Will this work with React Native? #502
10. React - 引导步骤(IntroJs)
11. 7个很棒的JavaScript产品步骤引导库，不信你用不上
12. Firing javascript function between intro.js steps
13. How to interrupt IntroJS.js tutorial with a onclick on an element and then carry on?
14. introJS - ignore hidden or DOM elements that don’t exist
15. issue related with intro.js focus on HTML table format
16. example

<div id="intro_step1"><h1>Big Header</h1>
<div id="intro_step2"><h2>Bacon ipsum!</h2>
<p>Bacon ipsum dolor amet short loin drumstick jowl, shankle turkey beef venison. Doner short ribs landjaeger fatback tri-tip. Chicken sausage cow shoulder beef ribs porchetta bacon picanha frankfurter. Meatloaf kielbasa pork chop landjaeger pork. Flank pancetta leberkas prosciutto porchetta chuck ham. Capicola turkey short ribs leberkas frankfurter ham hock.</p></div>
<div id="intro_step3"><h2>I Love Bacon ipsum!</h2>
<p>Bacon salami kielbasa, spare ribs alcatra turducken t-bone tenderloin chicken pork chop venison rump. Pork chop fatback hamburger pig spare ribs capicola, rump corned beef ham hock tri-tip ribeye cow. Shank beef brisket, turducken boudin strip steak pig chuck short loin spare ribs pork chop rump. Turducken bacon salami tongue. Bacon turkey drumstick doner tail fatback prosciutto.</p></div>
<div id="intro_step4"><h2>More Bacon ipsum!</h2>
<p>Alcatra pork chop turducken pancetta biltong, filet mignon short loin jowl beef ham shoulder corned beef. Shoulder hamburger boudin cow t-bone alcatra sausage. Turkey shank short ribs filet mignon flank porchetta. Pork chop alcatra kielbasa, pork frankfurter boudin drumstick pig strip steak tenderloin landjaeger.</p></div>
<div id="intro_step5"><h2>Have You Heard Of Bacon ipsum!</h2>
<p>Pancetta leberkas shoulder flank prosciutto jowl, beef ribs meatloaf beef. Ham turducken strip steak pancetta spare ribs kevin, landjaeger beef pork jowl. Chicken tongue pork leberkas jowl, picanha rump bacon fatback. Cupim short loin beef ribs shoulder.</p></div>
<div id="intro_step6"><h2>Can There Be Too Much Bacon ipsum?</h2>
<p>Turducken beef ribs brisket, meatloaf leberkas ball tip venison short ribs shankle. Ground round tenderloin shoulder, boudin swine rump turkey kielbasa beef ribs meatloaf ham andouille corned beef bacon venison. Ham hock shoulder fatback strip steak meatball ham cupim shank chicken corned beef picanha biltong turkey sausage. Venison cow andouille turducken. Cow flank sausage chuck kielbasa bacon ground round pork loin turkey pork belly. Pork belly salami pastrami biltong turkey andouille kevin boudin turducken bresaola capicola ribeye ball tip rump pig.</p></div></div>

.introjs-overlay {
  position: absolute;
  z-index: 999999;
  background-color: #000;
  opacity: 0;
  background: -moz-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
  background: -webkit-gradient(radial,center center,0px,center center,100%,color-stop(0%,rgba(0,0,0,0.4)),color-stop(100%,rgba(0,0,0,0.9)));
  background: -webkit-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
  background: -o-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
  background: -ms-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
  background: radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#66000000',endColorstr='#e6000000',GradientType=1);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  -webkit-transition: all 0.3s ease-out;
     -moz-transition: all 0.3s ease-out;
      -ms-transition: all 0.3s ease-out;
       -o-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
}

.introjs-fixParent {
  z-index: auto !important;
  opacity: 1.0 !important;
  position: absolute !important;
  -webkit-transform: none !important;
     -moz-transform: none !important;
      -ms-transform: none !important;
       -o-transform: none !important;
          transform: none !important;
}

.introjs-showElement,
tr.introjs-showElement > td,
tr.introjs-showElement > th {
  z-index: 9999999 !important;
}

.introjs-disableInteraction {
  z-index: 99999999 !important;
  position: absolute;
}

.introjs-relativePosition,
tr.introjs-showElement > td,
tr.introjs-showElement > th {
  position: relative;
}

.introjs-helperLayer {
  position: absolute;
  z-index: 9999998;
  background-color: #FFF;
  background-color: rgba(255,255,255,.9);
  border: 1px solid #777;
  border: 1px solid rgba(0,0,0,.5);
  border-radius: 4px;
  box-shadow: 0 2px 15px rgba(0,0,0,.4);
  -webkit-transition: all 0.3s ease-out;
     -moz-transition: all 0.3s ease-out;
      -ms-transition: all 0.3s ease-out;
       -o-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
}

.introjs-tooltipReferenceLayer {
  position: absolute;
  visibility: hidden;
  z-index: 10000000;
  background-color: transparent;
  -webkit-transition: all 0.3s ease-out;
     -moz-transition: all 0.3s ease-out;
      -ms-transition: all 0.3s ease-out;
       -o-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
}

.introjs-helperLayer *,
.introjs-helperLayer *:before,
.introjs-helperLayer *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
      -ms-box-sizing: content-box;
       -o-box-sizing: content-box;
          box-sizing: content-box;
}

.introjs-helperNumberLayer {
  position: absolute;
  visibility: visible;
  top: -16px;
  left: -16px;
  z-index: 9999999999 !important;
  padding: 2px;
  font-family: Arial, verdana, tahoma;
  font-size: 13px;
  font-weight: bold;
  color: white;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(0,0,0,.3);
  background: #ff3019; /* Old browsers */
  background: -webkit-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* Chrome10+,Safari5.1+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff3019), color-stop(100%, #cf0404)); /* Chrome,Safari4+ */
  background:    -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* FF3.6+ */
  background:     -ms-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* IE10+ */
  background:      -o-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* Opera 11.10+ */
  background:         linear-gradient(to bottom, #ff3019 0%, #cf0404 100%);  /* W3C */
  width: 20px;
  height:20px;
  line-height: 20px;
  border: 3px solid white;
  border-radius: 50%;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3019', endColorstr='#cf0404', GradientType=0); /* IE6-9 */
  filter: progid:DXImageTransform.Microsoft.Shadow(direction=135, strength=2, color=ff0000); /* IE10 text shadows */
  box-shadow: 0 2px 5px rgba(0,0,0,.4);
}

.introjs-arrow {
  border: 5px solid white;
  content:'';
  position: absolute;
}
.introjs-arrow.top {
  top: -10px;
  border-top-color:transparent;
  border-right-color:transparent;
  border-bottom-color:white;
  border-left-color:transparent;
}
.introjs-arrow.top-right {
  top: -10px;
  right: 10px;
  border-top-color:transparent;
  border-right-color:transparent;
  border-bottom-color:white;
  border-left-color:transparent;
}
.introjs-arrow.top-middle {
  top: -10px;
  left: 50%;
  margin-left: -5px;
  border-top-color:transparent;
  border-right-color:transparent;
  border-bottom-color:white;
  border-left-color:transparent;
}
.introjs-arrow.right {
  right: -10px;
  top: 10px;
  border-top-color:transparent;
  border-right-color:transparent;
  border-bottom-color:transparent;
  border-left-color:white;
}
.introjs-arrow.right-bottom {
  bottom:10px;
  right: -10px;
  border-top-color:transparent;
  border-right-color:transparent;
  border-bottom-color:transparent;
  border-left-color:white;
}
.introjs-arrow.bottom {
  bottom: -10px;
  border-top-color:white;
  border-right-color:transparent;
  border-bottom-color:transparent;
  border-left-color:transparent;
}
.introjs-arrow.left {
  left: -10px;
  top: 10px;
  border-top-color:transparent;
  border-right-color:white;
  border-bottom-color:transparent;
  border-left-color:transparent;
}
.introjs-arrow.left-bottom {
  left: -10px;
  bottom:10px;
  border-top-color:transparent;
  border-right-color:white;
  border-bottom-color:transparent;
  border-left-color:transparent;
}

.introjs-tooltip {
  position: absolute;
  visibility: visible;
  padding: 10px;
  background-color: white;
  min-width: 200px;
  max-width: 300px;
  border-radius: 3px;
  box-shadow: 0 1px 10px rgba(0,0,0,.4);
  -webkit-transition: opacity 0.1s ease-out;
     -moz-transition: opacity 0.1s ease-out;
      -ms-transition: opacity 0.1s ease-out;
       -o-transition: opacity 0.1s ease-out;
          transition: opacity 0.1s ease-out;
}

.introjs-tooltipbuttons {
  text-align: right;
  white-space: nowrap;
}

/*
 Buttons style by http://nicolasgallagher.com/lab/css3-github-buttons/
 Changed by Afshin Mehrabani
*/
.introjs-button {
  position: relative;
  overflow: visible;
  display: inline-block;
  padding: 0.3em 0.8em;
  border: 1px solid #d4d4d4;
  margin: 0;
  text-decoration: none;
  text-shadow: 1px 1px 0 #fff;
  font: 11px/normal sans-serif;
  color: #333;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  background-color: #ececec;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec));
  background-image: -moz-linear-gradient(#f4f4f4, #ececec);
  background-image: -o-linear-gradient(#f4f4f4, #ececec);
  background-image: linear-gradient(#f4f4f4, #ececec);
  -webkit-background-clip: padding;
  -moz-background-clip: padding;
  -o-background-clip: padding-box;
  /*background-clip: padding-box;*/ /* commented out due to Opera 11.10 bug */
  -webkit-border-radius: 0.2em;
  -moz-border-radius: 0.2em;
  border-radius: 0.2em;
  /* IE hacks */
  zoom: 1;
  *display: inline;
  margin-top: 10px;
}

.introjs-button:hover {
  border-color: #bcbcbc;
  text-decoration: none;
  box-shadow: 0px 1px 1px #e3e3e3;
}

.introjs-button:focus,
.introjs-button:active {
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ececec), to(#f4f4f4));
  background-image: -moz-linear-gradient(#ececec, #f4f4f4);
  background-image: -o-linear-gradient(#ececec, #f4f4f4);
  background-image: linear-gradient(#ececec, #f4f4f4);
}

/* overrides extra padding on button elements in Firefox */
.introjs-button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.introjs-skipbutton {
  margin-right: 5px;
  color: #7a7a7a;
}

.introjs-prevbutton {
  -webkit-border-radius: 0.2em 0 0 0.2em;
  -moz-border-radius: 0.2em 0 0 0.2em;
  border-radius: 0.2em 0 0 0.2em;
  border-right: none;
}

.introjs-nextbutton {
  -webkit-border-radius: 0 0.2em 0.2em 0;
  -moz-border-radius: 0 0.2em 0.2em 0;
  border-radius: 0 0.2em 0.2em 0;
}

.introjs-disabled, .introjs-disabled:hover, .introjs-disabled:focus {
  color: #9a9a9a;
  border-color: #d4d4d4;
  box-shadow: none;
  cursor: default;
  background-color: #f4f4f4;
  background-image: none;
  text-decoration: none;
}

.introjs-bullets {
  text-align: center;
}
.introjs-bullets ul {
  clear: both;
  margin: 15px auto 0;
  padding: 0;
  display: inline-block;
}
.introjs-bullets ul li {
  list-style: none;
  float: left;
  margin: 0 2px;
}
.introjs-bullets ul li a {
  display: block;
  width: 6px;
  height: 6px;
  background: #ccc;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  text-decoration: none;
}
.introjs-bullets ul li a:hover {
  background: #999;
}
.introjs-bullets ul li a.active {
  background: #999;
}

.introjs-progress {
  overflow: hidden;
  height: 10px;
  margin: 10px 0 5px 0;
  border-radius: 4px;
  background-color: #ecf0f1
}
.introjs-progressbar {
  float: left;
  width: 0%;
  height: 100%;
  font-size: 10px;
  line-height: 10px;
  text-align: center;
  background-color: #08c;
}

.introjsFloatingElement {
  position: absolute;
  height: 0;
  width: 0;
  left: 50%;
  top: 50%;
}

setTimeout(function() { $('<div id="intro_step7"><h2>Step added dynamically</h2><p>Some dynamic content from js</p></div>').appendTo('#intro_step1'); });

var introProfile = introJs();
introProfile.setOptions({
    tooltipPosition : 'top',
    steps: [
        {
            element: '#intro_step1',
            intro: 'Welcome to your example.com dashboard, where you can update your skills, your availability, and your professional details so that ...',
            position: 'top'
        },            {
            element: '#intro_step2',
            intro: 'Your profile contains important information which is important to complete so that...',
            position: 'bottom'
        },
        {
            element: '#intro_step3',
            intro: 'Make sure your attribute is included in your profile because the client may express a preference.',
            position: 'top'
        },
        {
            element: '#intro_step4',
            intro: 'Click here to add a photograph of yourself.',
            position: 'top'
        },
        {
            element: '#intro_step5',
            intro: 'Your photograph will appear when your profile matches a ...',
            position: 'top'
        },
        {
            element: '#intro_step6',
            intro: 'Take example.com with you, on your Android or Apple phone by clicking here.',
            position: 'top'
        },
        { 
        	element: '#intro_step7',
          intro: 'This is element added dynamically.',
          position: 'top'
        }
    ]
});
introProfile.oncomplete(function() {
    ;
});
introProfile.onexit(function(){
    ;
});
introProfile.onchange(function(targetElement) {
    ; //add change bits here
});
introProfile.onafterchange(function(targetElement) {
    console.log(targetElement.id);
    switch (targetElement.id){
        case "intro_step1":
            $('.introjs-tooltip').css({top:'80px',left:'200px'});
    } 
});
introProfile.onbeforechange(function(targetElement) {
    ; // add change bits here
});

introProfile.start();