1. Encontre os elementos:
document.getElementById ("id"); Encontre de acordo com o ID e encontre no máximo um;
var a = docunment.getElementById ("id"); Coloque o elemento encontrado na variável;
document.getElementsByName ("nome"); Encontre de acordo com o nome, e a matriz é encontrada;
document.getElementsByTagName ("nome"); Encontre a matriz de acordo com o nome da tag;
Document.getElementsByClassName ("Nome") Encontre de acordo com o ClassName, e a matriz é encontrada;
2. Conteúdo da operação:
1. Elementos não-formais:
(1) obter conteúdo:
alerta (a.innerhtml); O código HTML e o texto na tag são obtidos e todo o conteúdo da tag são obtidos.
Por exemplo: existe uma div no corpo:
<div id = "me"> <b> Experimente </b> </div>
Use o INNERHTML para obter o conteúdo na div no script:
var a = document.getElementById ("me");
alerta (a.innerhtml);
Os resultados são os seguintes:
alerta (A.InnerText); Pegue o texto apenas para dentro
alerta (a.outerhtml); Inclui o conteúdo da própria tag (entendimento simples)
(2) Defina o conteúdo:
a.innerhtml = "<font color = vermelho> Olá, mundo </font>";
Se o resultado for o seguinte com o código de conteúdo de configuração, o conteúdo da div é substituído:
A.InnerText apresentará o conteúdo como ele é
Conteúdo claro: atribua uma string vazia
2. Elementos de formulário:
(1) Existem duas maneiras de obter conteúdo:
var t = document.f1.t1; O ID de formulário de formulário é inserido com T1 em F1;
var t = document.getElementById ("id"); Obtenha -o diretamente com o ID.
alerta (T.Value); obtém o valor do valor na entrada;
alerta (t.innerhtml); Obtenha o valor aqui <Textarea> </sexttarea>;
(2) Defina o conteúdo: T.Value = "Alterar conteúdo";
3. Um pequeno ponto de conhecimento:
<a href = "http://www.baidu.com" onclick = "return false"> volte para o Baidu </a>; Se for adicionada uma falha de retorno, ela não saltará, o padrão é retornado true, pulará. O mesmo vale para os botões. Se a flase de retorno estiver definida no botão, o envio não será feito. Isso pode ser usado para controlar o salto de envio.
3. Propriedades de operação
Primeiro, use o ID do elemento para encontrar o elemento e armazená -lo em uma variável:
var a = document.getElementById ("id");
Então você pode operar nas propriedades do elemento:
A.SetAttribute ("Nome do atributo", "Valor do atributo"); Defina um atributo, adicione ou altere -o;
a.getAttribute ("nome do atributo"); Obtenha o valor do atributo;
A.Removeattribute ("Nome do atributo"); Remova um atributo.
Exemplo 1: faça uma pergunta. Se a resposta de entrada estiver correta, ele aparecerá corretamente e o erro será exibido erros;
Aqui está um atributo Daan escrito no texto, que contém o valor da resposta. Ao clicar para verificar a resposta, a entrada de conteúdo por Cheak é a mesma que a resposta:
Código no corpo:
<form> Em que ano foi a fundação da República da China? <input type = "text" daan = "1912" value = "" id = "t1" name = "t1" /> <input type = "button" onclick = "check ()" id = "t2" name = "t2" value = "verifique a resposta" /> < /form>
Código em JS:
function check () {var a = document.getElementById ("t1"); var a1 = a.Value; var a2 = a.getAttribute ("daan"); if (a1 == A2) {alert ("Parabéns por responder corretamente!"); } else {alert ("idiota!"); }}Resultados quando a resposta está correta:
Exemplo 2: o botão de concordância, contagem regressiva para 10 segundos, o botão de concordância se torna submável. Aqui, o atributo de operação: desativado é usado para alterar o estado do botão. Quando desativado = "desativado" não está disponível.
Código no corpo:
<form> <input type = "submit" id = "b1" name = "b1" value = "concordar (10)" desativado = "desativado" /> </morm>
Código em JS:
var n = 10; var a = document.getElementById ("b1"); função bian () {n--; if (n == 0) {a.Removeattribute ("desativado"); a.value = "concordo"; retornar; } else {a.value = "concordou ("+n+")"; window.setTimeout ("bian ()", 1000); }} window.setTimeout ("bian ()", 1000);Resultados da execução:
4. Estilo de operação
Primeiro, use o ID do elemento para encontrar o elemento e armazená -lo em uma variável:
var a = document.getElementById ("id");
Então você pode operar nas propriedades do elemento:
um. ; Opere as propriedades desse estilo de identificação.
O estilo é um estilo no CSS e todos os estilos podem ser operados com código.
document.body.style.backgroundColor = "color"; cor de fundo de toda a janela.
Classe de Operação Estilo: A.ClassName = "ClassName in Style Sheet" opera um lote de estilos
Exemplo 1: comutação automática e manual das fotos de exibição;
O código no corpo, para fazer uma div com imagem de fundo e objetos de controle de ambos os lados:
<div Id = "tuijian" style = "background-image: url (iMges/tj1.jpg);"> <div id = "p1" onclick = "Dodo (-1)"> </div> <div id = "p2" onclick = "Dodo (1)"> <///////"
Código na folha de estilo:
<style type = "text/css"> *{margem: 0px auto; preenchimento: 0px; Fonte-família: "Microsoft Yahei"; } #tuijian {width: 760px; Altura: 350px; Repetição de fundo: sem repetição; } .Páginas {top: 200px; Background-Color:#000; Posição de fundo: centro; Repetição de fundo: sem repetição; Opacidade: 0,4; Largura: 30px; Altura: 60px; } #P1 {Background-Image: URL (IMGES/Prev.png); flutuar: esquerda; margem: 150px 0px 0px 10px; } #P2 {Background-Image: URL (IMGES/NEXT.PNG); Float: Certo; margem: 150px 10px 0px; } </style>O código em JS chama principalmente a função Huan () a cada 3 segundos para modificar o estilo da imagem em segundo plano. Ao clicar no interruptor esquerdo e direito, ele será alterado manualmente e o interruptor automático para:
<Script Language = "JavaScript"> var jpg = new Array (); jpg [0] = "url (iMges/tj1.jpg)"; jpg [1] = "url (iMGEs/tj2.jpg)"; jpg [2] = "url (iMges/tj3.jpg)"; var tjimg = documentElementByid ("tUijian"); if (xb == jpg.length) {xb = 0; } tjimg.style.backgroundImage = jpg [xb]; if (n == 0) {var id = window.setTimeout ("huan ()", 3000); }} função DODO (M) {n = 1; xb = xb+m; if (xb <0) {xb = jpg.length-1; } else if (xb> = jpg.length) {xb = 0; } tjimg.style.backgroundImage = jpg [xb]; } window.setTimeout ("huan ()", 3000); </script>O efeito é o seguinte:
5. Operações de elementos relacionados:
var a = document.getElementById ("id"); Encontre um;
var B = A.Nextsibling, encontre o próximo elemento par de A, preste atenção ao contendo espaços;
var B = a.Previouslibling, encontre o elemento de pares anteriores de A, preste atenção ao contendo espaços;
var b = A.ParentNode, encontre o elemento pai anterior de A;
var b = a.ChildNodes, a matriz é encontrada e o próximo elemento filho de A é encontrado;
var b = A.FirstChild, o primeiro elemento infantil, LastChild Last, ChildNodes [n] Encontre o número do primeiro;
alerta (nós [i] instância do texto); Determine se é texto, retorna verdadeiro, não flase, use se para determinar se seu valor é falso e você pode remover espaços.
6. Criação, adição e exclusão de elementos:
var a = document.getElementById ("id"); Encontre um;
var obj = document.createElement ("nome da tag"); criar um elemento
obj.innerhtml = "Hello World"; Ao adicionar, você precisa criar um elemento primeiro.
A.AppendChild (OBJ); adicione um elemento filho a a.
A.RemoveChild (OBJ); Exclua um elemento filho.
a.SelectedIndex na lista: o número de selecionados;
//A.OptionsO.SelectIndex] Remova o objeto Opção do subscrito de acordo com o índice.
7. Operação de cordas:
var s = new String (); ou var s = "aaaa";
var s = "Hello World";
alerta (s.TolowerCase ()); para minúsculas touwppercase () para maiúsculas
alerta (s.substring (3,8)); interceptar da terceira posição para a oitava posição
alerta (s.substr (3,8)); Começa a interceptar a partir da terceira posição, interceptar oito caracteres de comprimento e não escreva os seguintes números até o final.
s.split (''); Desmonte os personagens de acordo com os caracteres especificados, coloque -os em uma matriz e classifique -os automaticamente
S. Length é a propriedade
S.IndexOf ("mundo"); a primeira ocorrência do mundo na string não retorna -1
S.LastIndexOf ("O"); o onde a última ocorrência de S.LastIndexOf ("O"); o na corda
8. Operação de data e hora
var d = new Date (); horário atual
D. Settlyear (2015,11,6);/*Subtrair 1 configuração no mês em que você deseja definir*/
D.Getlyear: Pegue o ano;
D.GetMonth (): Tome o mês e quanto menos você recebe;
d.getdate (): pegue o céu;
D.Getday (): Tome o dia da semana
D.Gethours (): Tome a hora;
d.getMinutes (): Tire minutos; D.GetSeconds (): Tome segundos
D.Setlyear (): Defina o ano e preste atenção para -1 ao definir o mês.
9. Operação de funções matemáticas
Math.CEIL (); O menor número inteiro maior que o decimal atual
Math.floor (); O maior número inteiro do número decimal atual de peixes pequenos
Math.sqrt (); aberto ao quadrado
Math.Round (); redondo(); redondo
Math.random (); Número aleatório, entre 0-1
10. Algumas dicas
Citações duplas do lado de fora, e as citações duplas dentro são alteradas para citações únicas;
Ao definir a altura da linha na div, não importa o quão alto seja a configuração, a linha ocupada está na posição do meio por padrão (no meio das áreas superior e inferior do Div - [padrão] centralizado verticalmente).
O valor retirado da caixa de texto é uma string e precisa ser convertido em um número usando parseint ().
S.Match (Reg); S representa uma string, o Reg representa uma string e as duas partidas. Se as duas cordas não corresponderem, um nulo será devolvido.
A explicação detalhada acima do objeto JavaScript-Dom Operação-Window.Document é todo o conteúdo que compartilho com você. Espero que você possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.