Skip to content

Instantly share code, notes, and snippets.

@h4

h4/01.getElementsByTagName.html

Created April 12, 2012 08:57
Show Gist options
  • Save h4/2365708 to your computer and use it in GitHub Desktop.
Save h4/2365708 to your computer and use it in GitHub Desktop.
Download ZIP
Работа с DOM
Raw
01.getElementsByTagName.html
<!--
* Метод document.getElementsByTagName()
-->
<html>
<head>
<script type="text/javascript">
function getElements() {
var x=document.getElementsByTagName("input");
console.log(x.length);
}
</script>
</head>
<body>
<p><input type="text" size="20" /></p>
<p><input type="text" size="20" /><p>
<p><input type="text" size="20" /><p>
<p><input type="button" onclick="getElements()" value="Посчитать все элементы input" /><p>
</body>
</html>
Raw
02.getElementById.html
<!--
* Метод document.getElementById()
-->
<html>
<head>
<script type="text/javascript">
function getValue() {
var x=document.getElementById("myHeader");
console.log(x.innerHTML);
}
</script>
</head>
<body>
<h1 id="myHeader" onclick="getValue()">Заголовок</h1>
</body>
</html>
Raw
03.DOM_modification.html
<!--
* Изменение структуры дерева документа
-->
<html>
<head>
<script type="text/javascript">
function modify() {
var newElem,
newText;
newElem = document.createElement("P")
newElem.id = "newP"
newText = document.createTextNode("Это второй параграф.")
newElem.appendChild(newText)
document.body.appendChild(newElem)
// document.getElementById("emphasis1").childNodes[0].nodeValue = "первый "
}
</script>
</head>
<body>
<button onclick="modify()">Измени/Добавь текст</button>
<p id="paragraph1">Это <em id="emphasis1">единственный</em>параграф на странице.</p>
</body>
</html>
Raw
04.changeVisibility.html
<!--
* Изменение видимости элемента
-->
<html>
<head>
<script type="text/javascript">
function hideImage(){
var imgs = document.getElementsByTagName("img");
for (i = 0; i < imgs.length; i++) {
var img = imgs[i];
if(img.width == 50 && img.height == 38) {
img.style.visibility = 'hidden';
}
}
}
window.onload = hideImage;
</script>
</head>
<body>
<img src="kizi.jpg" alt="" width="160" height="120" border="0">
<img src="je.jpg" alt="" width="50" height="38" border="0">
</body>
</html>
Raw
05.dropDown.css
table.globalmenu {
background-color: #cccccc;
text-align: center;
vertical-align: middle;
border: solid 1px navy;
border-collapse:collapse;
padding: 0px;
width: 70%;
}
table.globalmenu td {
border: solid 1px navy;
height: 25px;
width: 100px;
padding: 0px;
margin: 0px;
}
div.subMenu {
visibility: hidden;
position: absolute;
background-color: #eeeeee;
padding : 0px;
border: 1px solid navy;
}
div.subMenu div {
padding : 2px;
}
.menuItem a:link {
color: Maroon;
}
.menuItem a:visited {
color: Maroon;
}
.menuItem a:hover {
color: White;
}
div.subMenu a:link {
color: Navy;
}
div.subMenu a:visited {
color: Navy;
}
div.subMenu a:hover {
color: Yellow;
}
Raw
05.dropDown.html
<html>
<head>
<title>Пример выпадающего меню</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="menu.js"></script>
<link href="menu.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- Таблица с основными пунктами меню -->
<table class="globalmenu">
<tr>
<td id="home">Домой</td>
<td id="mnuItem1" class="menuItem" onmouseover="OpenSubMenu( 'mnuItem1', 'mnuSubMenu1' );" onmouseout="CloseSubMenu( 'mnuSubMenu1')">
<a href="#">Пункт 1</a>
</td>
<td id="mnuItem2" class="menuItem" onmouseover="OpenSubMenu( 'mnuItem2', 'mnuSubMenu2' ); " onmouseout="CloseSubMenu( 'mnuSubMenu2' );">
<a href="#">Пункт 2</a>
</td>
<td id="mnuItem3" class="menuItem" onmouseover="OpenSubMenu( 'mnuItem3', 'mnuSubMenu3' );" onmouseout="CloseSubMenu( 'mnuSubMenu3' );">
<a href="#">Пункт3</a>
</td>
</tr>
</table>
Содержимое страницы
<!-- Выпадающий блок 1 -->
<div class="subMenu" id="mnuSubMenu1" onmouseover="OpenSubMenu( 'mnuItem1', 'mnuSubMenu1' );" onmouseout="CloseSubMenu( 'mnuSubMenu1' );">
<div><a href="#">Ссылка 1</a></div>
<div><a href="#">Ссылка 1</a></div>
<div><a href="#">Ссылка 1</a></div>
<div class="subMenuItem"><a href="#">Дополнительно</a></div>
</div>
<!-- Выпадающий блок 2 -->
<div class="subMenu" id="mnuSubMenu2" onmouseover="OpenSubMenu( 'mnuItem2', 'mnuSubMenu2' );" onmouseout="CloseSubMenu( 'mnuSubMenu2' );">
<div><a href="#">Ссылка 2</a></div>
<div><a href="#">Ссылка 2</a></div>
<div><a href="#">Ссылка 2</a></div>
<div><a href="#">Дополнительно</a></div>
</div>
<!-- Выпадающий блок 3 -->
<div class="subMenu" id="mnuSubMenu3" onmouseover="OpenSubMenu( 'mnuItem3', 'mnuSubMenu3' );" onmouseout="CloseSubMenu( 'mnuSubMenu3' );">
<div><a href="#">Ссылка 3</a></div>
<div><a href="#">Ссылка 3</a></div>
<div><a href="#">Ссылка 3</a></div>
<div><a href="#">Дополнительно</a></div>
</div>
</body>
</html>
Raw
05.dropDownMenu.js
/**
* Определяет горизонтальную координату родительского элемента
*/
function getLeft(element) {
var iPos = 0;
while (element != null) {
iPos += element.offsetLeft;
element = element.offsetParent;
}
return iPos;
}
/**
* Определяет вертикальную координату родительского элемента
*/
function getTop(element) {
var iPos = 0;
while (element!=null) {
iPos += element.offsetTop;
element = element.offsetParent;
}
return iPos;
}
/**
* Открывает выпадающее меню
*/
function OpenSubMenu(parent, menu) {
var parentelement = document.getElementById(parent),
menutelement = document.getElementById(menu);
menutelement.style.left = getLeft(parentelement);
menutelement.style.top = getTop(parentelement) + parentelement.offsetHeight );
menutelement.style.visibility = "visible";
}
/**
* Закрывает выпадающее меню
*/
function CloseSubMenu(menu) {
document.getElementById(menu).style.visibility = "hidden";
}
Raw
06.TOC.html
<!--
Создание оглавления
-->
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<SCRIPT LANGUAGE="JavaScript">
function Toggle(node)
{
// Показываем ветку, если она не видна
if (node.nextSibling.style.display == 'none')
{
// Меняем рисунок (если рисунок имеется)
if (node.childNodes.length > 0)
{
if (node.childNodes.item(0).tagName == "IMG")
{
node.childNodes.item(0).src = "minus.gif";
}
}
node.nextSibling.style.display = '';
}
// Прячем ветку, если она видна
else
{
// Меняем рисунок (если рисунок имеется)
if (node.childNodes.length > 0)
{
if (node.childNodes.item(0).tagName == "IMG")
{
node.childNodes.item(0).src = "plus.gif";
}
}
node.nextSibling.style.display = 'none';
}
}
</SCRIPT>
</HEAD>
<BODY>
<H1>DHTML Дерево</H1>
<BR /><BR />
<HR />
<TABLE BORDER=0>
<TR><TD>
<TABLE BORDER=0><TR><TD><IMG SRC="leaf.gif"> Анализ<DIV>
</DIV></TD></TR></TABLE>
</TR></TD>
<TR><TD>
<TABLE BORDER=0><TR><TD><A onClick="Toggle(this)"><IMG SRC="minus.gif"> Применение</A><DIV>
<TABLE BORDER=0><TR><TD WIDTH=10></TD><TD><IMG SRC="leaf.gif"> PHP<DIV>
</DIV></TD></TR></TABLE>
<TABLE BORDER=0><TR><TD WIDTH=10></TD><TD><A onClick="Toggle(this)"><IMG SRC="minus.gif"> Visual C++</A><DIV>
<TABLE BORDER=0><TR><TD WIDTH=10></TD><TD><IMG SRC="leaf.gif"> Проблемы утечки памяти<DIV>
</DIV></TD></TR></TABLE>
<TABLE BORDER=0><TR><TD WIDTH=10></TD><TD><IMG SRC="leaf.gif"> Проблемы баз данных<DIV>
</DIV></TD></TR></TABLE>
</DIV></TD></TR></TABLE>
</DIV></TD></TR></TABLE>
</TR></TD>
<TR><TD>
<TABLE BORDER=0><TR><TD><IMG SRC="leaf.gif"> Design<DIV></DIV>
</TD></TR></TABLE>
</TR></TD>
</TABLE>
<BR><BR>
<HR>
</BODY>
</HTML>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment