Ur_6_Dom

by SamokhinDmitro_33JS

HTML

<!--пример1
<body>
<div name="div1" class="div2">
<div class="div2" id="li1">
  abc
</div>
<ul id=li1">
  <li id="li1">def</li>
 
  </ul>
  </div> 
  </body>
  -->
  
 <!-- Пример 3
<div class="class1">
	<p>paragraph1</p>
  <p>paragraph2</p>
</div>
<div class="class1">
	<p>paragraph3</p>
  <p>paragraph4</p>
</div>
<div class="class1">
	<p>paragraph5</p>
  <p>paragraph6</p>
</div>
Конец примера 3 -->

<!--пример 4--
<div data-taste="happy">
</div>
<div data-taste="sweety"></div>
-->

<!--пример6-
  <div id="tmp">
    <div id="div1">
    <p id="p1"><span>privet</span>paragraph</p>
    <p>paragraph</p>
    </div>
</div>
-->



<!--
<div id="tmp">
    <div id="div1">
    <p id="p1">para<span>ag</span>graph</p>
    <p id="p1">par arar</p>
    </div>
</div>

-->
<!--Присмер на вложенность
<div>
    <div>
    t1
      <div>
      <p>
      test
      </p>
      </div>
   
    </div>
</div>

-->

<!-- пример 7--
<div id="tmp">
    <div id="div1">
    <p id="p1">para33333333<span>ag</span>graph</p>
    <p>par arar</p>
    </div>
</div>
-->

<!--- Пример 8 ----- -->

<div id="div1" >
  abc
  <p id="p1">para<span>ag</span>graph</p>
  <p> par arar </p>
</div>

CSS

#div1{
  border:2px solid red;
}

JavaScript

//Доступ к элементу по id
/*
var myli=document.getElementById("li1");
myli.style.color="orange";
console.log(myli);
*/

//пример 2
/*
var elem=document.getElementsByClassName("div2")[0].style.color;
//var elem=document.getElementsByClassName("div2")[0];
console.log(elem);
//console.log(elem.style);
//elem.style.color='red';

document.getElementsByClassName("div2")[0].style.color='#ff0000';
//console.log(elem);
var elem1=document.querySelectorAll(".div2");
console.log(elem1);
*/

//пример 2,1 орасит все в зеленый	
/*
var elem=document.getElementsByClassName("div2");
console.log(elem);
for(var i=0; i<elem.length; i++){
	elem[i].style.color='green';
  }
  */
  
//пример 3
/*
var elem=document.querySelector(".class1 > p:first-child");
console.log(elem);
//console.log(elem.style);//выведет все доступные свойства тега p
*/

//пример 4 Получение значения по тегу
/*
var elem=document.getElementsByTagName("div")[0];
console.log(elem.dataset); //выведет happy
*/

//пример 5
/*
var elem=document.getElementById('p1');

console.log(elem.textContent);//выведет текст тега
console.log(elem.innerHTML);//текст в теге html
console.log(elem.outerHTML);//выведет html

*/

//пример 6 создадим новый элемент в дом дереве
/*


var elem = document.getElementById('p1');
var p = document.createElement('p');
var body = document.getElementsByTagName('body')[0];
p.textContent='new paragraph';
p.innerHTML = 'new paragraph';

elem.appendChild(p);
p.innerHTML='rfgrtgt';

//console.log(body);
console.log(document);


//получение доступа к вложенным тегам

p.textContent='Hello';
p.textContent=p.textContent +  ' ' +'World';
console.log(elem.children);

*/

//пример на вложенность
/*
var elem=document.getElementsByTagName('div')[0];
console.log(elem.children);
*/

//пример 7
//добавление между элементами
/*
var div = document.getElementById('div1');
var newP = document.createElement('p');
newP.textContent = 'мое значение новое';
div.insertBefore(newP, div.firstChild);//элемент будет добавлен перед...