How to use DOM in JS to control HTML elements

Xiao Bian to share with you how to use JS to control the HTML elements in the DOM, I hope you’ve read this article after the big harvest, let’s go explore it!

This article introduces the relevant information JS is used to control the HTML DOM elements, a friend in need can refer to the

1.getElementsByName (): Gets name

. ] ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ `

Example:

  

hello

hello

hello

function getName () {var count = document.getElementsByName ( "pn"); alert (count .length); var p = count [2]; p.innerHTML = "world";}

results: three screen print out hello, accompanied by a prompt and block “3”, after clicking OK, the contents of the display screen becomes hello hello world

~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~ ··

2.getElementsByTagName (): Get element.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 Hello  

Hello

Hello

function getName () {var count = Document.GtelementSbyTagname ("p"); alert (count.length); var p = count [2]; p.innerhtml = "world";}

Result: The interface prints three Hello, and there is a prompt “3”, when you click OK, the content displayed by the interface is Hello Hello World

~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

3.GetaTribute (): Get Element properties.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Function GetAttr1 () {var Anode = Document.GtelementByid (“AID”); var attr = anode.getattribute (“id”); Alert (” A ID is: “+ attr);} Function GETATTR2 () {var anode = document.getlementByid (“aid”); var attr = anode.getattribute (“Title”); Alert (“The title content is:” + attr);} Getattr1 (); getattr2 ()

 As a result: the ID of the display box "A is: AID". After clicking OK, the pop-up prompt box "a title content is: get a tag properties" .  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 4.SetaTAttribute () set Element properties.  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~     
AID2

function setttr () {var anode = document.getlementByid (“AID2”); anode.setttribute (“Title”, “Dynamic Settings A Title properties “); var attr = anode.gettribute (” Title “); Alert (” Dynamic Setting Title value is: + attr);} setttr ();


Result: The pop-up prompt box “dynamically set the title value is: Dynamic Setting A Title Properties”.

~~~~~~~~~~~~~~~~~~~~~~~~~~~

5.ChildNodes (): Access the child node.
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~       

function getChildNode () {var childNode = document.getlementsBytagname (“UL”) [ 0] .childNodes; Alert (ChildNode.Length); Alert (ChildNode [0] .NodeType);} getchildNode ();

Result: Interface printing .1. 2 .3 Pop-up dialog “3”, pop up “1” after it is determined. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  6.ParentNode (): Access the parent node. 
    ~~~~~~~~~~~~~~~~~~~~~~~ ·
  • Case
function getParentNode () {var p = document.GtelementByid ("pid"); Alert (PP"} getParentNode ();
Result: Pop-up prompt box: p.
~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~

7.createElement (): Create an element node.

~~~~~~~~~~~~~~~~~~~~~~~~

Example:

function createnode () {var body = document.body; var input = document.createElement (“input”); input.type = “butt”; input.value = “button” ; Body.Appendchild (Input); // Insert Node} Createnode ();

  

Result: A button appears.

~~~~~~~~~~~~~~~~~~~~~~~~~~~

8.CreateTextNode (): Create a text node. ~~~~~~~~~~~~~~~~~~~~~~
Example:

Function Createnode () {var Element = Document.createElement (“P”);element.className = “message”; var textNode = document.createTextNode ( “Hello world!”); element.appendChild (textNode); document.body.appendChild (element);} createNode ();

Code Analysis: This example creates a new

element and specifies the Class feature of the value “Message”. Then, create a text node and add it to the previously created elements. The last step is to add this element to the

element in the document, which can see the newly created element and text node in the browser.

Result: The page shows Hello World.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 9.Nsertbefore (): Insert node.  ~~~~~~~~~~~~~~~~~~~~~~~~   Case  

P element

function addnode () {var p = document.getlementById (“p”); var node = document.getlementByid (“PID) “); var newnode = DOCUMENt.createElement (“p”); newNode.innerHtml = “Dynamically insert a P element”; p.insertbefore (newNode, node);} addnode ();

RESULTS: Interface Print: Dynamic Insert a P element
 P element   ~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~   10.RemoveChild (): Delete the node. 
~~~~~~~~~~~~~~~~~~~~~ ·

Case

Function Removenode () {var P = Document.GtelementByid (“p”); var p = p.removechild (p.childnodes [ 1]);} removenode ();

Result: The interface did not display.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 11.Offsetheight : Web size  

12.ScrollHeight: web size

~~~~~~~~~~~~~~~~~~~ · Example:
FUnction getSize () {var width = document.documentElement.offsetWidth || document.body.offsetWidth; // resolve compatibility issues var height = document.documentElement.offsetHeight || document.body.offsetHeight; alert (width + “,” + height } getSize ();

After reading this article, I believe you Using the DOM in JS to control the HTML element has a certain understanding, you want to know more related knowledge, please pay attention to Tumi Yun Industry Information Channel, thank you for reading!

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment