በተጨማሪም የኤችቲኤምኤል ሰነድ ነገር ሁለት ንብረቶችን ይገልፃል, እያንዳንዱም ስብስብን ሳይሆን አንድ ነጠላ አካልን ያመለክታል. የሰነድ.ሰውነት ንብረት የኤችቲኤምኤል ሰነድ አካልን ይወክላል፣ እና የሰነድ.head ንብረቱ የ . እነዚህ ንብረቶች ሁል ጊዜ በሰነዱ ውስጥ ይገለፃሉ-ምንም እንኳን የምንጭ ሰነዱ እና አካላት ባይኖሩትም አሳሹ በተዘዋዋሪ ይፈጥራል። የሰነድ ነገር የሰነድ አካል ንብረት የሰነዱን ዋና አካል ያመለክታል። በኤችቲኤምኤል ሰነዶች ውስጥ ሁልጊዜ የሚወክለው .

የኤችቲኤምኤል ክፍል አይነታ ዋጋ የዜሮ ወይም ከዚያ በላይ መለያዎች ዝርዝር ነው፣ በክፍተቶች የተለዩ። ተዛማጅ የሰነድ አካላት ስብስቦችን እንዲገልጹ ይፈቅድልዎታል-በክፍል ባህሪ ውስጥ ተመሳሳይ መለያ ያላቸው ማንኛቸውም አካላት የአንድ ስብስብ አካል ናቸው። ክፍል የሚለው ቃል በጃቫ ስክሪፕት የተጠበቀ ነው፣ ስለዚህ የደንበኛ-ጎን ጃቫስክሪፕት የኤችቲኤምኤል ክፍል ባህሪን ዋጋ ለማከማቸት የክፍል ስም ንብረቱን ይጠቀማል።

በተለምዶ የክፍል አይነታ ከCSS cascading style sheets ጋር በማጣመር ለሁሉም የስብስብ አባላት የተለመደ የአቀራረብ ዘይቤን ተግባራዊ ለማድረግ ይጠቅማል። ነገር ግን፣ በተጨማሪ፣ የኤችቲኤምኤል 5 ስታንዳርድ የጌትElementsByClassName() ዘዴን ይገልፃል፣ ይህም በክፍላቸው ባህሪያት ውስጥ ያሉትን ለዪዎች መሰረት በማድረግ በርካታ የሰነድ ክፍሎችን እንዲመርጡ ያስችልዎታል።

እንደ getElementsByTagName() ዘዴ፣ የጌትElementsByClassName() ዘዴ በሁለቱም HTML ሰነዶች እና HTML ክፍሎች ላይ ሊጠራ ይችላል፣ እና ሁሉንም የሰነዱ ወይም የፍተሻ መስፈርቶቹን የሚዛመድ አካል የያዘ የቀጥታ NodeList ነገርን ይመልሳል።

የጌትElementsByClassName() ዘዴ አንድ የሕብረቁምፊ ነጋሪ እሴት ይወስዳል፣ነገር ግን ህብረ ቁምፊው ራሱ በቦታ ተለያይተው ብዙ ለዪዎችን ሊይዝ ይችላል። የክፍል መለያዎቻቸው ሁሉንም የተገለጹ ለዪዎች የያዙ ሁሉም ንጥረ ነገሮች እንደተዛመዱ ይቆጠራሉ። የመለያዎቹ ቅደም ተከተል ምንም አይደለም. በሁለቱም የክፍል አይነታ እና በጌትElementsByClassName() ዘዴ ያለው ክርክር ክፍል ለዪዎች በነጠላ ሰረዞች ሳይሆን በክፍተት እንደሚለያዩ ልብ ይበሉ።

ከዚህ በታች የgetElementsByClassName() ዘዴን የመጠቀም ምሳሌዎች አሉ።

// ሁሉንም ክፍሎች በክፍል "ማስጠንቀቂያ" var ማስጠንቀቂያዎች = document.getElementsByClassName ("ማስጠንቀቂያ"); // ሁሉንም የአንድ ኤለመንት ተወላጆች ለዪዎች "ሎግ" // ከክፍል "ስህተት" እና "ገዳይ" var log = document.getElementById ("ሎግ"); var fatal = log.getElementsByClassName ("ገዳይ ስህተት");

CSS Cascading Style Sheets በሰነድ ውስጥ ያሉትን ንጥረ ነገሮች ወይም ስብስቦችን እንድትገልጹ የሚያስችልዎ መራጮች በመባል የሚታወቁት በጣም ኃይለኛ የአገባብ ግንባታዎች አሏቸው። CSS3 መራጮችን ደረጃ ከማድረግ ጋር፣ ሌላ የW3C መስፈርት የመራጮች ኤፒአይ በመባል የሚታወቅ የጃቫ ስክሪፕት ዘዴዎችን ከተጠቀሰው መራጭ ጋር የሚዛመዱ አካላትን ሰርስሮ ለማውጣት ይገልፃል።

የዚህ ኤፒአይ ቁልፉ የሰነዱ ነገር መጠይቅSelectorAll() ዘዴ ነው። ከሲኤስኤስ መራጭ ጋር ነጠላ የሕብረቁምፊ ክርክር ይወስዳል እና ከመራጩ ጋር የሚዛመዱ ሁሉንም የሰነድ ክፍሎች የሚወክል የኖድሊስት ነገርን ይመልሳል።

ከጥያቄ የSelectorAll() ዘዴ በተጨማሪ የሰነዱ ነገር የመጠይቅSelector() ዘዴን ይገልፃል፣ይህም ከመጀመሪያው(በሰነድ ቅደም ተከተል) የሚዛመደውን አካል ብቻ ከመመለስ በስተቀር፣ ወይም ምንም ከሌለ ባዶ ከሆነው ከጥያቄውSelectorAll() ዘዴ ጋር ተመሳሳይ ነው። የሚዛመዱ ንጥረ ነገሮች.

እነዚህ ሁለቱ ዘዴዎች በElements ክፍልም ተገልጸዋል። በኤለመንቱ ላይ ሲጠሩ ሰነዱ በሙሉ ለተሰጠው መራጭ ግጥሚያ ይፈለጋል እና ውጤቱም ጥቅም ላይ የዋለውን ንጥረ ነገር ዘሮችን ብቻ በማካተት ይጣራል። ይህ አካሄድ ተቃራኒ ሊመስል ይችላል ምክንያቱም የመራጭ ሕብረቁምፊው የተዛመደውን ንጥረ ነገር ቅድመ አያቶች ሊያካትት ይችላል ማለት ነው።

የሰነድ አባል ከመረጡ በኋላ አንዳንድ ጊዜ መዋቅራዊ ተዛማጅ የሰነዱን ክፍሎች (ወላጅ, ወንድሞች, እህቶች, ልጅ) ማግኘት አስፈላጊ ነው. የሰነድ ነገር እንደ መስቀለኛ መንገድ ነገሮች ዛፍ ተደርጎ ሊወሰድ ይችላል። የመስቀለኛ መንገድ አይነት እንዲህ ያለውን ዛፍ ለመዳሰስ የሚያስችሉዎትን ባህሪያት ይገልጻል. ለሰነድ አሰሳ ሌላ የመተግበሪያ በይነገጽ አለ፣ ለምሳሌ የElement object tree።

የሰነዱ ነገር፣ ኤለመንቱ ነገሮች እና በሰነዱ ውስጥ ያሉ የጽሁፍ ቁርጥራጮችን የሚወክሉ የፅሁፍ ነገሮች ሁሉም የመስቀለኛ መንገድ ነገሮች ናቸው። የመስቀለኛ ክፍል የሚከተሉትን ጠቃሚ ባህሪያት ይገልጻል፡-

የዚህ መስቀለኛ መንገድ ወላጅ ኖድ፣ ወይም እንደ ሰነድ ያለ ወላጅ ለሌላቸው አንጓዎች ባዶ ነው።

የልጆች አንጓዎችን ውክልና የሚያቀርብ ሊነበብ የሚችል ድርድር የሚመስል ነገር (NodeList)።

የመጀመሪያው እና የመጨረሻው የልጅ ኖዶች፣ ወይም የተሰጠው መስቀለኛ መንገድ ምንም የህጻን ኖዶች ከሌለው ባዶ ይሆናል።

የሚቀጥለው እና የቀደመ ወንድም አንጓዎች. የእህት ኖዶች አንድ አይነት ወላጅ ያላቸው ሁለት አንጓዎች ናቸው። የሚታዩበት ቅደም ተከተል በሰነዱ ውስጥ ካለው ቅደም ተከተል ጋር ይዛመዳል. እነዚህ ንብረቶች አንጓዎችን ወደ ድርብ የተገናኘ ዝርዝር ያገናኛሉ።

የዚህ መስቀለኛ መንገድ አይነት. የሰነድ አንጓዎች በዚህ ንብረት ውስጥ 9 ዋጋ አላቸው። የአንጓዎች አይነት ኤለመንት - እሴት 1. የጽሑፍ አንጓዎች አይነት ጽሑፍ - እሴት 3. የአንጓዎች አይነት አስተያየቶች - እሴት 8 እና የአንጓዎች አይነት DocumentFragment - እሴት 11.

የጽሑፉ ይዘት እና የአስተያየት አንጓዎች።

ሁሉም ቁምፊዎች ወደ አቢይ ሆሄ የተቀየረበት የኤለመንት መለያ ስም።

እነዚህን የመስቀለኛ ክፍል ባህሪያት በመጠቀም፣ ከዚህ በታች እንደሚታየው የሰነዱ ነገር የመጀመሪያ ልጅ መስቀለኛ መንገድ ሁለተኛ ልጅ መስቀለኛ መንገድን መጥቀስ ትችላለህ።

Document.childNodes.childNodes == ሰነድ.የመጀመሪያ ልጅ.የመጀመሪያ ልጅ.ቀጣይ ወንድም እህት

በጥያቄ ውስጥ ያለው ሰነድ የሚከተለው ቅጽ እንዳለው እናስብ።

ፈተና ሰላም አለም!

ከዚያም የመጀመሪያው ልጅ መስቀለኛ መንገድ ሁለተኛ ልጅ ኖድ ኤለመንት ይሆናል. በ nodeType ንብረቱ ውስጥ ዋጋ 1 ይይዛል እና በመስቀለኛ ስም ንብረት ውስጥ "BODY" የሚለውን እሴት ይዟል.

ሆኖም፣ እባክዎ ይህ ኤፒአይ በሰነድ ጽሑፍ ላይ ለሚደረጉ ለውጦች እጅግ በጣም ስሜታዊ መሆኑን ልብ ይበሉ። ለምሳሌ፣ በዚህ ሰነድ ውስጥ ባሉት እና መለያዎች መካከል አንድ ነጠላ መስመር ምግብ ካከሉ፣ ያ የመስመር ምግብ ቁምፊ የመጀመሪያው ልጅ መስቀለኛ መንገድ (የጽሑፍ መስቀለኛ መንገድ) የመጀመሪያ ልጅ መስቀለኛ መንገድ ይሆናል፣ እና የሁለተኛው የህጻን ኖድ ክፍል ይሆናል እንጂ .

ዋናው ፍላጎት የሰነዱ አካላት እራሳቸው ሲሆኑ በውስጣቸው ካለው ጽሑፍ (እና በመካከላቸው ያለው ነጭ ቦታ) ፣ ሰነዱን እንደ የንጥረ ነገሮች ዛፍ ለመተርጎም የሚያስችል የመተግበሪያ በይነገጽ መጠቀም በጣም ምቹ ነው ፣ ችላ በማለት የሰነዱ አካል የሆኑት የፅሁፍ እና የአስተያየት ኖዶች።

የዚህ አፕሊኬሽን በይነገጽ የመጀመሪያ ክፍል የElement ነገሮች የልጆች ንብረት ነው። ልክ እንደ childNodes ንብረት፣ እሴቱ የኖድሊስት ነገር ነው። ነገር ግን፣ ከልጅ ኖዶች ንብረት በተለየ፣ የልጆቹ ዝርዝር የElement ነገሮችን ብቻ ይዟል።

የፅሁፍ እና የአስተያየት ኖዶች የልጆች ኖዶች እንደሌላቸው ልብ ይበሉ። ይህ ማለት ከላይ የተገለፀው የ Node.parentNode ንብረት የፅሁፍ ወይም አስተያየት አይነት አንጓዎችን አይመልስም ማለት ነው። የማንኛውም የElement ነገር የወላጅ ኖድ ንብረት ሁል ጊዜ ሌላ አካል ወይም የዛፉ ሥር - ሰነድ ወይም DocumentFragment ነገር ይሆናል።

የሰነድ አካላትን ለማሰስ የመተግበሪያው በይነገጽ ሁለተኛ ክፍል የሕፃን እና የእህት አንጓዎችን የመዳረሻ ባህሪያት ጋር ተመሳሳይ የሆነ የኤሌሜንት ነገር ባህሪያት ነው.

ከመጀመሪያው ልጅ እና የመጨረሻው ልጅ ንብረቶች ጋር ተመሳሳይ ነው, ነገር ግን የልጁን ንጥረ ነገሮች ይመልሱ.

ከቀጣዮቹ የእህት እና የእህት ወይም የእህት ንብረቶች ጋር ተመሳሳይ፣ ነገር ግን የወንድም እህት ክፍሎችን ይመልሱ።

የልጆች ንጥረ ነገሮች ብዛት። ከልጆች ጋር ተመሳሳይ እሴት ይመልሳል.የርዝመት ንብረት.

እነዚህ የልጅ እና የእህት አባል መዳረሻ ባህሪያት ከ IE በስተቀር በሁሉም የአሁን አሳሾች ላይ ደረጃቸውን የጠበቁ እና የሚተገበሩ ናቸው።

የሰነድ ነገር ሞዴል ወይም "DOM" የድረ-ገጾችን አካላትን ለመድረስ የፕሮግራም በይነገጽ ነው። በመሠረቱ፣ የገጽ ይዘትን፣ መዋቅርን እና ቅጦችን እንዲያነቡ እና እንዲቆጣጠሩ የሚያስችልዎ የገጽ ኤፒአይ ነው። እንዴት እንደሚሰራ እና እንዴት እንደሚሰራ እንወቅ.

ዋናውን የኤችቲኤምኤል ሰነድ ወደ ተሰራጭ፣ ቅጥ ያለው እና መስተጋብራዊ ገጽ የመቀየር ሂደት “ወሳኝ አቀራረብ መንገድ” ይባላል። ይህ ሂደት በበርካታ እርከኖች ሊከፋፈል ቢችልም ወሳኝ መንገድን መረዳት ላይ እንደገለጽኩት እነዚህ እርምጃዎች በግምት ወደ ሁለት ደረጃዎች ሊመደቡ ይችላሉ። በመጀመሪያው ላይ, አሳሹ በመጨረሻ በገጹ ላይ ምን እንደሚታይ ለመወሰን ሰነዱን ይመረምራል, እና በሁለተኛው ውስጥ, አሳሹ ምስሉን ያከናውናል.

የመጀመሪያው ደረጃ ውጤት "የዛፍ ዛፍ" ተብሎ የሚጠራው ነው. አተረጓጎም ዛፍ በገጽ ላይ የሚቀርቡትን የኤችቲኤምኤል አባላትን እና ተዛማጅ ስልቶቻቸውን የሚያሳይ ነው። ይህንን ዛፍ ለመገንባት አሳሹ ሁለት ነገሮችን ይፈልጋል።

DOM የዋናው HTML ሰነድ የዕቃ ውክልና ነው። ከዚህ በታች እንደምናየው አንዳንድ ልዩነቶች አሉት ነገር ግን በመሠረቱ የኤችቲኤምኤል ሰነድ አወቃቀሩን እና ይዘቱን ወደ ተለያዩ ፕሮግራሞች ሊጠቀሙበት ወደ ሚችል ዕቃ ሞዴል ለመቀየር የሚደረግ ሙከራ ነው።

የ DOM ነገሮች አወቃቀር "የመስቀለኛ ዛፍ" ተብሎ በሚጠራው ይወከላል. ይህ ተብሎ የሚጠራው አንድ ወላጅ ያለው ዛፍ እንደሆነ ተደርጎ ስለሚታሰብ ወደ ብዙ የልጆች ቅርንጫፎች የሚዘረጋ እያንዳንዱም ቅጠል ሊኖረው ይችላል። በዚህ ሁኔታ, የወላጅ "ኤለመን" ዋናው አካል ነው, የልጁ "ቅርንጫፎች" የጎጆው ክፍሎች ናቸው, እና "ቅጠሎች" በንጥረ ነገሮች ውስጥ ያሉ ይዘቶች ናቸው.

ይህንን የኤችቲኤምኤል ሰነድ እንደ ምሳሌ እንውሰድ፡-

የእኔ የመጀመሪያ ድረ-ገጽ ሰላም, ዓለም!

ስላም፧

ይህ ሰነድ በሚከተለው የአንጓዎች ዛፍ ሊወከል ይችላል፡-

• html
  • ጭንቅላት
    • ርዕስ
      • የእኔ የመጀመሪያ ድረ-ገጽ
  • አካል
    • h1
      • ሰላም ዓለም!
    • ገጽ
      • ስላም፧

ከላይ ባለው ምሳሌ፣ DOM የዋናው HTML ሰነድ 1፡1 ካርታ እንደሆነ ያሳያል። ሆኖም, ቀደም ብዬ እንዳልኩት, ልዩነቶች አሉ. DOM ምን እንደሆነ ሙሉ በሙሉ ለመረዳት፣ ያልሆነውን መመልከት አለብን።

ምንም እንኳን DOM ከኤችቲኤምኤል ሰነድ የተፈጠረ ቢሆንም፣ ሁሌም ተመሳሳይ አይደለም። DOM ከምንጩ HTML ሊለያይ የሚችልባቸው ሁለት አጋጣሚዎች አሉ።

DOM የኤችቲኤምኤል ሰነድ ትክክለኛ (ማለትም ቀድሞ የተሰራ) አካላትን የመድረሻ በይነገጽ ነው። DOMን በመፍጠር ሂደት ውስጥ አሳሹ ራሱ በኤችቲኤምኤል ኮድ ውስጥ አንዳንድ ስህተቶችን ማስተካከል ይችላል።

ይህንን የኤችቲኤምኤል ሰነድ እንደ ምሳሌ እንውሰድ፡-

ሰላም ዓለም!

ሰነዱ ኤለመንቶችን እና , ይህም ለኤችቲኤምኤል መስፈርት ነው. ግን የተገኘውን የ DOM ዛፍ ከተመለከትን ፣ ይህ እንደተስተካከለ እናያለን-

• html
  • ጭንቅላት
  • አካል
    • ሰላም ዓለም!
  2. DOM በጃቫስክሪፕት ኮድ ሲቀየር

  የኤችቲኤምኤል ሰነድ ይዘቶችን ለማየት በይነገጽ ከመሆን በተጨማሪ DOM ራሱ ሊሻሻል ይችላል።

  ለምሳሌ ጃቫስክሪፕትን በመጠቀም ለDOM ተጨማሪ አንጓዎችን መፍጠር እንችላለን።

  Var newParagraph = document.createElement ("p"); var paragraphContent = document.createTextNode("አዲስ ነኝ!")፤ newParagraph.appendChild(አንቀጽ ይዘት)፤ document.body.appendChild(አዲስ አንቀጽ)፤

  ይህ ኮድ DOMን ይቀይረዋል፣ ነገር ግን ለውጦቹ በኤችቲኤምኤል ሰነድ ውስጥ አይታዩም።

  DOM በአሳሹ ውስጥ የሚያዩት አይደለም (ማለትም የስርጭት ዛፍ)

  በአሳሹ መመልከቻ ውስጥ የማሳያውን ዛፍ ታያለህ፣ እንዳልኩት የ DOM እና CSSOM ጥምረት ነው። ከDOM እና ከተሰራው ዛፍ የሚለየው የኋለኛው ውሎ አድሮ በስክሪኑ ላይ የሚቀርበውን ብቻ ያቀፈ ነው።

  ዛፉ ከተሰራው ጋር ብቻ ስለሚዛመድ በምስላዊ የተደበቁ ንጥረ ነገሮችን አይጨምርም. ለምሳሌ ፣ ከእይታ ጋር ቅጦች ያሏቸው ንጥረ ነገሮች-ምንም .

  ሰላም ዓለም!

  ስላም፧

  DOM ክፍሉን ያካትታል

  • html
    • ጭንቅላት
    • አካል
      • h1
        • ሰላም ዓለም!
      • ገጽ
        • ስላም፧

  ሆኖም ግን, የማሳያው ዛፍ, እና ስለዚህ በእይታ እይታ ውስጥ የሚታየው, በዚህ ንጥረ ነገር ውስጥ አይካተትም.

  • html
    • አካል
      • h1
        • ሰላም ዓለም!
  DOM በDevTools ውስጥ የሚታየው አይደለም።

  ይህ ልዩነት በትንሹ ያነሰ ነው ምክንያቱም DevTools Element Inspector በአሳሹ ውስጥ ካለን DOM ጋር በጣም የቀረበ ቅርበት ስላለው። ነገር ግን፣ የDevTools መርማሪ በDOM ውስጥ የሌለ ተጨማሪ መረጃ ይዟል።

  የዚህ ምርጥ ምሳሌ CSS የውሸት-ኤለመንቶች ነው። ከዚህ በፊት እና :: በኋላ መራጮች የCSSOM እና የማሳያ ዛፍ አካል ናቸው ነገር ግን በቴክኒክ የDOM አካል አይደሉም። ይህ የሆነበት ምክንያት DOM የተፈጠረው በኤለመንት ላይ የተተገበሩትን ቅጦች ሳያካትት ከመጀመሪያው የኤችቲኤምኤል ሰነድ ብቻ ነው።

  ምንም እንኳን አስመሳይ-ኤለመንቶች የDOM አካል ባይሆኑም በዴቭቶል ኤለመንቱ መርማሪ ውስጥ አሉ።

  
  ከቆመበት ቀጥል

  DOM የኤችቲኤምኤል ሰነድ በይነገጽ ነው። በእይታ ፖርቱ ውስጥ ምን እንደሚሰጥ ለመወሰን እንደ መጀመሪያው ደረጃ በአሳሾች እና በጃቫስክሪፕት ኮድ የገጽ ይዘትን ፣ መዋቅርን ወይም ዘይቤን ለመቀየር ጥቅም ላይ ይውላል።

በዚህ ማጠናከሪያ ትምህርት ከክስተቶች፣ ባሕሪያት እና GetElementById ጋር በጃቫስክሪፕት የመስራትን መሰረታዊ መርሆችን እንመለከታለን።

በቀደሙት ትምህርቶች የጃቫስክሪፕት ቋንቋን መሰረታዊ ችሎታዎች አጥንተናል። ከዚህ ትምህርት ጀምሮ፣ ጃቫ ስክሪፕት በተጨባጭ የተነደፈውን እንሰራለን - የኤችቲኤምኤል ገጽ ክፍሎችን እናስተካክላለን እና ለተጠቃሚ እርምጃዎች ምላሽ እንሰጣለን ። የእኛ ስክሪፕቶች የበለጠ አስደናቂ እና ጠቃሚ ይሆናሉ።

ለጣቢያ ተጠቃሚ እርምጃዎች ምላሽ ለመስጠት ኮዳችንን በማስተማር እንጀምራለን ።

ለምሳሌ, ተጠቃሚው አንድ ቦታ በመዳፊት ጠቅ ያደርጋል, እና የእኛ ኮድ በምላሹ ይህን ጠቅ ማድረግ እና አንዳንድ መረጃዎችን በስክሪኑ ላይ ማሳየት አለበት. በጃቫ ስክሪፕት ልንከታተላቸው የምንችላቸው የተጠቃሚ እርምጃዎች ክስተቶች ይባላሉ። ዝግጅቶች እንደሚከተለው ሊሆኑ ይችላሉ-ማልቀስ መዳፊት በገጽ አካል ላይ ፣መመሪያ መዳፊት ወደ ገጽ አካል ወይም በተቃራኒው -እንክብካቤ

የመዳፊት ጠቋሚ ከአንድ ኤለመንት እና የመሳሰሉት። በተጨማሪም, በተጠቃሚ ድርጊቶች ላይ ያልተመሰረቱ ክስተቶች አሉ, ለምሳሌ, የኤችቲኤምኤል ገጽ በአሳሹ ውስጥ ሲጫን.

ከእነሱ በጣም ቀላሉን እንጀምራለን. የክስተት መሰረታዊ ነገሮችየአንድን ንጥረ ነገር ምላሽ ለአንድ የተወሰነ ክስተት ለማዘጋጀት ቀላሉ መንገድ ለተወሰነ መለያ መለያ ባህሪን በመጠቀም መግለጽ ነው። ለምሳሌ, አንድ ክስተት "መዳፊት ጠቅታ"ከክሊክ ባህሪ ፣ ክስተት ጋር ይዛመዳል "አይጥ አልቋል"- የ onmouseover ባህሪ, እና ክስተት

"የጠቋሚ ቅጠሎች ኤለመንት" - onmouseout ባህሪ.ከዝግጅቱ ጋር ያለው የባህሪ ዋጋ ጃቫስክሪፕት ኮድ ነው። በሚከተለው ምሳሌ

በመዳፊት አንድ አዝራር ጠቅ በማድረግ የማንቂያው ተግባር ይከናወናል-እና አሁን

ጠቅ በማድረግ

የ Func ተግባር በኤለመንት ላይ ይከናወናል-

ተግባር func () (ማስጠንቀቂያ ("!");)

አንድ ተግባር ብቻ ሳይሆን በርካታ ተግባራትን ማከናወን ይችላሉ- ተግባር func1 () (ማንቂያ ("1")) ተግባር func2 () (ማስጠንቀቂያ ("2");)እባክዎ በባህሪው ውስጥ ድርብ ጥቅሶች ከፈለጉ (ለምሳሌ ለገመድ) እና የባህሪው ውጫዊ ጥቅሶች እንዲሁ ድርብ ጥቅሶች መሆናቸውን ልብ ይበሉ -

onclick = " ማንቂያ ("!")" ተግባር func1 () (ማንቂያ ("1")) ተግባር func2 () (ማስጠንቀቂያ ("2");)- ይህ ኮድ አይሰራም. ይህንን ለመዋጋት ብዙ መንገዶች አሉ-ውጫዊ ጥቅሶችን ወደ ነጠላ ጥቅሶች መለወጥ ይችላሉ።, እንዲሁም ከውስጥ ጥቅሶች በኋለኛው ጩኸት ማምለጥ ይችላሉ onclick = " ማንቂያ (\"! \)".

ወይም በቀላሉ የጃቫስክሪፕት ኮድን ከባህሪው ወደ ተግባር ያንቀሳቅሱት እና የተግባር ስሙን በባህሪው ውስጥ ብቻ ይተዉት። ተግባር func1 () (ማንቂያ ("1")) ተግባር func2 () (ማስጠንቀቂያ ("2");) onclick = "func()"

አሁን የኤችቲኤምኤል ገጽ ክፍሎችን እንዴት መቀበል እንደምንችል እንማራለን እና ከእነሱ ጋር የተለያዩ ማጭበርበሮችን እናከናውናለን (ለምሳሌ ፣ ጽሑፎቻቸውን እና ቀለማቸውን እና ሌሎች ብዙ ጠቃሚ ነገሮችን መለወጥ እንችላለን)።

ለመፈተሽ የተዘጋጀ የመታወቂያ ባህሪ ያለው ገጹ ላይ መለያ አለን እንበል።

የዚህን መለያ ማገናኛ ወደ ኢሌም ተለዋዋጭ እንፃፍ። ይህንን ለማድረግ ኤለመንቱን በመታወቂያው የሚያገኘውን የ getElementById ዘዴን መጠቀም አለብን።ይህ ግቤት የሚከሰተው የጠቅታ ባህሪን የመደብንበት አዝራር ሲጫን ነው. ይህንን ቁልፍ ጠቅ በማድረግ የተግባር ፈንክሽኑ ይሰራል፣ ይህም በኤችቲኤምኤል ገጹ ላይ መታወቂያ ያለው ለመፈተሽ እና ለመፃፍ እኩል የሆነ አካል ያገኛል።

ከእሱ ጋር ማገናኘት ወደ ኤሌም ተለዋዋጭ:.

አሁን በኤሌም ተለዋዋጭ ውስጥ በሙከራ ዋጋ ውስጥ ካለው የመታወቂያ ባህሪ ጋር ወደ ኤለመንት አገናኝ አለን። ተለዋዋጭ ኤሌም ራሱ ነው

ነገር

ይህ በተግባር እንዴት እንደሚከሰት እንይ.

በጃቫስክሪፕት በኩል ከኤችቲኤምኤል ባህሪዎች ጋር የመስራት መሰረታዊ ነገሮች አሁን እናነባለን እና መለያ ባህሪያትን እንለውጣለን.ከሙከራ ጋር እኩል የሆነ መታወቂያ እና አዝራር ያለው ግብአት እንደገና እንያዝ፣ የትኛውን የ Func ተግባር እንደሚጀምር ጠቅ ስታደርግ፡

በ Func ተግባር ውስጥ የእኛን ግብአት እንቀበላለን

በእሱ መታወቂያ

እና በኤልም ተለዋዋጭ ውስጥ ለእሱ አገናኝ ይፃፉ፡-

ተግባር func () (var elem = document.getElementById ("ሙከራ"));

አሁን የግቤት ባህሪያችንን ይዘቶች እናሳይ።

ለምሳሌ የእሴት ባህሪን ለማግኘት የሚከተለውን መፃፍ አለብህ፡ elem.value , ኢሌም በጌትElementById ተጠቅመን ወደ ኤለማችን አገናኝ የፃፍንበት ተለዋዋጭ ሲሆን እሴቱ የሚስበን የመለያ ባህሪ ነው።

የባህሪውን ይዘት በዚህ መንገድ በማንቂያ በኩል ማሳየት እንችላለን - alert(elem.value) - ወይም ወደ ተለዋዋጭ እንፃፍ። ይህን እናድርግ፡-

ተግባር func () ( var elem = document.getElementById ("ሙከራ"); elem.value = "www"; //присвоим новое значение атрибуту value } !}

የኤችቲኤምኤል ኮድ ይህን ይመስላል (የዋጋ ባህሪው www ይሆናል):

ደህና ፣ አሁን በጣም አስቸጋሪው ነገር - ወደ ኤሌም ተለዋዋጭ ማስገባት አይችሉም ፣ ግን የነጥቦችን ሰንሰለት በዚህ መንገድ ይገንቡ-

ተግባር func () (ማንቂያ (document.getElementById("test"). እሴት)፤ //"!"" ያሳያል

በተመሳሳይ መንገድ (ሰንሰለት) ባህሪያትን እንደገና መፃፍ ይችላሉ-

ተግባር func () ( document.getElementById ("ሙከራ") .እሴት = "(! LANG: www"; }!}

ሆኖም ግን, በአብዛኛዎቹ ሁኔታዎች, ተለዋዋጭ ማስተዋወቅ የበለጠ ምቹ ነው. ሁለት ምሳሌዎችን አወዳድር - አሁን የኤሌም ተለዋዋጭ አስተዋውቄአለሁ እና ማንኛውንም አይነት ባህሪ ማንበብ እችላለሁ፣ getElementById ይባላል። አንዴ ብቻ:

ተግባር func () ( var elem = document.getElementById ("ሙከራ"); elem.value = "www"; elem.type = "submit"; }!}

አሁን አዲስ ተለዋዋጭ አላስተዋውቅም እና ስለዚህ ለgetElementById ሁለት ጊዜ መደወል አለብኝ፡

ተግባር func () ( document.getElementById ("ሙከራ") .እሴት = "(! LANG: www"; document.getElementById("test").type = "submit"; }!}

በእኔ አስተያየት ይህ ኮድ አንድ ያነሰ መስመር ቢወስድም የበለጠ የተወሳሰበ ሆኗል. በተጨማሪም የመታወቂያውን ዋጋ ከሙከራ ወደ ለምሳሌ www ለመለወጥ ከፈለግኩ ብዙ ቦታዎች ላይ ማድረግ አለብኝ, ይህ በጣም ምቹ አይደለም.

በእኛ አጋጣሚ በእያንዳንዱ ጊዜ getElementById የምንጠቀም ከሆነ አሳሹ በእያንዳንዱ ጊዜ የኤችቲኤምኤል ገፁን ያስኬዳል እና በተሰጠው መታወቂያ ብዙ ጊዜ ንጥረ ነገር ይፈልጋል (መታወቂያዎቹ አንድ አይነት መሆናቸው ምንም አይደለም - አሳሹ ሁሉንም ነገር ያደርጋል) ድርጊቶቹ ብዙ ጊዜ) ፣ የአሳሽ ስራን ሊያዘገዩ የሚችሉ የማይጠቅሙ ስራዎችን በማከናወን ላይ።

የኤሌም ተለዋዋጭን ከተጠቀምን, በገጹ ላይ ምንም ፍለጋ አይከሰትም (ኤለመንቱ ቀድሞውኑ ተገኝቷል እና ከእሱ ጋር ያለው ግንኙነት በኤሌም ተለዋዋጭ ውስጥ ይገኛል).

በጃቫስክሪፕት በኩል ከባህሪያት ጋር እንዴት እንደሚሰሩ አስቀድመው ተምረዋል እና አሁን ሁሉም ነገር በጣም ቀላል እንዳልሆነ ለእርስዎ የሚነግርዎት ጊዜ ነው - ከባህሪያት ጋር ሲሰራ ልዩ ነገር አለ - ይህ የክፍል ባህሪ ነው።

ይህ ቃል በጃቫ ስክሪፕት ልዩ ነው ስለዚህም ዝም ብለን መፃፍ አንችልም። elem.ክፍልየክፍሉን ባህሪ ዋጋ ለማንበብ. በምትኩ መጻፍ አለብህ elem.class ስም.

የሚከተለው ምሳሌ የክፍሉን ባህሪ ዋጋ ያሳያል፡-

ተግባር func () (var elem = document.getElementById("ሙከራ")፤ ማንቂያ(elem.className);)

በነገራችን ላይ ከንብረቶች በተለየ የሚጠሩ ሌሎች ባህሪያት አሉ.

አሁን አሁን ያለውን ንጥረ ነገር (ክስተቱ የተከሰተበትን ንጥረ ነገር) የሚያመለክተው ከዚህ ልዩ ነገር ጋር እንሰራለን.

ከዚህም በላይ ይህ ንጥረ ነገር አስቀድሞ በgetElementById ዘዴ የተገኘ ይመስላል።

ከዚህ ጋር እንዴት እንደሚሠራ እና የዚህ አሰራር ምቾት ምን እንደሆነ እንይ.

የእሴቱን ይዘት ለማሳየት ግቤት ላይ ጠቅ የማድረግ ተግባር ይኑረን።

ለአሁን ይህንን ውሳኔ ብቻ ነው ማድረግ የሚችሉት፡-

ተግባር func () (var elem = document.getElementById("ሙከራ")፤ ማንቂያ(elem.value);)

በመርህ ደረጃ, ይህ መፍትሄ ጥሩ ነው, አሁን ግን ብዙ ግብዓቶች እንዳሉን እና እያንዳንዱን ጠቅ ስናደርግ, ዋጋውን ማሳየት አለብን.

በዚህ ጉዳይ ላይ እንደዚህ ያለ ነገር እንጨርሳለን-

ተግባር func1 () ( var elem = document.getElementById ("test1"); ማንቂያ (elem.value); ተግባር func2 () ( var elem = document.getElementById ("test2"); ማንቂያ (elem.value);) ተግባር func3() (var elem = document.getElementById("test3")፤ ማንቂያ(elem.value);)

አሁን የአቀራረባችን ጉድለት በግልፅ ይታያል - ለእያንዳንዱ ግቤት የራሳችንን ጠቅ ማድረጊያ ተግባር መፍጠር አለብን ፣ እና እነዚህ ተግባራት ተመሳሳይ ነገር ያደርጋሉ።

10 ግብዓቶች ካሉን, 10 ተግባራትን መስራት አለብን, ይህም ምቹ አይደለም.

ተግባራችንን ቀላል እናድርግ፡ የአሁኑን ኤለመንት መታወቂያ ወደ ተግባር እንደ መለኪያ እናስተላልፋለን።

እና ከብዙ ተግባራት ይልቅ ሁሉም ነገር ወደ አንድ ተግባር ይቀንሳል።

ተግባር func(መታወቂያ) (var elem = document.getElementById(መታወቂያ)፤ ማንቂያ(elem.value);)

ነገር ግን፣ ይህ መፍትሔ አሁንም ችግር አለው - እያንዳንዱ አካል የተለየ መታወቂያ ማስገባት ይኖርበታል፣ ይህም ደግሞ በመጠኑም ቢሆን የማይመች ነው።

እንግዲያው በመጨረሻ ይህንን በመጠቀም ችግሩን የመፍታት አማራጭን እንመልከት ። እያንዳንዱ ግቤት ሲጫኑ ይዘቱን እንዲያሳይ እናድርገው።ይህንን ለማድረግ, ይህንን ነገር እንደ ተግባሩ እንደ መለኪያ እናስተላልፋለን, እንደዚህ አይነት func (ይህ) .

የእኛ ይህ እንደ የተግባር መለኪያ ተላልፏል እና በኤሌም ተለዋዋጭ ውስጥ ያበቃል.

ይህ ንጥረ ነገር በዚህ መንገድ የተገኘ ይመስላል፡-

, ግን በዚህ መንገድ መቀበል አያስፈልግዎትም, ሁሉም ነገር ቀድሞውኑ ዝግጁ ነው እና ሊጠቀሙበት ይችላሉ. ለምሳሌ, elem.value የኛን ግቤት ዋጋ እና የመሳሰሉትን ይጠቁማል.ስለዚህ ለችግሮቻችን ቀላሉ መፍትሄ ይህ ነው።

ተግባር func () (var elem = document.getElementById ("ሙከራ"); elem.style.color = "ቀይ";)

እንዲሁም የኤሌም ተለዋዋጭውን ማስገባት አይችሉም ነገር ግን ይገንቡ በጣም ረጅም ሰንሰለት.

ርዕሱ በእውነት ውስብስብ ነው። ነገር ግን እነሱ እንደሚሉት, ዲያቢሎስ እንደተቀባው አስፈሪ አይደለም. በጣም ከባድ የሆነውን ለውዝ የማገኘው ይህ ነው፡ “ይህንን የመቀባት” እጅግ በጣም ጥሩ ተግባር በተቻለ መጠን በቀላሉ ሊዋሃድ ይችላል፣ ግን ሙሉ በሙሉ ጥንታዊ አይደለም። እስካሁን፣ ያነበብኳቸው ቁሳቁሶች በሙሉ ወይ abstruse ወይም primitive ናቸው።

DOM ምህጻረ ቃል ይቆማል የሰነድ ነገር ሞዴል(የሰነድ ነገር ሞዴል).

DOM የኤችቲኤምኤልን፣ የ XHTML እና የኤክስኤምኤል ሰነዶችን ይዘቶችን ለማግኘት የፕሮግራም አወጣጥ በይነገጽ ነው፣ ማለትም HTML፣ XHTML እና XML መለያዎችን እና ባህሪያትን እንዲሁም የሲኤስኤስ ቅጦችን እንደ የፕሮግራም አወጣጥ ነገሮች። ሁለቱም ጃቫ ስክሪፕት እና ሌሎች የድር ፕሮግራሚንግ ቋንቋዎች ከዚህ ሞዴል ጋር ይሰራሉ።

ትንሽ ታሪክ

4 DOM ደረጃዎች (0፣ 1፣ 2 እና 3) አሉ።

ደረጃ 0 (1996) ከደረጃ 1 በፊት የነበሩትን የ DOM ሞዴሎችን አካትቷል ። እነዚህ በዋናነት ስብስቦች ናቸው: ሰነዶች. ምስሎች ፣ ሰነዶች. ቅጾች ፣ ሰነዶች. ንብርብሮች እና ሰነዶች. ሁሉም። እነዚህ ሞዴሎች በW3C የታተሙ የDOM ዝርዝሮች አይደሉም። ይልቁንም፣ ደረጃውን የጠበቀ ሂደት ከመጀመሩ በፊት ስለነበሩ ነገሮች መረጃን ይወክላሉ።

ደረጃ 1 (1997) የኤክስኤምኤል ሰነዶችን ለማስኬድ መሰረታዊ ተግባራትን ያካትታል፡ ከግል ኖዶች ጋር ለመስራት ብዙ መንገዶች፣ ከኤክስኤምኤል ማቀናበሪያ መመሪያዎች፣ ወዘተ.

በተጨማሪም፣ DOM ደረጃ 1 ነጠላ የኤችቲኤምኤል አባሎችን ማስተናገድ የሚችሉ በርካታ ልዩ መገናኛዎችን ይዟል። ለምሳሌ፣ ከኤችቲኤምኤል ሠንጠረዦች፣ ቅጾች፣ የምርጫ ዝርዝሮች፣ ወዘተ ጋር መሥራት ይችላሉ።

DOM ደረጃ 2 (2002) በርካታ አዳዲስ ባህሪያትን አክሏል።

የDOM ደረጃ 1 ለስም ቦታዎች ድጋፍ ባይኖረውም፣ የDOM ደረጃ 2 በይነገጾች የኤክስኤምኤል ሰነዶችን ለማዘጋጀት እና ለመስራት ከሚያስፈልጉት መስፈርቶች ጋር የተያያዙ የስም ቦታዎችን የማስተዳደር ዘዴዎችን ይይዛሉ።

በተጨማሪም፣ DOM ደረጃ 2 ዝግጅቶችን ይደግፋል።

ደረጃ 2 አሁን ያለው የDOM ዝርዝር መግለጫ ነው፣ ነገር ግን W3C አንዳንድ የደረጃ 3 ዝርዝር ክፍሎችን ይመክራል።

DOM ደረጃ 3 የ DOM ደረጃ 2 ተግባራዊነትን የሚያራዝም የዝርዝሩ የስራ ረቂቅ ነው።

"የሶፍትዌር በይነገጽ" ማለት ምን ማለት ነው?

የእንግሊዝኛ ቃል በይነገጽ እንደ “የእውቂያ አካባቢ” ሊተረጎም ይችላል። ኮምፒዩተር፣ በግምት፣ ሁለት ነገሮችን ብቻ ይረዳል፡ ባዶ ቢት እና የተሞላ ቢት። ኮምፒዩተር "የሚናገረው" ቋንቋ ማለቂያ የሌለው የዜሮዎች እና የአንዶች ሕብረቁምፊ ተደርጎ ሊወሰድ ይችላል, ይህም ማለቂያ የሌለው የተለያዩ ጥምረት ይሰጣል.

ማንኛውም የፕሮግራም ኮድ ኮምፒዩተሩ የሚሠራባቸው የእነዚህ “ዜሮዎች እና እነዚያ” ትርጓሜ ለፕሮግራም አውጪው ነው። ስለዚህ ማንኛውም የፕሮግራም አወጣጥ ቋንቋ የሰው-ማሽን በይነገጽ ነው።

አሳሾች ልክ እንደሌሎች የኮምፒውተር መተግበሪያዎች ይሰራሉ። ኤችቲኤምኤል፣ ኤክስኤምኤል፣ ሲኤስኤስ ኮዶች፣ ጃቫስክሪፕት፣ ፒኤችፒ፣ ፐርል፣ ወዘተ ወደ “ዜሮ እና አንድ” ይተረጉማሉ። ይህንን የብዙ ቋንቋ ተናጋሪነት ለመቋቋም የጋራ መድረክ ያስፈልጋል። ይህ መድረክ DOM ነው - በተወሰነ የፕሮግራም አወጣጥ ቋንቋ ወይም ምልክት ላይ ያልተመሠረተ መግለጫ። ድረ-ገጾችን ከመፍጠር እና የ DOM ነገሮችን መረዳት እና መተርጎም የሚችል በብዙ ታዋቂ የፕሮግራም ቋንቋዎች ውስጥ ጥቅም ላይ ሊውል የሚችል በይነገጽ ነው።

DOM እና አሳሾች

DOM እና JavaScript

በጃቫ ስክሪፕት የ DOM ነገሮች ተዋረዳዊ መሰላል አናት፣ የዚህ በይነገጽ አይነት “አስተዳዳሪ” አይነት የሰነድ ዕቃ ነው፣ እና የ DOM ነገሮች ንብረቶቹ፣ የንብረቶቹ ባህሪያት፣ ወዘተ ይሆናሉ። በተጨማሪም DOM ኖዶች ተብለው ይጠራሉ.

በDOM ደረጃ 2 12 አይነት አንጓዎች አሉ። እያንዳንዱ የDOM መስቀለኛ መንገድ ልዩ ስም ያለው ቋሚ ተመድቧል። አብዛኛዎቹ አንጓዎች ከኤክስኤምኤል ጋር ለመስራት የተነደፉ ናቸው። እኛ እያደረግን ባለው የኤችቲኤምኤል - ጃቫ ስክሪፕት ስብሰባ ውስጥ 5 ዓይነቶችን ብቻ መጠቀም ይቻላል ። ነገር ግን ይህ "የበረዶ ጫፍ" እንኳን በአንድ ወይም በሁለት ትምህርቶች ሊሸፈን የማይችል በጣም "የተስፋፋ ዛፍ" ነው.

በW3C DOM ዝርዝር ውስጥ የተገለጹት ሙሉ የመስቀለኛ ክፍል ቋሚዎች ስብስብ (ለኤችቲኤምኤል የሚገኙ አንጓዎች - ጃቫ ስክሪፕት በሰማያዊ ተደምቀዋል)

* ማስታወሻዎች ያልተከፋፈሉ ክፍሎችን ቅርፀት፣ የንዑስ ክፍሎች ቅርፅ ወይም መመሪያው የተገለጸበትን የመተግበሪያ ፕሮግራም የሚለዩ ስሞች ናቸው።

(ግልጽ አይደለም? እስካሁንም እርግጠኛ አይደለሁም።)

በ DOM ውስጥ የሰነድ መዋቅር

DOM ራስጌ

የአንቀጽ ጽሑፍ

የ DOM ዛፉ ሥዕላዊ መግለጫ ይህ ነው፡-

እያንዳንዱ መስቀለኛ መንገድ የሕፃን ኖዶች ሊኖረው ይችላል (ቀስቶች በሥዕላዊ መግለጫው ውስጥ ወደ እነሱ ይመራሉ)። የሰነዱ ነገር - የሰነዱ ዛፍ መሠረት - እንዲሁም መስቀለኛ መንገድ ነው, ነገር ግን የወላጅ መስቀለኛ መንገድ የለውም እና ሌሎች አንጓዎች የሌላቸው በርካታ ባህሪያት እና ዘዴዎች አሉት. አንድ የህጻን ኖድ አለው፡ አባል።

አንድ አካል ሁለት የሕፃን ኖዶች አሉት፡ እና ለዚህም ሁሉም ንጥረ ነገሮች በውስጣቸው የተካተቱት ልጆች ይሆናሉ።

ትኩረት!

DOM ራስጌ

"ኤለመንት" እና "መለያ" ተመሳሳይ አይደሉም። መለያ ምልክት ማርክ ነው፡ - እነዚህ ሁለት የተለያዩ መለያዎች ናቸው። እና አንድ አካል በእነዚህ መለያዎች ምልክት የተደረገበት ነገር ነው፡-

ንጥረ ነገሮች እና

በውስጡ ጽሑፍ ይዟል። እነዚህ የልጃቸው የጽሑፍ ኖዶች ናቸው። ኤለመንት እንዲሁ ባህሪ አለው፡ align="center" . የባህሪ ኖዶች የያዛቸው ንጥረ ነገሮች የልጅ ኖዶች ናቸው።

አንዳንድ የአንጓዎች ባህሪያት

ትንሽ መግቢያ

አንድ ጊዜ እደግመዋለሁ፡ የገጽ ክፍሎችን በስክሪፕቶች ውስጥ ስንደርስ ከጃቫስክሪፕት ቋንቋ ጋር ብቻ ሳይሆን በውስጡም ከ DOM በይነገጽ ጋር እየተገናኘን ነው። አንዳንድ ጊዜ ይህንን ማወቅ አለቦት፣ አንዳንድ ጊዜ “በስድ ንባብ እየተነጋገርን መሆናችንን” መርሳት ይችላሉ።

አንዳንድ ንብረቶችን እና ዘዴዎችን ከ DOM ነገር ሞዴል በዚህ መንገድ ተጠቀምን። ስለዚህ, ከጊዜ ወደ ጊዜ ወደ ቀደሙት ትምህርቶች አገናኞችን እሰጣለሁ.

በዚህ ትምህርት ውስጥ በሁሉም አሳሾች ውስጥ ያሉትን ሁሉንም የአንጓዎች ባህሪያት ግምት ውስጥ በማስገባት ወደ "አካዳሚክ" መንገድ አንሄድም. በመጀመሪያ፣ ከነሱ በጣም ተግባራዊ እና “ከግጭት-ነጻ” ጋር እንተዋወቅ።

ለዛም ነው እንደተለመደው በ"ዋና ንብረቶች"፡ nodeName እና nodeValue አንጀምርም።

መለያ ስም

የኤለመንት መለያ ስም የያዘ ሕብረቁምፊ ያወጣል። ሁሉም የመለያ ስም ዋጋዎች አቢይ ሆሄያትን ብቻ ይይዛሉ።

.የመለያ ስም

ለምሳሌ

የመለያ ስም ንብረቱን በመሞከር ላይ document.write (document.getElementById("የሙከራ መለያ ስም"

).መለያ ስም)

ውጤት

የመለያ ስም ንብረቱን በመሞከር ላይ

ውስጣዊ HTML

ወደ ኤለመንት ይዘቶች መዳረሻ ይሰጣል። የጽሑፍ ይዘቱን ብቻ ሳይሆን በኤለመንት ውስጥ የሚገኙትን ሁሉንም የኤችቲኤምኤል መለያዎችም ይገልጻል።

ይህ ንብረት ለማንበብ ብቻ ሳይሆን ይዘቱን ለመለወጥም ጭምር ነው.

ማስታወሻ

በ IE ውስጥ፣ innerHTML ተነባቢ-ብቻ ለተወሰኑ አካላት ነው፡ እነዚህ ከሚከተሉት በስተቀር ሁሉም የሰንጠረዥ አባሎች ናቸው። እና, እንዲሁም እና.

ለምሳሌ, ያለ ኤለመንት ባዶ ጠረጴዛ ፈጠርን እና በፕሮግራም ማስገባት እንፈልጋለን በውስጥ HTML በኩል:

IE "ያልታወቀ የሩጫ ጊዜ ስህተት" ይጥላል እና ሌሎች አሳሾች መለጠፍ ያደርጉታል።

በተመሳሳይ ጊዜ የአንድን ንጥረ ነገር ይዘት ከጠየቅን ለምሳሌ በማስጠንቀቂያ(document.getElementById("id").innerHTML)፣ይህ በ IE ውስጥ ይሰራል።

የኤለመንት መለያ ስም የያዘ ሕብረቁምፊ ያወጣል። ሁሉም የመለያ ስም ዋጋዎች አቢይ ሆሄያትን ብቻ ይይዛሉ።

.የመለያ ስም

የውስጣዊ HTML ንብረትን በመሞከር ላይ

ለማስገባት አንቀፅ

በገጹ ላይ ለመስራት እና ተለዋዋጭ ለውጦች ዋናው መሣሪያ DOM (የሰነድ ዕቃ ሞዴል) - ለኤክስኤምኤል / ኤችቲኤምኤል ሰነዶች የሚያገለግል የነገር ሞዴል ነው።

በ DOM ሞዴል መሰረት, ሰነድ ተዋረድ ነው.
እያንዳንዱ የኤችቲኤምኤል መለያ የተለየ መስቀለኛ መንገድ ይመሰርታል፣ እያንዳንዱ የጽሑፍ ክፍል የጽሑፍ አካል ይመሰርታል፣ ወዘተ።

በቀላል አነጋገር፣ DOM የሰነድ ውክልና እንደ የመለያ ዛፍ ነው። ይህ ዛፍ የተገነባው በገጹ ላይ በተሰየመ መለያዎች እና የጽሑፍ ቁርጥራጮች ነው ፣ እያንዳንዱም የተለየ መስቀለኛ መንገድ።

በመጀመሪያ ለቀጣዩ ሰነድ የ DOM ዛፍ እንገንባ።

ርዕስ፡ በጣም ጥሩ ሰነድ

በጣም ውጫዊ መለያ ነው, ስለዚህ ዛፉ ከዚያ ማደግ ይጀምራል.

በውስጡ ሁለት አንጓዎች አሉ: እና - የልጆች ኖዶች ይሆናሉ.

የመለያዎች ቅፅ ኤለመንት አንጓዎች(ንጥረ ነገር መስቀለኛ መንገድ). ጽሑፍ ቀርቧል የጽሑፍ አንጓዎች(የጽሑፍ መስቀለኛ መንገድ)። ሁለቱም በ DOM ዛፍ ውስጥ እኩል አንጓዎች ናቸው።

አሁን የበለጠ ጠቃሚ ገጽን እንመልከት፡-

ስለ ሙዝ እውነት ስለ ሙሴ።

የሥርዓተ ተዋረድ ዋና አካል html ነው። ሁለት ዘሮች አሉት። የመጀመሪያው ራስ ነው, ሁለተኛው አካል ነው. እና ሌሎችም፣ እያንዳንዱ የተከተተ መለያ ከላይ የመለያው ልጅ ነው።

በዚህ ስእል, ሰማያዊ የመስቀለኛ ክፍሎችን, ጥቁር የጽሑፍ ክፍሎችን ያመለክታል.

ዛፉ የተፈጠረው በሰማያዊ መስቀለኛ መንገድ - HTML መለያዎች።

እና አንድ ዛፍ በቀጥታ በኤችቲኤምኤል ገጽ ላይ ከገለጹት ይህ ይመስላል።

በነገራችን ላይ, በዚህ ምስል ውስጥ ያለው ዛፍ የነጭ ቦታ ቁምፊዎችን ብቻ የያዘውን ጽሑፍ ግምት ውስጥ አያስገባም. ለምሳሌ, እንዲህ ዓይነቱ የጽሑፍ መስቀለኛ መንገድ ወዲያውኑ መምጣት አለበት. እንደዚህ ያሉ "ባዶ" አንጓዎችን ያልያዘ DOM ይባላል "መደበኛ".

ትንሽ ውስብስብ የሆነ ሰነድ እንይ።

የሰነድ ውሂብ

• በጥንቃቄ
• መረጃ

የላይኛው መለያ ኤችቲኤምኤል ነው, የልጆች ጭንቅላት እና አካል አለው, ወዘተ. ይህ የመለያ ዛፍን ያስከትላል:

ባህሪያት

በዚህ ምሳሌ, አንጓዎቹ የሚከተሉት ባህሪያት አሏቸው: ቅጥ , ክፍል , መታወቂያ . ባጠቃላይ አነጋገር፣ ባህሪያት በDOM ውስጥ እንደ አንጓዎች ተደርገው ወላጆቻቸው የተገለጹበት የDOM አካል ነው።

ነገር ግን፣ በድር ፕሮግራሚንግ ውስጥ አብዛኛውን ጊዜ ወደዚህ ጫካ ውስጥ ዘልቀው አይገቡም፣ እና ባህሪያትን የ DOM node ባህሪያት እንደሆኑ አድርገው ይቆጥሩታል፣ ይህም በኋላ እንደምንመለከተው በፕሮግራም አውጪው ጥያቄ ሊዋቀር እና ሊለወጥ ይችላል።

በእውነቱ ይህ ምስጢር ነው ፣ ግን DOCTYPE እንዲሁ የ DOM መስቀለኛ መንገድ ነው ፣ እና ከኤችቲኤምኤል በስተግራ ባለው የ DOM ዛፍ ውስጥ ይገኛል (ይህ እውነታ በምስሉ ውስጥ ተደብቋል)።

ፒ.ኤስ. ስለ ምስጢሩ በእርግጥ ቀልድ ነው, ነገር ግን ሁሉም ሰው በትክክል የሚያውቀው አይደለም. እንደዚህ አይነት እውቀት የት እንደሚጠቅም ማሰብ ከባድ ነው...

HTML ሲተነተን ኢንተርኔት ኤክስፕሎረር ወዲያውኑ ይፈጥራል መደበኛ DOM በውስጡ አንጓዎች ከባዶ ጽሑፍ ያልተፈጠሩ።

ፋየርፎክስ የተለየ አስተያየት አለው፣ ከእያንዳንዱ የጽሑፍ ቁራጭ የ DOM አባል ይፈጥራል።
ስለዚህ በፋየርፎክስ ውስጥ የዚህ ሰነድ ዛፍ ይህን ይመስላል:

በሥዕሉ ላይ፣ ለአጭር ጊዜ፣ የጽሑፍ አንጓዎች በቀላሉ በሃሽ ይጠቁማሉ። ሰውነት ከ 3 ይልቅ 7 ልጆች አሉት ።

ኦፔራም የሚኮራበት ነገር አለው። እሷ "ከራሷ ብቻ" ተጨማሪ ባዶ አካል ማከል ትችላለች.

ይህንን ለማየት ሰነዱን ይክፈቱ። የሰነድ ልጅ ኖዶች ቁጥር ይመልሳል አካል , የጽሑፍ ኖዶችን ጨምሮ.

ለ IE 3፣ 7 ለፋየርፎክስ እና 8 (!?) ለኦፔራ አገኛለሁ።

በተግባር, ይህ አለመጣጣም ትልቅ ችግር አይፈጥርም, ነገር ግን እሱን ማወቅ አለብዎት. ለምሳሌ, ልዩነቱ እራሱን የዛፍ ኖዶችን በመቁጠር ላይ ሊገለጽ ይችላል.

ለምንድነው፣ ከሚያምሩ ሥዕሎች በተጨማሪ፣ ተዋረዳዊ DOM ያስፈልገናል?

በጣም ቀላል:

እያንዳንዱ የDOM አካል ነገር ነው እና ይዘቱን ለመቆጣጠር፣ ወላጆችን እና ልጆችን ለማግኘት ንብረቶችን ይሰጣል።

የሰነዱ ነገር ለDOM ማጭበርበር ጥቅም ላይ ይውላል።
ሰነድ በመጠቀም የተፈለገውን የዛፍ አካል ማግኘት እና ይዘቱን መቀየር ይችላሉ.

ለምሳሌ፣ ይህ ኮድ የመጀመሪያውን ኤለመንት በኦል ታግ ይወስዳል፣ ሁለት የዝርዝር ክፍሎችን በቅደም ተከተል ያስወግዳል እና ከዚያ በተቃራኒው ቅደም ተከተል ያክላቸዋል።

Var ol = document.getElementsByTagName("ol") var hiter = ol.removeChild(ol.firstChild) var kovaren = ol.removeChild(ol.firstChild) ol.appendChild(kovaren) ol.appendChild(hiter)

እንደዚህ ያለ ስክሪፕት እንዴት እንደሚሰራ ምሳሌ ለማግኘት በሙስ ገጽ ላይ ያለውን ጽሑፍ ጠቅ ያድርጉ

በድሮ መማሪያዎች እና ስክሪፕቶች ውስጥ የገጽ HTML ኮድን በቀጥታ ሰነድ በመደወል ማየት ይችላሉ።write .

በዘመናዊ ስክሪፕቶች ውስጥ ይህ ዘዴ በጭራሽ ጥቅም ላይ አይውልም ፣ ትክክለኛው አጠቃቀም ጉዳዮች በአንድ በኩል ሊቆጠሩ ይችላሉ።

document.writeን ያስወግዱ.. እርስዎ የሚሰሩትን በትክክል ካወቁ በስተቀር (ለምን መማሪያን ታነባለህ - ቀድሞውንም ጉሩ ነህ)

የDOM አባሎችን የመዳረሻ ዘዴዎችን እና ባህሪያትን ጠለቅ ብለን እንመርምር።

ሁሉም የDOM መዳረሻዎች እና ማሻሻያዎች የሚመነጩት ከሰነዱ ነገር ነው።

በዛፉ ጫፍ ላይ እንጀምር.

የላይኛው መለያ። በትክክለኛው የኤችቲኤምኤል ገጽ ሁኔታ ይህ ይሆናል።

መለያ, በሰነዱ ውስጥ ካለ (መሆን አለበት).

የሚከተለው ምሳሌ፣ አንድ አዝራር ሲጫን የሰነዱን ሰነድ.የሰነድ ኢሌመንት እና የሰነድ.የሰውነት ዕቃዎችን የጽሑፍ ውክልና ያወጣል። ገመዱ እራሱ በአሳሹ ላይ የተመሰረተ ነው, ምንም እንኳን እቃዎቹ በሁሉም ቦታ ተመሳሳይ ናቸው.

ተግባር go() (ማስጠንቀቂያ(document.documentElement) alert(document.body))

በDOM ውስጥ ያለው እያንዳንዱ አካል አይነት አለው። ቁጥሩ በelem.nodeType ባህሪ ውስጥ ተከማችቷል።

በአጠቃላይ በ DOM ውስጥ 12 አይነት ንጥረ ነገሮች አሉ።

ብዙውን ጊዜ አንድ ብቻ ነው ጥቅም ላይ የሚውለው፡ Node.ELEMENT_NODE፣ ቁጥሩ 1 ነው። የዚህ አይነት አካላት ከኤችቲኤምኤል መለያዎች ጋር ይዛመዳሉ።

አንዳንድ ጊዜ የመስቀለኛ መንገድ.TEXT_NODE አይነትም ጠቃሚ ነው ይህም ከ 3 ጋር እኩል ነው. እነዚህ የጽሁፍ ክፍሎች ናቸው.

ሌሎች ዓይነቶች በጃቫስክሪፕት ፕሮግራም ውስጥ ጥቅም ላይ አይውሉም.

የሚከተለው ምሳሌ በአንድ አዝራር ላይ ሲጫኑ የሰነድ.documentElement አይነቶችን እና ከዚያም የሰነዱን የመጨረሻ ልጅ አይነት ያትማል.body node. ይህ የጽሑፍ መስቀለኛ መንገድ ነው።

ተግባር go () (ማንቂያ (document.documentElement.nodeType) ማንቂያ (document.body.lastChild.nodeType)) ጽሑፍ

ለምሳሌ፣ እያንዳንዱ የሚታየው ኤለመንት በላይኛው ቀኝ ጥግ ላይ ያለ መስቀለኛ ቁጥር ባለው ፍሬም የተከበበ ከሆነ ከላይ ያለው ምሳሌ ሰነዱ በአሳሽ ውስጥ ይህን ይመስላል።

...መረጃ

• በጥንቃቄ
• መረጃ

በገጹ ላይ የሚታየው እነሱ ብቻ ስለሆኑ በሰውነት ውስጥ ያሉት ንጥረ ነገሮች ብቻ እዚህ ይታያሉ። ለ 1 ዓይነት አካላት (መለያዎች) ፣ ተዛማጅ መለያው በቅንፍ ውስጥ ይገለጻል ፣ ለጽሑፍ አካላት (አይነት 3) ፣ በቀላሉ ቁጥር አለ።