1.getElementsByName (): Obtenha o nome.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ``
exemplo:
<p name = "pn"> hello </p> <p name = "pn"> hello </p> <p name = "pn"> hello </p> <cript> função getName () {var count = document.getElementsByName ("pn"); alerta (contagem.length); var p = contagem [2]; p.innerhtml = "mundo"; } </script>Resultados: A interface imprime três hellenos, acompanhada por uma caixa imediata "3". Ao clicar em OK, o conteúdo exibido na interface se torna Hello Hello World
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
2.GetElementsByTagName (): Obtenha o elemento.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
exemplo
<p> Olá </p> <p> Olá </p> <p> Olá </p> <cript> função getName () {var count = document.getElementsByTagName ("p"); alerta (contagem.length); var p = contagem [2]; p.innerhtml = "mundo"; } </script>Resultados: A interface imprime três hellenos, acompanhada por uma caixa imediata "3". Ao clicar em OK, o conteúdo exibido na interface se torna Hello Hello World
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
3.getAttribute (): Obtenha atributos do elemento.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~
exemplo
<a id = "AID"> </a> <cript> função getAtTr1 () {var anode = document.getElementById ("AID"); var att = anode.getAttribute ("id"); alerta ("A de A é:"+attr); } função getAtTr2 () {var anode = document.getElementById ("AID"); var att = anode.getAttribute ("title"); alerta ("o conteúdo do título de A é:"+attr); } getAtTtr1 (); getAtTtr2 (); </script>Resultado: a caixa de prompt "A de A é: AID". Depois de clicar em OK, a caixa Prompt "A do título do conteúdo é: obtenha o atributo de tag de um".
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~
4.SetAtTribute () Define atributos do elemento.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~
exemplo
<a id = "AID2"> AID2 </a> <SCRIPT> função setAtTtr () {var anode = document.getElementById ("AID2"); anode.setattribute ("title", "configuração dinâmica de um atributo de título"); var att = anode.getAttribute ("title"); alerta ("Configuração dinâmica do valor do título é:"+attr); } setAtTtr (); </script>Resultado: A caixa de prompt "Dinâmica Configuração do valor do título é: Definir dinamicamente a propriedade de título de um" pop-up.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~
5.ChildNodes (): Acesse os nós filhos.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~
exemplo
<ul> <li> 1 </li> <li> 2 </li> <li> 3 </li> </ul> <cript> function getChildNode () {var Christnode = document.getElementsByTagName ("ul") [0] .childNodes; alerta (ChildNode.length); alerta (ChildNode [0] .NodeType); } getChildNode (); </script>Resultado: a interface imprime a caixa de diálogo "3" aparece em .1.2.3 e, em seguida, pressione OK para aparecer.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~
6.ParentNode (): Acesse o nó pai.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~
exemplo
<div> <p id = "pid"> </p> </div> <cript> função getParentNode () {var div = document.getElementById ("pid"); alerta (div.parentnode.nodename); } getParentNode (); </script>Resultado: Uma caixa rápida aparece: div.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~
7.CreateElement (): Crie um nó do elemento.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
exemplo:
<Cript> function createNode () {var body = document.body; var input = document.createElement ("input"); input.Type = "Button"; input.value = "Button"; body.appendChild (entrada); // inserir nó} createNode (); </script>Resultado: um botão aparece.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~
8.CreateTextNode (): Crie um nó de texto.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~
exemplo:
<SCRIPT> function createNode () {var element = document.createElement ("div"); element.className = "message"; var textNode = document.createTextNode ("Hello World!"); element.appendChild (textNode); document.body.appendChild (elemento); } createNode (); </script>Análise de código: Este exemplo cria um novo elemento <div> e especifica um atributo de classe com um valor de "mensagem". Em seguida, outro nó de texto é criado e adicionado ao elemento criado anteriormente. A última etapa é adicionar esse elemento ao elemento <body> no documento, para que você possa ver os elementos e nós de texto recém -criados no navegador.
Resultado: a página mostra o Hello World.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~
9.InsertBefore (): Insira o nó.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
exemplo
<div id = "div"> <p id = "pid"> P elemento </p> </div> <cript> função addNode () {var div = document.getElementById ("div"); var node = document.getElementById ("pid"); var newNode = document.createElement ("p"); newnode.innerhtml = "Inserção dinâmica de um elemento P"; div.InsertBefore (newNode, nó); } addNode (); </script>Resultado: a interface imprime: insira dinamicamente um elemento P
elemento p
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~
10.RemoveChild (): Exclua o nó.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
exemplo
<div id = "div"> <p id = "pid"> P elemento </p> </div> <cript> function revovenode () {var div = document.getElementById ("div"); var p = div.RemoVechild (div.ChildNodes [1]); } reprovenODE (); </script>Resultado: a interface não mostra nada.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~
11.offsetHeight: Tamanho da página da web
12.ScrolHeight: Tamanho da página da web
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~
exemplo:
<Script> function getSize () {var width = document.documentElement.offsetWidth || document.body.offsetWidth; // Resolva questões de compatibilidade var a altura = document.documentElement.offsetHeight || document.body.offsetHeight; alerta (largura+","+altura); } getSize (); </script>Mostrar resultados:
Este artigo apresenta principalmente o JS DOM para controlar elementos HTML. O conteúdo do artigo inclui principalmente DOM, HTML, etc. O artigo vem da Internet, consulte.