namedItem

С помощью метода namedItem можно получить ссылку на именованный элемент DOM

^{Ряд свойств объекта document предоставляют доступ к различным HTML-коллекциям ( HTMLCollection ):}

^{• document.forms}
^{• document.images}
^{• document.anchors}
^{• document.all}
^{• document.scripts}
^{• document.links}
^{• document.plugins}

☕ 1

<html>
  <head>
    <link name="Google" 
          id="fonts" 
          href="https://fonts.googleapis.com/css?family=Roboto|&amp;display=swap" 
          rel="stylesheet">
  </head>
  <body>
    <form name="form">
      <a name="ref">Home</a>
      <img name="picture">
    </form>
    <div id="div"></div>
    <script name="script"></script>
  </body>
</html>

Попробуем получить элемент link по значению его атрибута name:

document.all.namedItem ( "Google" )  // null

а теперь по значению атрибута id:

document.all.namedItem ( "fonts" )

Результат

<link name="Google" id="fonts" href="https://fonts.googleapis.com/css?family=Roboto|&amp;display=swap" rel="stylesheet">

Как видим, для элементов link метод namedItem возвращает элемент по его id, но не по его name

☕ 2

Посмотрим на поведение метода namedItem с другими элементами:

console.log (
    document.all.namedItem ( "div" )
    document.forms.namedItem ( "form" ),
    document.anchors.namedItem ( "ref" ),
    document.images.namedItem ( "picture" ),
    document.scripts.namedItem ( "script" ),
    document.all.namedItem ( "div" )
)

Все элементы были найдены по значению их атрибута name

☕ 3

Для получения инфо о том, как работает метод namedItem с различными элементами DOM, воспользуемся функцией:

function testNamedItem ( tagName ) {
    var elem = document.body.appendChild ( 
        document.createElement ( tagName )
    )
    elem.id = "testId"
    elem.name = "testName"
    console.log ( 'by id:   ', document.all.namedItem ( "testId" ) ? "+" : "&ndash;" )
    console.log ( 'by name: ', document.all.namedItem ( "testName" ) ? "+" : "&ndash;" )
    document.body.removeChild ( elem )
}

Эта функция получает в качестве аргумента валидное имя тега html, создает и вставляет на страницу этот элемент, устанавливает ему атрибуты name и id, а затем проверяет работу метода namedItem с этими атрибутами

С помощью этой функции легко установить, что метод namedItem работает по-разному для различных элементов:

Element	id	name
form	+	+
a	+	+
img	+	+
input	+	+
select	+	+
textarea	+	+
script	+	–
link	+	–
div	+	–
ul	+	–
li	+	–

^{Самостоятельно проверьте остальные элементы}

HTMLCollections

Если проверить работу метода на различных HTMLCollections, то можно обнаружить, что этот метод не работает с коллекцией элементов link:

Element	id	name
documenmt.forms	+	+
document.anchors	+	+
document.images	+	+
document.scripts	+	+
document.links	–	–

namedItem - garevna/js-course GitHub Wiki

namedItem

HTMLCollections

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️