代码模式替换页面内容示例

利用Engage代码模式中的JavaScript脚本可以实现页面元素的内容修改或样式变更，和我们平时网页开发中使用JavaScript增删改查页面元素的步骤是一模一样的，这需要您最好具有一定的网页开发的技术知识。有一些注意事项，建议您使用前参考 Engage代码模式设置。

获取元素

首先需要获取页面元素位置，需要在浏览器中按下快捷键F12，打开开发者控制台并切换至Elements栏，如下图：

点击左上角元素探查器，激活元素定位模式

将鼠标点击页面的目标元素，右侧也会自动定位到页面中对应的元素位置

此时将鼠标放在右侧目标元素上，并右键将该元素ID 复制出来

到此我们就顺利获取到了元素ID值，样例如下：

#app > div > main > div > div > section.ptengine-hero-section.color--white > div > div > div:nth-child(1) > div > span > a > button

对页面内容做任何操作都需要定位到元素ID值，通过元素ID获取元素对象，这样才可以对页面元素进行相关操作。

修改页面元素常见的几种情况 #

1.替换文本 #

根据以上获取的元素ID，将按钮中文本”無料登録する”替换为”無料登録”，事例脚本如下：

document.querySelector("#app > div > main > div > div > section.ptengine-hero-section.color--white > div > div > div:nth-child(1) > div > span > a > button").textContent = '無料登録';

运行以上脚本后效果如下截图：

2.修改按钮颜色或元素背景 #

根据以上获取的元素ID，将按钮颜色变更为红色，事例脚本如下：

document.querySelector("#app > div > main > div > div > section.ptengine-hero-section.color--white > div > div > div:nth-child(1) > div > span > a > button").style.backgroundColor = "red";

运行以上脚本后效果如下截图

3.调整元素位置 #

1. 将以下截图中左侧图片替换成右侧图片

同样先获取左侧图片元素ID，方法同上

#app > div > main > div > div > section.columns > div > div:nth-child(2) > div:nth-child(1) > div > img 

获取元素后将src属性修改为目标图片链接，替换代码事例如下

document.querySelector("#app > div > main > div > div > section.columns > div > div:nth-child(2) > div:nth-child(1) > div > img").src = "https://image.ptengine.com/wp-content/uploads/2019/06/feature3.png" 

运行以上脚本后效果如下

2. 动态调整页面模块显示顺序

   如果一个页面有三个模块，如果想把第二部份页面内容与第三部份页面内容调换。处理思路如下：

   首先获取第二部份页面内容元素。

   var second= document.querySelectorAll("second_id"); 

   获取第三部份页面内容元素对象

   var third= document.querySelectorAll("third_id"); 

获取这两部份页面元素的父级元素对象

   var parentElement= document.querySelectorAll("parent_id"); 

利用父级元素将第三部份元素插入到第二部分页面内容前边，这样就可以实现页面模块顺序调换。

  parentElement.insertBefore(third,second); 

示例:将官网首页的logo-wall和blog-cards内容显示顺序调换

• Step① 获取logo-wall页面元素对象

var logoWall= document.querySelectorAll("#logo-wall");

• Step② 获取blog-cards页面元素对象

var blogCards= document.querySelectorAll("#blog-cards");

• Step③ 获取这两个元素的父元素对象

var parentEle = document.querySelector("#app > div > main > div > div");

Step④ 将logoWall对象和blogCard对象通过父元素来调换顺序

parentEle.insertBefore(blogCards[0],logoWall[0])

执行后效果截图