Develop Reference

Make an h1, Open more text information underneath

i want to make an header that acts like a button or something like this, that onclick will open underneath a text for example:
<h1>Dinosaurs</h1>
<p> Dinosaurs are ancient creatures....</p>
so if i click on my h1, it will do like an onclick event and behave like button, and open/close a paragraph text underneath

For your purposes, HTML has the <details> element, which you can style to your likings using the proper CSS.
<details>
<summary>
Dinosaurs
</summary>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eum perferendis eius. Adipisci velit et similique earum quas illo odio rerum optio, quis, expedita assumenda enim dicta aliquam porro maxime minima sed a ullam, aspernatur corporis.
</p>
</details>
More information here https://developer.mozilla.org/de/docs/Web/HTML/Element/details and here
https://markodenic.com/html-tips/

how to use a queryselector on object HTMLInputElement

I am trying that when the text field has focus, the div is selected with the class:autocomplete, this is an example to understand my idea, in my real problem it is more complex. I simply need that once the element that has the focus is identified, select the nearest div with .autocomplete class on the same level, I want to get it this way. I know that in css I should use something like:
input ~ div.autocomplete
($event.target is input in my case)
but I don't know how to do it in this case. Thank you.
function fn_selectAutocompleteClass($event) {
console.log(($event.target));
}
.selectAutocomplete {
background: green;
}
<input id="text" type="text" onfocus="fn_selectAutocompleteClass(event)">
<i class="icon"></i>
<div class="autocomplete">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum itaque placeat, ad vel reprehenderit illo, harum nemo laudantium, dolorem unde aut distinctio! Consectetur vitae deleniti veritatis autem numquam officia eaque.</div>

In this case you can access the .autocomplete using the querySelectorAll on the target elements parent like below snippet. Get the 0th index as that will be the first element matching the selector query.
function fn_selectAutocompleteClass($event) {
console.log($event.target.parentNode.querySelectorAll('.autocomplete')[0]);
}
.selectAutocomplete {
background: green;
}
<input id="text" type="text" onfocus="fn_selectAutocompleteClass(event)">
<i class="icon"></i>
<div class="autocomplete">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum itaque placeat, ad vel reprehenderit illo, harum nemo laudantium, dolorem unde aut distinctio! Consectetur vitae deleniti veritatis autem numquam officia eaque.</div>
Hope this helps :)

count no of spans of specific class within a dynamically generated div

Supposing I have a number of divs that are dynamically generated and contain text. Each of these divs have a unique id which is also dynamically generated, e.g.
<div id="abstract_12345"> ... text ...</div>
Now within those divs there are spans of a particular type that have been dynamically generated according to a regex, e.g. when the word "significant" is encountered it is tagged as
<span class="emphasis">significant</span>
This is being done via mark.js
What would be a suggestion for a javascript function to enable counting the spans within each div with the aim of placing the count value in an element associated with that div?

Using jQuery you can do:
$('div[id^="abstract_"]').each(function () {
var $this = $(this),
len = $this.find('span.emphasis').length;
console.log($this.attr('id'), len);
});
div {margin: 0 0 15px 0;}
span.emphasis {color: red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="abstract_12345"><span class="emphasis">Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit. <span>Sapiente ipsam animi</span>, alias harum aut est unde voluptates repudiandae vel molestias <span class="emphasis">significant</span>, officia! Illum dolore pariatur sequi magnam minus, aliquid voluptate officia, <span>quaerat</span> sint quam <span class="emphasis">commodi</span>.</div>
<div id="abstract_12346">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente ipsam animi, alias harum aut est unde voluptates repudiandae vel molestias, officia! Illum dolore pariatur sequi magnam minus, aliquid voluptate officia, <span>quaerat</span> sint <span class="emphasis">quam commodi</span>.</div>

If you want to do using plain Javascript.
function myFunction() {
var i;
var x = document.querySelector("[id^=abstract_]").querySelectorAll("span");
for (i = 0; i < x.length.i++){
x[i].id = i;
}
}
This code will add id to each span as the index of the span inside the div with id=abstract_12345.

This should do the trick, if I understand your wish correctly.
$('id*="abstract_"').each(function() {
var amount = $(this).find('span.emphasis').length;
$(this).prepend(amount);
});

Handler for hovering over an element and all its children

The handler must operate when you hover over an element with a class D1 and when you hover over all his children. How to do it? Tried through the cycle but confused.
<div class="d1">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita inventore nobis cum itaque unde eos aliquam labore reiciendis iusto dolore ducimus tempore quidem et nisi debitis similique ea dignissimos ex.</p>
</div>
Link to the sandbox: Fiddle

You can use mouseenter and mouseleave instead of mouseover and mouseout. These have the functionality you need, provided you're targeting the supported browsers (see links above).
Here's a working jsFiddle from your code: http://jsfiddle.net/rgthree/rs6qm9v5/2/

Dynamically and completely fill a div with placeholder text in javascript

I would like to Fill a div with placeholder text.
I have a div that is 100% width+height. Due to many form factors this height and width will be changing based on the users resolution. How can i dynamically fill that div with lorem ipsum. Also how would i recalculate if window sizes changes? I know i could manually do this with copy paste and overflow hidden but I would rather achieve this in javascript
JSFiddle
css
html,body {
/*background:#edecec;*/
height: 100%;
}
.block-text{
text-align: justify;
font-size: 8px;
font-color: rgba(88,89,91, 1);
font-family: georgia;
line-height: 7px;
}
html
<div class="block-text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, eius, ab, molestiae praesentium hic quia quaerat culpa quas consectetur dolor veritatis vel voluptas minus laborum minima quis dolorum necessitatibus tempora.
</p>
</div>

http://jsfiddle.net/h54tP/1/
var bool = true;
var maxHeight = $('.block-text').height();
do {
$('.container').append("<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, eius, ab, molestiae praesentium hic quia quaerat culpa quas consectetur dolor veritatis vel voluptas minus laborum minima quis dolorum necessitatibus tempora. </p>");
if ($('.container').height() > maxHeight) bool = false;
} while (bool);
Here, as described in my comment. One wrapping element insinde your text box, the block-text set to 100% height and a small while loop do the trick.
Small note: This will not do anything when the window is resized. For that, however, you could just call that entire code inside a window-size-change function.
Also, this allows the text to be slightly larger than the screen. If you want it slightly smaller instead, just do
$('.container').children().last().hide();
in the "if"-clause.

I realize you wanted to solve this with javascript, but have you considered using css psuedo-elements with content? If this is just for placeholder text as you develop I think it will do what you want without having to add a bunch of javascript and fiddle with resize events.
.block-text>p:after {
content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, eius, ab, molestiae praesentium hic quia quaerat culpa quas consectetur dolor veritatis vel voluptas minus laborum minima quis dolorum necessitatibus tempora.';
}