Javascript - getElementsByTagName - 跳过第一个元素 | Sharepoint 2019 - Table 内容
Javascript - getElementsByTagName - skip first element | Sharepoint 2019 - Table of content
我找到了一个脚本，可以为共享点网站创建 table 内容。它工作正常，但在我们的共享点网站上，第一个标题 (H1) 是页面标题。所以我必须跳过第一个标题（页面标题）。
有人知道我需要编辑哪一部分来满足我的需求吗？ =)
<!--
The TOC Container.
The most important thing to note is the ID.
The ID is used by the CSS and the JavaScript code.
-->
<ul id="sp-toc"></ul>
<style type="text/css">
#sp-toc {
padding: 10px;
/* Add a padding between the border and the TOC content */
background-color: #f9f9f9;
/* Add a background color of the TOC */
min-width: 200px;
/* Add only a minimal width like that, the TOC can be extensible */
display: inline-block;
border: 1px solid #aaaaaa;
/* Add a border arround the TOC */
list-style: none;
/* Remove default style list */
}
#sp-toc li {
/* If you need to add custom style on all <li> */
}
#sp-toc li a {
text-decoration: none;
/* Remove default link underline */
}
#sp-toc .class-toc-h1 {
/* currently, the first level supported by the script */
}
#sp-toc .class-toc-h2 {
/* Add a indentation greatter than the previous one */
padding-left: 10px;
}
#sp-toc .class-toc-h3 {
/* Add a indentation greatter than the previous one */
padding-left: 20px;
}
#sp-toc .class-toc-h4 {
/* Add a indentation greatter than the previous one */
padding-left: 30px;
}
#sp-toc .class-toc-h5 {
/* Add a indentation greatter than the previous one */
padding-left: 40px;
}
#sp-toc .class-toc-h6 {
/* Add a indentation greatter than the previous one */
padding-left: 50px;
}
</style>
<script type="text/javascript">
/**
* The main function to build TOC
*/
function buildToc() {
/* Init title level counters */
var countH1 = countH2 = countH3 = countH4 = countH5 = countH6 = 0;
/**
* DOMElement : the TOC container retrieved by ID
*/
var toc = document.getElementById("sp-toc");
/**
* Insert into TOC container the chapters
*/
toc.innerHTML = nodesToc();
/**
* TOC Builder
*/
function nodesToc() {
/* Get all HTML tags from the current page */
var obj = document.getElementsByTagName("*");
var tagList = "H1;H2;H3;H4;H5;H6;";
var str = "";
/* Loop on each HTML tag */
for (var i = 0; i < obj.length; i++) {
/* If tag is a title tag */
if (tagList.indexOf(obj[i].tagName + ";") >= 0) {
/* Get the number of the multilevel list in accordance with the current title */
var lvl = getNumberLevel(obj[i].tagName);
/* HTML template */
str += "<li class='" + getClassLvl(obj[i].tagName) + "'><a href='#title-" + i + "'>" + lvl + " " + obj[i].innerHTML + "</a></li>";
obj[i].id = "title-" + i;
}
}
return str;
}
/**
* Get CSS class in accordance with the title level
*/
function getClassLvl(_tagName) {
return "class-toc-h" + _tagName.replace(/h/ig, '');
}
/**
* Multilevel list generator
*/
function getNumberLevel(_tagName) {
if (_tagName === "H1") {
countH2 = countH3 = countH4 = countH5 = countH6 = 0;
return ++countH1;
} else if (_tagName === "H2") {
countH3 = countH4 = countH5 = countH6 = 0;
return countH1 + "." + ++countH2;
} else if (_tagName === "H3") {
countH4 = countH5 = countH6 = 0; /* Reset next level number */
return countH1 + "." + countH2 + "." + ++countH3;
} else if (_tagName === "H4") {
countH5 = countH6 = 0; /* Reset next level number */
return countH1 + "." + countH2 + "." + countH3 + "." + ++countH4;
} else if (_tagName === "H5") {
countH6 = 0; /* Reset next level number */
return countH1 + "." + countH2 + "." + countH3 + "." + countH4 + "." + ++countH5;
} else if (_tagName === "H6") {
return countH1 + "." + countH2 + "." + countH3 + "." + countH4 + "." + countH5 + "." + ++countH6;
}
}
}
/* Register TOC function after SP page is loaded */
_spBodyOnLoadFunctionNames.push("buildToc");
</script>
在以
开头的for循环中
for (var i = 0; i < obj.length; i++) {
你可以放在循环的第一行（如果标签是标题标签之前）
if (i === 0) continue;
你可以判断你得到的所有元素的属性值。如果元素为h1，id属性值为“pageTitle”，则跳过。
与此同时，我从代码编写者那里得到了提示，下面的代码完全符合我的需要。
<!--
The TOC Container.
The most important thing to note is the ID.
The ID is used by the CSS and the JavaScript code.
-->
<ul id="sp-toc"></ul>
<style type="text/css">
#sp-toc {
padding: 10px;
/* Add a padding between the border and the TOC content */
background-color: #f9f9f9;
/* Add a background color of the TOC */
min-width: 200px;
/* Add only a minimal width like that, the TOC can be extensible */
display: inline-block;
border: 1px solid #aaaaaa;
/* Add a border arround the TOC */
list-style: none;
/* Remove default style list */
}
#sp-toc li {
/* If you need to add custom style on all <li> */
}
#sp-toc li a {
text-decoration: none;
/* Remove default link underline */
}
#sp-toc .class-toc-h1 {
/* currently, the first level supported by the script */
}
#sp-toc .class-toc-h2 {
/* Add a indentation greatter than the previous one */
padding-left: 10px;
}
#sp-toc .class-toc-h3 {
/* Add a indentation greatter than the previous one */
padding-left: 20px;
}
#sp-toc .class-toc-h4 {
/* Add a indentation greatter than the previous one */
padding-left: 30px;
}
#sp-toc .class-toc-h5 {
/* Add a indentation greatter than the previous one */
padding-left: 40px;
}
#sp-toc .class-toc-h6 {
/* Add a indentation greatter than the previous one */
padding-left: 50px;
}
</style>
<script type="text/javascript">
/**
* The main function to build TOC
*/
function buildToc() {
/* Init title level counters */
var countH1 = countH2 = countH3 = countH4 = countH5 = countH6 = 0;
/**
* DOMElement : the TOC container retrieved by ID
*/
var toc = document.getElementById("sp-toc");
/**
* Insert into TOC container the chapters
*/
toc.innerHTML = nodesToc();
/**
* TOC Builder
*/
function nodesToc() {
/* Get all HTML tags from the current page */
var obj = document.getElementsByTagName("*");
var tagList = "H1;H2;H3;H4;H5;H6;";
var str = "";
var pageTitle = false;
/* Loop on each HTML tag */
for (var i = 0; i < obj.length; i++) {
/* If tag is a title tag */
if (tagList.indexOf(obj[i].tagName + ";") >= 0) {
if ('H1' == obj[i].tagName && !pageTitle) {
pageTitle = true;
} else {
/* Get the number of the multilevel list in accordance with the current title */
var lvl = getNumberLevel(obj[i].tagName);
/* HTML template */
str += "<li class='" + getClassLvl(obj[i].tagName) + "'><a href='#title-" + i + "'>" + lvl + " " + obj[i].innerHTML + "</a></li>";
obj[i].id = "title-" + i;
}
}
}
return str;
}
/**
* Get CSS class in accordance with the title level
*/
function getClassLvl(_tagName) {
return "class-toc-h" + _tagName.replace(/h/ig, '');
}
/**
* Multilevel list generator
*/
function getNumberLevel(_tagName) {
if (_tagName === "H1") {
countH2 = countH3 = countH4 = countH5 = countH6 = 0;
return ++countH1;
} else if (_tagName === "H2") {
countH3 = countH4 = countH5 = countH6 = 0;
return countH1 + "." + ++countH2;
} else if (_tagName === "H3") {
countH4 = countH5 = countH6 = 0; /* Reset next level number */
return countH1 + "." + countH2 + "." + ++countH3;
} else if (_tagName === "H4") {
countH5 = countH6 = 0; /* Reset next level number */
return countH1 + "." + countH2 + "." + countH3 + "." + ++countH4;
} else if (_tagName === "H5") {
countH6 = 0; /* Reset next level number */
return countH1 + "." + countH2 + "." + countH3 + "." + countH4 + "." + ++countH5;
} else if (_tagName === "H6") {
return countH1 + "." + countH2 + "." + countH3 + "." + countH4 + "." + countH5 + "." + ++countH6;
}
}
}
/* Register TOC function after SP page is loaded */
_spBodyOnLoadFunctionNames.push("buildToc");
</script>
来源：https://gitlab.lsonline.fr/SharePoint/javascript-customactions/-/snippets/83
我找到了一个脚本，可以为共享点网站创建 table 内容。它工作正常，但在我们的共享点网站上，第一个标题 (H1) 是页面标题。所以我必须跳过第一个标题（页面标题）。
有人知道我需要编辑哪一部分来满足我的需求吗？ =)
<!--
The TOC Container.
The most important thing to note is the ID.
The ID is used by the CSS and the JavaScript code.
-->
<ul id="sp-toc"></ul>
<style type="text/css">
#sp-toc {
padding: 10px;
/* Add a padding between the border and the TOC content */
background-color: #f9f9f9;
/* Add a background color of the TOC */
min-width: 200px;
/* Add only a minimal width like that, the TOC can be extensible */
display: inline-block;
border: 1px solid #aaaaaa;
/* Add a border arround the TOC */
list-style: none;
/* Remove default style list */
}
#sp-toc li {
/* If you need to add custom style on all <li> */
}
#sp-toc li a {
text-decoration: none;
/* Remove default link underline */
}
#sp-toc .class-toc-h1 {
/* currently, the first level supported by the script */
}
#sp-toc .class-toc-h2 {
/* Add a indentation greatter than the previous one */
padding-left: 10px;
}
#sp-toc .class-toc-h3 {
/* Add a indentation greatter than the previous one */
padding-left: 20px;
}
#sp-toc .class-toc-h4 {
/* Add a indentation greatter than the previous one */
padding-left: 30px;
}
#sp-toc .class-toc-h5 {
/* Add a indentation greatter than the previous one */
padding-left: 40px;
}
#sp-toc .class-toc-h6 {
/* Add a indentation greatter than the previous one */
padding-left: 50px;
}
</style>
<script type="text/javascript">
/**
* The main function to build TOC
*/
function buildToc() {
/* Init title level counters */
var countH1 = countH2 = countH3 = countH4 = countH5 = countH6 = 0;
/**
* DOMElement : the TOC container retrieved by ID
*/
var toc = document.getElementById("sp-toc");
/**
* Insert into TOC container the chapters
*/
toc.innerHTML = nodesToc();
/**
* TOC Builder
*/
function nodesToc() {
/* Get all HTML tags from the current page */
var obj = document.getElementsByTagName("*");
var tagList = "H1;H2;H3;H4;H5;H6;";
var str = "";
/* Loop on each HTML tag */
for (var i = 0; i < obj.length; i++) {
/* If tag is a title tag */
if (tagList.indexOf(obj[i].tagName + ";") >= 0) {
/* Get the number of the multilevel list in accordance with the current title */
var lvl = getNumberLevel(obj[i].tagName);
/* HTML template */
str += "<li class='" + getClassLvl(obj[i].tagName) + "'><a href='#title-" + i + "'>" + lvl + " " + obj[i].innerHTML + "</a></li>";
obj[i].id = "title-" + i;
}
}
return str;
}
/**
* Get CSS class in accordance with the title level
*/
function getClassLvl(_tagName) {
return "class-toc-h" + _tagName.replace(/h/ig, '');
}
/**
* Multilevel list generator
*/
function getNumberLevel(_tagName) {
if (_tagName === "H1") {
countH2 = countH3 = countH4 = countH5 = countH6 = 0;
return ++countH1;
} else if (_tagName === "H2") {
countH3 = countH4 = countH5 = countH6 = 0;
return countH1 + "." + ++countH2;
} else if (_tagName === "H3") {
countH4 = countH5 = countH6 = 0; /* Reset next level number */
return countH1 + "." + countH2 + "." + ++countH3;
} else if (_tagName === "H4") {
countH5 = countH6 = 0; /* Reset next level number */
return countH1 + "." + countH2 + "." + countH3 + "." + ++countH4;
} else if (_tagName === "H5") {
countH6 = 0; /* Reset next level number */
return countH1 + "." + countH2 + "." + countH3 + "." + countH4 + "." + ++countH5;
} else if (_tagName === "H6") {
return countH1 + "." + countH2 + "." + countH3 + "." + countH4 + "." + countH5 + "." + ++countH6;
}
}
}
/* Register TOC function after SP page is loaded */
_spBodyOnLoadFunctionNames.push("buildToc");
</script>
在以
开头的for循环中for (var i = 0; i < obj.length; i++) {
你可以放在循环的第一行（如果标签是标题标签之前）
if (i === 0) continue;
你可以判断你得到的所有元素的属性值。如果元素为h1，id属性值为“pageTitle”，则跳过。
与此同时，我从代码编写者那里得到了提示，下面的代码完全符合我的需要。
<!--
The TOC Container.
The most important thing to note is the ID.
The ID is used by the CSS and the JavaScript code.
-->
<ul id="sp-toc"></ul>
<style type="text/css">
#sp-toc {
padding: 10px;
/* Add a padding between the border and the TOC content */
background-color: #f9f9f9;
/* Add a background color of the TOC */
min-width: 200px;
/* Add only a minimal width like that, the TOC can be extensible */
display: inline-block;
border: 1px solid #aaaaaa;
/* Add a border arround the TOC */
list-style: none;
/* Remove default style list */
}
#sp-toc li {
/* If you need to add custom style on all <li> */
}
#sp-toc li a {
text-decoration: none;
/* Remove default link underline */
}
#sp-toc .class-toc-h1 {
/* currently, the first level supported by the script */
}
#sp-toc .class-toc-h2 {
/* Add a indentation greatter than the previous one */
padding-left: 10px;
}
#sp-toc .class-toc-h3 {
/* Add a indentation greatter than the previous one */
padding-left: 20px;
}
#sp-toc .class-toc-h4 {
/* Add a indentation greatter than the previous one */
padding-left: 30px;
}
#sp-toc .class-toc-h5 {
/* Add a indentation greatter than the previous one */
padding-left: 40px;
}
#sp-toc .class-toc-h6 {
/* Add a indentation greatter than the previous one */
padding-left: 50px;
}
</style>
<script type="text/javascript">
/**
* The main function to build TOC
*/
function buildToc() {
/* Init title level counters */
var countH1 = countH2 = countH3 = countH4 = countH5 = countH6 = 0;
/**
* DOMElement : the TOC container retrieved by ID
*/
var toc = document.getElementById("sp-toc");
/**
* Insert into TOC container the chapters
*/
toc.innerHTML = nodesToc();
/**
* TOC Builder
*/
function nodesToc() {
/* Get all HTML tags from the current page */
var obj = document.getElementsByTagName("*");
var tagList = "H1;H2;H3;H4;H5;H6;";
var str = "";
var pageTitle = false;
/* Loop on each HTML tag */
for (var i = 0; i < obj.length; i++) {
/* If tag is a title tag */
if (tagList.indexOf(obj[i].tagName + ";") >= 0) {
if ('H1' == obj[i].tagName && !pageTitle) {
pageTitle = true;
} else {
/* Get the number of the multilevel list in accordance with the current title */
var lvl = getNumberLevel(obj[i].tagName);
/* HTML template */
str += "<li class='" + getClassLvl(obj[i].tagName) + "'><a href='#title-" + i + "'>" + lvl + " " + obj[i].innerHTML + "</a></li>";
obj[i].id = "title-" + i;
}
}
}
return str;
}
/**
* Get CSS class in accordance with the title level
*/
function getClassLvl(_tagName) {
return "class-toc-h" + _tagName.replace(/h/ig, '');
}
/**
* Multilevel list generator
*/
function getNumberLevel(_tagName) {
if (_tagName === "H1") {
countH2 = countH3 = countH4 = countH5 = countH6 = 0;
return ++countH1;
} else if (_tagName === "H2") {
countH3 = countH4 = countH5 = countH6 = 0;
return countH1 + "." + ++countH2;
} else if (_tagName === "H3") {
countH4 = countH5 = countH6 = 0; /* Reset next level number */
return countH1 + "." + countH2 + "." + ++countH3;
} else if (_tagName === "H4") {
countH5 = countH6 = 0; /* Reset next level number */
return countH1 + "." + countH2 + "." + countH3 + "." + ++countH4;
} else if (_tagName === "H5") {
countH6 = 0; /* Reset next level number */
return countH1 + "." + countH2 + "." + countH3 + "." + countH4 + "." + ++countH5;
} else if (_tagName === "H6") {
return countH1 + "." + countH2 + "." + countH3 + "." + countH4 + "." + countH5 + "." + ++countH6;
}
}
}
/* Register TOC function after SP page is loaded */
_spBodyOnLoadFunctionNames.push("buildToc");
</script>
来源：https://gitlab.lsonline.fr/SharePoint/javascript-customactions/-/snippets/83