How to get element in template html?

I am developing an Electron app, in which the index.html imports a search.html:

<link rel="import" href="search.html">

And inside the search.html, I create a button whose id is searchBtn.

Then, in the redenerer.js, I try to get the searchBtn:

var link = document.querySelector('link[rel="import"][href="search.html"]');

var content = link.import.querySelector('template');

console.log(content);

var searchBtn = content.querySelector('#searchBtn');  

console.log(searchBtn);

The output of the first log is expected, but the second log for searchBtn is always null.

Is there any wrong with my code? If so, how to obtain the element in template html correctly?

The output is following:

enter image description here

I notice that there is a document-fragment inside the template.

edited Nov 12 at 15:03

asked Nov 12 at 14:31

chenzhongpu

2,23732450

The log shows that the content is the template, in which there is a document-fragment.
– chenzhongpu
Nov 12 at 14:38

1

Can you set up a demo page? maybe on codepen?
– vsync
Nov 12 at 14:42

Might be helpful html5rocks.com/en/tutorials/webcomponents/imports
– Maor Refaeli
Nov 12 at 15:16

add a comment |

I am developing an Electron app, in which the index.html imports a search.html:

<link rel="import" href="search.html">

And inside the search.html, I create a button whose id is searchBtn.

Then, in the redenerer.js, I try to get the searchBtn:

var link = document.querySelector('link[rel="import"][href="search.html"]');

var content = link.import.querySelector('template');

console.log(content);

var searchBtn = content.querySelector('#searchBtn');  

console.log(searchBtn);

The output of the first log is expected, but the second log for searchBtn is always null.

Is there any wrong with my code? If so, how to obtain the element in template html correctly?

The output is following:

enter image description here

I notice that there is a document-fragment inside the template.

edited Nov 12 at 15:03

asked Nov 12 at 14:31

chenzhongpu

2,23732450

The log shows that the content is the template, in which there is a document-fragment.
– chenzhongpu
Nov 12 at 14:38

1

Can you set up a demo page? maybe on codepen?
– vsync
Nov 12 at 14:42

Might be helpful html5rocks.com/en/tutorials/webcomponents/imports
– Maor Refaeli
Nov 12 at 15:16

add a comment |

I am developing an Electron app, in which the index.html imports a search.html:

<link rel="import" href="search.html">

And inside the search.html, I create a button whose id is searchBtn.

Then, in the redenerer.js, I try to get the searchBtn:

var link = document.querySelector('link[rel="import"][href="search.html"]');

var content = link.import.querySelector('template');

console.log(content);

var searchBtn = content.querySelector('#searchBtn');  

console.log(searchBtn);

The output of the first log is expected, but the second log for searchBtn is always null.

Is there any wrong with my code? If so, how to obtain the element in template html correctly?

The output is following:

enter image description here

I notice that there is a document-fragment inside the template.

edited Nov 12 at 15:03

asked Nov 12 at 14:31

chenzhongpu

2,23732450

I am developing an Electron app, in which the index.html imports a search.html:

<link rel="import" href="search.html">

And inside the search.html, I create a button whose id is searchBtn.

Then, in the redenerer.js, I try to get the searchBtn:

var link = document.querySelector('link[rel="import"][href="search.html"]');

var content = link.import.querySelector('template');

console.log(content);

var searchBtn = content.querySelector('#searchBtn');  

console.log(searchBtn);

The output of the first log is expected, but the second log for searchBtn is always null.

Is there any wrong with my code? If so, how to obtain the element in template html correctly?

The output is following:

enter image description here

I notice that there is a document-fragment inside the template.

javascript html

edited Nov 12 at 15:03

asked Nov 12 at 14:31

chenzhongpu

2,23732450

edited Nov 12 at 15:03

asked Nov 12 at 14:31

chenzhongpu

2,23732450

edited Nov 12 at 15:03

asked Nov 12 at 14:31

chenzhongpu

2,23732450

asked Nov 12 at 14:31

chenzhongpu

2,23732450

asked Nov 12 at 14:31

chenzhongpu

2,23732450

The log shows that the content is the template, in which there is a document-fragment.
– chenzhongpu
Nov 12 at 14:38

1

Can you set up a demo page? maybe on codepen?
– vsync
Nov 12 at 14:42

Might be helpful html5rocks.com/en/tutorials/webcomponents/imports
– Maor Refaeli
Nov 12 at 15:16

add a comment |

The log shows that the content is the template, in which there is a document-fragment.
– chenzhongpu
Nov 12 at 14:38

1

Can you set up a demo page? maybe on codepen?
– vsync
Nov 12 at 14:42

Might be helpful html5rocks.com/en/tutorials/webcomponents/imports
– Maor Refaeli
Nov 12 at 15:16

The log shows that the content is the template, in which there is a document-fragment.
– chenzhongpu
Nov 12 at 14:38

Can you set up a demo page? maybe on codepen?
– vsync
Nov 12 at 14:42

Might be helpful html5rocks.com/en/tutorials/webcomponents/imports
– Maor Refaeli
Nov 12 at 15:16

add a comment |

2 Answers
2

active

oldest

votes

Run the querySelector function on the templates content property.

var link = document.querySelector('link[rel="import"][href="search.html"]');

var templateContent = link.import.querySelector('template');

console.log(templateContent);

var searchBtn = templateContent.content.querySelector('#searchBtn');  

console.log(searchBtn);

More about document fragment.

More about template.

Working sandbox;

answered Nov 12 at 15:06

ztadic91

1,9971815

for me it logs null for the searchBtn value
– ztadic91
Nov 12 at 15:12

It works now. It seems that the we should access the document fragment via content property.
– chenzhongpu
Nov 13 at 2:30

I now have problems with the event binding: how-to-bind-the-event-in-html-template
– chenzhongpu
Nov 13 at 3:52

add a comment |

Try like this :

// parse you HTML first

var html = link.import.querySelector('template');

var parser = new DOMParser();

var doc = parser.parseFromString(html.content, "application/xml");



//later

var searchBtn = doc.querySelector('#searchBtn');  

console.log(searchBtn);

edited Nov 13 at 9:41

answered Nov 12 at 14:52

Abderrahim Soubai Elidrissi

1,3961920

the doc is empty.
– chenzhongpu
Nov 12 at 15:04

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53264322%2fhow-to-get-element-in-template-html%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

Run the querySelector function on the templates content property.

var link = document.querySelector('link[rel="import"][href="search.html"]');

var templateContent = link.import.querySelector('template');

console.log(templateContent);

var searchBtn = templateContent.content.querySelector('#searchBtn');  

console.log(searchBtn);

More about document fragment.

More about template.

Working sandbox;

answered Nov 12 at 15:06

ztadic91

1,9971815

for me it logs null for the searchBtn value
– ztadic91
Nov 12 at 15:12

It works now. It seems that the we should access the document fragment via content property.
– chenzhongpu
Nov 13 at 2:30

I now have problems with the event binding: how-to-bind-the-event-in-html-template
– chenzhongpu
Nov 13 at 3:52

add a comment |

Run the querySelector function on the templates content property.

var link = document.querySelector('link[rel="import"][href="search.html"]');

var templateContent = link.import.querySelector('template');

console.log(templateContent);

var searchBtn = templateContent.content.querySelector('#searchBtn');  

console.log(searchBtn);

More about document fragment.

More about template.

Working sandbox;

answered Nov 12 at 15:06

ztadic91

1,9971815

for me it logs null for the searchBtn value
– ztadic91
Nov 12 at 15:12

It works now. It seems that the we should access the document fragment via content property.
– chenzhongpu
Nov 13 at 2:30

I now have problems with the event binding: how-to-bind-the-event-in-html-template
– chenzhongpu
Nov 13 at 3:52

add a comment |

Run the querySelector function on the templates content property.

var link = document.querySelector('link[rel="import"][href="search.html"]');

var templateContent = link.import.querySelector('template');

console.log(templateContent);

var searchBtn = templateContent.content.querySelector('#searchBtn');  

console.log(searchBtn);

More about document fragment.

More about template.

Working sandbox;

answered Nov 12 at 15:06

ztadic91

1,9971815

Run the querySelector function on the templates content property.

var link = document.querySelector('link[rel="import"][href="search.html"]');

var templateContent = link.import.querySelector('template');

console.log(templateContent);

var searchBtn = templateContent.content.querySelector('#searchBtn');  

console.log(searchBtn);

More about document fragment.

More about template.

Working sandbox;

answered Nov 12 at 15:06

ztadic91

1,9971815

answered Nov 12 at 15:06

ztadic91

1,9971815

answered Nov 12 at 15:06

ztadic91

1,9971815

answered Nov 12 at 15:06

ztadic91

1,9971815

for me it logs null for the searchBtn value
– ztadic91
Nov 12 at 15:12

It works now. It seems that the we should access the document fragment via content property.
– chenzhongpu
Nov 13 at 2:30

I now have problems with the event binding: how-to-bind-the-event-in-html-template
– chenzhongpu
Nov 13 at 3:52

add a comment |

for me it logs null for the searchBtn value
– ztadic91
Nov 12 at 15:12

It works now. It seems that the we should access the document fragment via content property.
– chenzhongpu
Nov 13 at 2:30

I now have problems with the event binding: how-to-bind-the-event-in-html-template
– chenzhongpu
Nov 13 at 3:52

for me it logs null for the searchBtn value
– ztadic91
Nov 12 at 15:12

It works now. It seems that the we should access the document fragment via content property.
– chenzhongpu
Nov 13 at 2:30

I now have problems with the event binding: how-to-bind-the-event-in-html-template
– chenzhongpu
Nov 13 at 3:52

add a comment |

Try like this :

// parse you HTML first

var html = link.import.querySelector('template');

var parser = new DOMParser();

var doc = parser.parseFromString(html.content, "application/xml");



//later

var searchBtn = doc.querySelector('#searchBtn');  

console.log(searchBtn);

edited Nov 13 at 9:41

answered Nov 12 at 14:52

Abderrahim Soubai Elidrissi

1,3961920

the doc is empty.
– chenzhongpu
Nov 12 at 15:04

add a comment |

Try like this :

// parse you HTML first

var html = link.import.querySelector('template');

var parser = new DOMParser();

var doc = parser.parseFromString(html.content, "application/xml");



//later

var searchBtn = doc.querySelector('#searchBtn');  

console.log(searchBtn);

edited Nov 13 at 9:41

answered Nov 12 at 14:52

Abderrahim Soubai Elidrissi

1,3961920

the doc is empty.
– chenzhongpu
Nov 12 at 15:04

add a comment |

Try like this :

// parse you HTML first

var html = link.import.querySelector('template');

var parser = new DOMParser();

var doc = parser.parseFromString(html.content, "application/xml");



//later

var searchBtn = doc.querySelector('#searchBtn');  

console.log(searchBtn);

edited Nov 13 at 9:41

answered Nov 12 at 14:52

Abderrahim Soubai Elidrissi

1,3961920

Try like this :

// parse you HTML first

var html = link.import.querySelector('template');

var parser = new DOMParser();

var doc = parser.parseFromString(html.content, "application/xml");



//later

var searchBtn = doc.querySelector('#searchBtn');  

console.log(searchBtn);

edited Nov 13 at 9:41

answered Nov 12 at 14:52

Abderrahim Soubai Elidrissi

1,3961920

edited Nov 13 at 9:41

answered Nov 12 at 14:52

Abderrahim Soubai Elidrissi

1,3961920

answered Nov 12 at 14:52

Abderrahim Soubai Elidrissi

1,3961920

answered Nov 12 at 14:52

Abderrahim Soubai Elidrissi

1,3961920

the doc is empty.
– chenzhongpu
Nov 12 at 15:04

add a comment |

the doc is empty.
– chenzhongpu
Nov 12 at 15:04

the doc is empty.
– chenzhongpu
Nov 12 at 15:04

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Vfrdtyky