この記事では、DOM を使用して JS で HTML 要素を制御するための関連情報を主に紹介します。必要な友人は参照してください。
1.getElementsByName(): 名前を取得します。
~~~~~~~~~ ~~ ~~~~~~~~~~~~~~~~~~~~~~`
例:
<p name="pn">hello</p> <p name="pn">hello</p> <p name="pn">hello</p> <script> function getName(){ var count=document.getElementsByName("pn"); alert(count.length); var p=count[2]; p.innerHTML="world"; } </script>
結果: インターフェイスは、プロンプト ボックスとともに 3 つの hello を出力します。 3" で [OK] をクリックすると、インターフェイスに表示される内容が hello hello world に変わります
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~ ~~~~~~~~~~~~~~~~~~・
2.getElementsByTagName(): 要素を取得します。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
例
<p>hello</p> <p>hello</p> <p>hello</p> <script> function getName(){ var count=document.getElementsByTagName("p"); alert(count.length); var p=count[2]; p.innerHTML="world"; } </script>
結果: インターフェイスは 3 つの hello を出力します。プロンプト ボックス「3」が表示され、[OK] をクリックすると、インターフェイスに表示される内容が hello hello world
~~~~~~~~~~~~~~~~~~~~ に変わります。 ~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~
3.getAttribute(): 要素の属性を取得します。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
例
<a id="aid" title="得到a的标签属性"></a> <script> function getAttr1(){ var anode=document.getElementById("aid"); var attr=anode.getAttribute("id"); alert("a的ID是:"+attr); } function getAttr2(){ var anode=document.getElementById("aid"); var attr=anode.getAttribute("title"); alert("a的title内容是:"+attr); } getAttr1(); getAttr2(); </script>
結果: ポップアッププロンプト「a の ID は次のとおりです。」ボックス 「OK」をクリックすると、「a のタイトル内容は次のとおりです。a のラベル属性を取得します。」というプロンプトが表示されます。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
4.setAttribute() 要素の属性を設定します。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
例
<a id="aid2">aid2</a> <script> function setAttr(){ var anode=document.getElementById("aid2"); anode.setAttribute("title","动态设置a的title属性"); var attr=anode.getAttribute("title"); alert("动态设置的title值为:"+attr); } setAttr(); </script>
結果: A 「動的に設定されるタイトル値は次のとおりです: a のタイトル属性を動的に設定します」というプロンプト ボックスが表示されます。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
5.childNodes(): 子ノードにアクセスします。
~~~~~~~~~~~~~~~~~~~~~~~~~~...
Example
<ul><li>1</li><li>2</li><li>3</li></ul> <script> function getChildNode(){ var childnode=document.getElementsByTagName("ul")[0].childNodes; alert(childnode.length); alert(childnode[0].nodeType); } getChildNode(); </script>
結果: インターフェイスが出力されます。1 .2 3ダイアログボックス「3」が表示され、「OK」をクリックすると「1」が表示されます。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
6.parentNode():親ノードにアクセスします。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~・
例
<p> <p id="pid"></p> </p> <script> function getParentNode(){ var p=document.getElementById("pid"); alert(p.parentNode.nodeName); } getParentNode(); </script>
結果: ポップアッププロンプトボックス:p.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
7.createElement(): 要素の作成ノード。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
例:
<script> function createNode(){ var body=document.body; var input=document.createElement("input"); input.type="button"; input.value="按钮"; body.appendChild(input);//插入节点 } createNode(); </script>
結果: ボタンが表示されます。
~~~~~~~~~~~~~~~~~~~~~~~~~~~
8.createTextNode(): テキストノードを作成します。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
例:
<script> function createNode(){ var element = document.createElement("p"); element.className = "message"; var textNode = document.createTextNode("Hello world!"); element.appendChild(textNode); document.body.appendChild(element); } createNode(); </script>
コード分析: この例は作成されました新しい
要素には、値「message」を持つクラス属性が割り当てられます。次に、別のテキスト ノードが作成され、以前に作成された要素に追加されます。最後のステップでは、この要素をドキュメント内の
要素に追加して、新しく作成された要素とテキスト ノードがブラウザに表示されるようにします。結果: ページに hello world が表示されます。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
9.insertBefore( ): ノードを挿入します。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
例
<p id="p"> <p id="pid">p元素</p> </p> <script> function addNode(){ var p=document.getElementById("p"); var node=document.getElementById("pid"); var newnode=document.createElement("p"); newnode.innerHTML="动态插入一个p元素"; p.insertBefore(newnode,node); } addNode(); </script>
結果: インターフェイスは次のように出力します。 p 要素を動的に挿入します
10.removeChild(): ノードを削除します。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~・
例
<p id="p"> <p id="pid">p元素</p> </p> <script> function removeNode(){ var p=document.getElementById("p"); var p=p.removeChild(p.childNodes[1]); } removeNode(); </script>
結果: インターフェイスには何も表示されません。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
11.offsetHeight: Web ページのサイズ
12.scrollHeight :ウェブページサイズ
~~~~~~~~~~~~~~~~~~~~~~~~~~・
例:
<script> function getSize(){ var width=document.documentElement.offsetWidth||document.body.offsetWidth;//解决兼容问题 var height=document.documentElement.offsetHeight||document.body.offsetHeight; alert(width+","+height); } getSize(); </script>
表示結果:
上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。
関連する推奨事項:
JSON データを HTML で表示する方法以上がJS で DOM を使用して HTML 要素を制御する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

本篇文章带大家了解一下HTML(超文本标记语言),介绍一下HTML的本质,HTML文档的结构、HTML文档的基本标签和图像标签、列表、表格标签、媒体元素、表单,希望对大家有所帮助!

不算。html是一种用来告知浏览器如何组织页面的标记语言,而CSS是一种用来表现HTML或XML等文件样式的样式设计语言;html和css不具备很强的逻辑性和流程控制功能,缺乏灵活性,且html和css不能按照人类的设计对一件工作进行重复的循环,直至得到让人类满意的答案。

总结了一些web前端面试(笔试)题分享给大家,本篇文章就先给大家分享HTML部分的笔试题(附答案),大家可以自己做做,看看能答对几个!

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制,它只是一个矩形的图形容器,绘制图形必须通过脚本(通常是JavaScript)来完成;开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

html5废弃了dir列表标签。dir标签被用来定义目录列表,一般和li标签配合使用,在dir标签对中通过li标签来设置列表项,语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir,可使用ul标签取代。

在html中,document是文档对象的意思,代表浏览器窗口的文档;document对象是window对象的子对象,所以可通过“window.document”属性对其进行访问,每个载入浏览器的HTML文档都会成为Document对象。

html5支持boolean值属性;boolean值属性指是属性值为true或者false的属性,如input元素中的disabled属性,不使用该属性表示值为flase,不禁用元素,使用该属性可以不设置属性值表示值为true,禁用元素。


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

Dreamweaver Mac版
ビジュアル Web 開発ツール

SublimeText3 中国語版
中国語版、とても使いやすい

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

SublimeText3 英語版
推奨: Win バージョン、コードプロンプトをサポート!

DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

ホットトピック









