Je suis novice en programmation et je veux vérifier si la balise h3 avec le texte "bonjour" est présente dans le document.
considérez le code HTML ci-dessous,
<div class= "parent_div">
<div class="child_div">
<h3>hello</h3>
</div>
</div>
maintenant je veux vérifier si l'élément h3 dans la classe parent_div existe dans le document que je suis en train de consulter. comment puis-je faire cela en utilisant javascript.
J'ai essayé d'utiliser document.querySelector ("div.parent_div h3 [text () =" hello "]")
cela ne fonctionne pas . Comment puis-je le faire. quelqu'un pourrait-il m'aider avec ça. merci.
3 Réponses :
Cela pourrait être une approche utilisant vanilla js:
<div class= "parent_div">
<div class="child_div">
<h3>hello</h3>
</div>
</div>
const checkExist = document.querySelector(".parent_div .child_div h3").innerText == "hello"
console.log(checkExist)
Mais si vous utilisez React.js, mieux vaut utiliser l'état du composant.
merci mais si l'élément n'est pas présent, il donne une erreur. donc il devrait y avoir une sorte de chèque je pense
<div class= "parent_div">
<div class="child_div">
<h3>hello</h3>
</div>
</div>
<script type="text/javascript">
var h3=document.getElementsByTagName('h3');
alert(h3.length===0?'not exist':'exists, and text is :'+h3[0].innerHTML);
</script>
Selon votre commentaire, dans le cas de React, si vous ne voulez pas de panneau latéral (ou tiroir ) pour être extensible jusqu'au chargement d'une image, vous pouvez utiliser le onload event pour définir l'état de votre tiroir sur extensible uniquement après son chargement.
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>
class Drawer extends React.Component {
constructor(props) {
super(props);
this.state = {
expandable: props.expandable,
expanded: false
};
}
render() {
const expandButton = (
<button onClick={() => this.setState({ expanded: !this.state.expanded })}>
{this.state.expanded ? "Click to close..." : "Click to expand!"}
</button>
);
const drawerContent = this.state.expanded ? (
<p>I'm expanded!</p>
) : (
<p>I'm not expanded :( </p>
);
return (
<div>
{expandButton}
{drawerContent}
</div>
);
}
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
drawerExpandable: false
};
}
render() {
return (
<div>
<Drawer expandable={this.state.drawerExpandable} />
<img
src={"https://placekitten.com/200/300"}
onLoad={() => this.setState({ drawerExpandable: true })}
/>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
Merci. en fait le cas est un peu compliqué que cela ... ma question est maintenant de considérer que j'ai un troisième composant qui rend en cliquant sur un bouton dire "cliquez pour afficher". maintenant, lorsque l'utilisateur clique sur ce bouton "cliquez pour afficher" un autre contenu dit "le panneau doit être fermé lorsque je suis rendu" doit être montré à l'utilisateur. lorsque cela est rendu même si l'image est téléchargée, le panneau ne doit pas être affiché. Ce n'est que lorsque je ferme le contenu "Le panneau doit être fermé lorsque je suis rendu" que le panneau doit être développé. voilà comment j'en avais besoin pour fonctionner.
@ someuser2491 pourriez-vous s'il vous plaît décrire ce problème et qu'avez-vous essayé dans la question alors?
J'ai trouvé la réponse à ma question J'ai utilisé une autre condition pour mettre à jour l'état de side_panel_open lorsque ce dialogue est ouvert.
si vous utilisez reactjs, utilisez l'objet state pour ce genre de choses, n'utilisez pas le sélecteur de requête
Tout à fait d'accord avec @Pardeep si vous utilisez react use react state
Appel de l'orientation sur problèmes XY ici: pourquoi voudriez-vous faire cela? Quel est le problème que vous aimeriez résoudre? Surtout dans le cas de réaction?
Je dois étendre le panneau latéral (qui peut se fermer et s'ouvrir) basé sur l'état nommé "étendu" étant vrai. cela devient vrai lorsque l'image est chargée. Maintenant, je ne veux pas que ce panneau latéral se développe si cet élément que j'ai posé dans la question est vu ... Je n'ai pas d'état pour suivre cet élément. j'ai donc pensé qu'il serait bon d'utiliser queryselector.
@ someuser2491 Je suis d'accord avec tout le monde pour dire que dans le cas de react, vous ne devriez pas utiliser queryselector pour cela. Vous ne devriez probablement pas l'utiliser même dans le cas de vanilla js: une meilleure façon pourrait être d'implémenter un modèle d'observateur oblige le code responsable de l'image à notifier qu'elle a été chargée, puis oblige le code responsable du tiroir à répondre en conséquence. Dans tous les cas, j'ai posté une réponse pour le cas de réaction.