【SharePoint Wiki ページ】ページタイトル書き換え後、リンク先画面が縦横スクロール内に表示される

前提・実現したいこと

SharePoint Online の Wiki ページで、
ページタイトル (a 要素) を書き替え、そのリンク先に正常に遷移できるようにしたい
(書き換えたリンクを使用しても、画面を正常に表示できるようにしたい)。

発生している問題

ページタイトル (a 要素) は書き換わったが、書き換わったリンクで遷移すると、縦横スクロールに囲まれた中に画面が表示される。

該当のソースコード

リンク部を抽出しました。(リンク先 href はマスクしてあります)

Html
1<h1 id="pageContentTitle" class="ms-belltown-pageName ms-noWrap ms-dialogHidden">
2	<span id="DeltaPlaceHolderPageTitleInTitleArea">
3		<span>
4		    <a href="#ctl00_PlaceHolderPageTitleInTitleArea_ctl00_SkipLink">
5		        <img alt="Skip Navigation Links" src="/WebResource.axd?d=i0YcjIgMOhQi7omjWLIO6JuKqZMMojvIlYMFv0jPWSlE8WhZQXeWlKMrgpKmuvv1Q6zvsuLPSDYk4TDAGne_ESABsrVNVmS9n_JDGDj_BmI1&amp;t=637103058965614113" width="0" height="0" style="border-width:0px;" />
6		    </a>
7		    <span>
8		        <a title="PageTitle" href="#">PageTitle</a>
9		    </span>
10		    <a id="ctl00_PlaceHolderPageTitleInTitleArea_ctl00_SkipLink"></a>
11		</span>
12	</span>
13</h1>

以下は書き換えのために自分で追加したコードです。

JavaScript
1  var headerTitleElement = document.querySelector('#DeltaPlaceHolderPageTitleInTitleArea>span>span>a');
2  headerTitleElement.innerHTML = "置き換え後のページタイトル名";

試したこと

ブラウザのソースを表示し、ページタイトル(ページファイル)名で検索し、関係する可能性があるのではないか、と感じる部分を抽出しました。

Html
1<div id="DeltaPlaceHolderMain">
2    <span id="ctl00_PlaceHolderMain_wikiPageNameDisplay" style="display: none;">PageTitle</span>
3    <span id="ctl00_PlaceHolderMain_wikiPageNameEdit" style="display:none;">
4	    <input name="ctl00$PlaceHolderMain$wikiPageNameEditTextBox" type="text" value="PageTitle" maxlength="395" id="ctl00_PlaceHolderMain_wikiPageNameEditTextBox" />
5    </span>

JavaScript
1if (typeof(_spWikiPageNameEditorFlag) == 'undefined' || !_spWikiPageNameEditorFlag) {
2    _spWikiPageNameEditorFlag = true;
3    _spWikiPageNameDisplayElemId = 'ctl00_PlaceHolderMain_wikiPageNameDisplay';
4    _spWikiPageNameEditElemId = 'ctl00_PlaceHolderMain_wikiPageNameEdit';
5    _spWikiPageNameEditTextBoxId = 'ctl00_PlaceHolderMain_wikiPageNameEditTextBox';
6}

補足情報（FW/ツールのバージョンなど）

以下リンクで紹介されている、セレクタ指定での Html 要素の取得と書き換えを、
jQuery を使用せずに、SharePoint Online のページタイトルを書き替えました。

Sharepointカスタマイズポイントメモ

使用した要素
|No|Html 要素処理|JavaScript|
|:--|:--:|
|1|取得|「querySelector()」メソッド|
|2|書き換え|Element オブジェクトの innerHTML プロパティ|

行動規範の内容に同意します

回答1件

自己解決

書き換え対象を <a> 要素の text と title に限定することで、
書き換えたリンクを使用しても、画面を正常に表示できるようになりました。

JavaScript
1<script type="text/javascript">
2    document.title = "置き換え後のページタイトル名";
3    var headerTitleElement = document.querySelector('#DeltaPlaceHolderPageTitleInTitleArea>span>span>a');
4    headerTitleElement.text = "置き換え後のページタイトル名";
5    headerTitleElement.attr('title') = "置き換え後のページタイトル名";
6</script>
7