DOM JavaScript の基礎学習ノート 2.4_JavaScript スキル-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

DOM JavaScript の基礎学習ノート 2.4_JavaScript スキル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:45 PM

DOM の開発は、WEB 標準化の一般的な傾向と密接に関係しています。正しいセマンティックロジックに基づいてのみ、DOM は正しく機能します。現在、正しい意味構造、プレゼンテーションとコンテンツの分離などの要件が Web デザインの基本要件となっています。したがって、Web フロントエンド開発において、DOM の存在は間違いなく、プレゼンテーション層、動作層、さらにはコンテンツレベルでの接続のための優れた API を提供し、人気のある Ajax アプリケーションには不可欠な部分となっています。

1. スムーズな分解

1.コンセプト

JavaScript が使用される前の初期の頃は、Web ページのコンテンツは通常どおり表示され、ユーザーは周辺機器 (マウスなど) を使用して関連コンテンツを参照できましたが、この閲覧エクスペリエンスはユーザーにとって理想的ではない可能性があります。。

この需要に基づいて、コンテンツプロバイダーは合理的な目標を掲げています。つまり、JavaScript を使用して、コンテンツの表示に影響を与えることなくユーザーエクスペリエンスを向上させ、ユーザーの定着率を高めるというものです。

この見出しには、コンテンツの通常の表示に影響を与えないという非常に明白な条件があります。つまり、ユーザーのブラウザが JavaScript をサポートしていない場合でも、ユーザーは通常どおり閲覧できます。

2.方法

①JavaScriptとHTMLを分離する

これが最初に考えるべきことですが、この 2 つを分離すると、HTML は JavaScript が使用される前の初期の状態に戻ったようになり、これまでと同様にスムーズになります。

たとえば、element.onClick などのイベント処理関数を JavaScript に記述し、特定の関数にバインドします。

②JavaScriptのメソッドを検出する

getElementById など、前述のメソッドの一部は、そのメソッドがサポートされているかどうかを確認する必要があります。

<script>
if(! document.getElementById) return false;
</script>

メソッドがサポートされているかどうかを検出するには、if ステートメントを使用します。サポートされている場合は続行できます。サポートされていない場合は、直接 false を返します。この方法では、時間を無駄にする必要がなく、また、パフォーマンスの最適化における役割。

2. バインディング onload イベント

1. バインドの理由

一部の関数は、ページを効果的に実行する前に完全にロードする必要があります。その関数を window.onload イベントにバインドする必要があります。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>筱雨生 - 博客园</title>
<script>
function tagAttribute(){
var ali = document.getElementsByTagName('li'); 
for(var i = 0; i < ali.length; i++){
  if(ali[i].firstChild.nodeType == 3){
    alert(ali[i].childNodes[0].nodeValue);
  }
}
}
window.onload = tagAttribute;
</script>
</head>
<body>
<h1 id="筱雨生">筱雨生</h1>
<p>時光飛逝，莫讓網絡蹉跎了歲月</p>
<div id="myBlog">
<ul>
<li title="JavaScript">JavaScript</li>
<li title="HTML">HTML</li>
<li title="CSS">CSS</li>
<li title="我的随笔">我的随笔</li>
<li></li>
</ul>
</div>
</body>
</html>

上記の例で、window.onload がバインドされていない場合、関数 tagAttribute を実行しても意味がありません。

もう 1 つ注意すべき点は、関数の値ではなく関数がバインドされているため、関数の後に括弧が存在しないことです。

2. バインド方法

関数をバインドするだけであれば、上記の方法で簡単に目的を達成できます。

window.onload = myFunction;

複数の関数がある場合、それらを 1 つずつバインドすることもできますが、この結果は最後の関数のみが効果的に実行されます。これは実際には非常に簡単です。

私たちの目標は、ページのロード時に実行される関数の数に関係なく、これらの関数を効果的に実行できること、つまり、これらの関数が window.onload イベントに正常にバインドされることです。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>筱雨生 - 博客园</title>
<script>
function addOnLoadEvent(func){
  var oldonload = window.onload; // 把现有的window.onload事件处理函数的值存储到变量oldonload
  if(typeof window.onload != 'function'){ // 如果这个处理函数上还没有绑定任何函数
    window.onload = func; // 将这个函数绑定到window.onload事件
  }else{
    window.onload = function(){ // 如果这个处理函数已经绑定了函数，就把这个函数追加到指令的末尾
      oldonload();
      func();
    }
}
}
//自定义函数 tagAttribute 
//功能：获取li标签中的title值
function tagAttribute(){
var ali = document.getElementsByTagName('li'); 
for(var i = 0; i < ali.length; i++){
  if(ali[i].childNodes[0].nodeType == 3){
    alert(ali[i].childNodes[0].nodeValue);
  }
}
}
addOnLoadEvent(tagAttribute); // 为tagAttribute函数绑定到window.onload事件
</script>
</head>
<body>
<h1 id="筱雨生">筱雨生</h1>
<p>時光飛逝，莫讓網絡蹉跎了歲月</p>
<div id="myBlog">
<ul>
<li title="JavaScript">JavaScript</li>
<li title="HTML">HTML</li>
<li title="CSS">CSS</li>
<li title="我的随笔">我的随笔</li>
<li></li>
</ul>
</div>
</body>
</html>

javascript学习笔记 Dom知识点总结

JavaScript的window对象对应着浏览器窗口本身，因此这个对象的属性和方法统称为BOM（浏览器对象模型），如window.open(),window.location等。

JavaScript的document对象是指文档对象模型，主要是处理网页内容。DOM（Document Object Model）即文档对象模型，是针对 HTML 和 XML 文档的 API 。字母D指document（文档），字母O指object（对象），字母指Model（模型）。DOM 描绘了一个层次化的节点树。节点表示一个连接点，文档是由节点构成的集合，DOM的节点主要分为三类：元素节点、文本节点（不是文本内容）、属性节点。

获取节点的名称和类型

1.nodeName属性用来获取节点的名称，文本节点返回#text,元素节点返回标签名称（此时等价于tagName）。语法：目标节点.nodeName
2.nodeType属性用来获取节点的类型，元素节点：1，属性节点：2，文本节点：3。语法：目标节点.nodeType
3.nodeValue属性用来获取和设置节点的值。元素节点返回 null 。语法：目标节点.nodeValue

获取元素节点的方式

1. document.getElementById

通过ID查找，返回唯一元素节点

2. document.getElementsByName

通过name属性查找，返回元素节点数组

3. document.getElementsByTagName

通过标签名称查找，返回元素节点数组

以下三种方法属于HTML5 DOM，并非所有浏览器支持（如某些低版本IE就不支持），属于高级方法

4. document.getElementsByClassName

通过class属性的类名查找，返回元素节点数组

5. document.querySelector

通过selector条件获取元素节点，只返回符合条件的第一个元素节点

6. document.querySelectorAll

通过selector条件获取元素节点，返回所有符合条件的元素节点数组，多条件使用逗号分隔，表示要查找的元素必须符合所有逗号分隔的条件，如果一个元素只符合逗号分隔的条件中的一个，则不会被返回

小结： getElementById和querySelector只返回一个元素节点，而getElementsByName、getElementsByTagName、getElementsByClassName、querySelectorAll返回的是元素节点数组

节点指针

1.childNodes属性用来获取元素节点的子节点，返回节点数组。语法：父节点.childNodes;

2.children属性可以用来获取忽略了空白节点的有效节点（在某些浏览器上，空白符或换行符也是一个文本节点）。语法：父节点.children;

3.firstChild属性可以用来获取元素的第一个子节点，等价于 childNodes[0]。语法：父节点.firstChild;

3.lastChild属性可以用来获取元素的最后一个子节点，等价于 childNodes[childNodes.length-1]。语法：父节点.lastChild;

4.previousSibling属性用来获取目标节点的前一个兄弟节点。语法：目标节点.previousSibling;

5.nextSibling属性用来获取目标节点的后一个兄弟节点。语法：目标节点.nextSibling;

6.parentNode属性用来获取已知节点的父节点。语法：子节点.parentNode;

7.ownerDocument属性用来当前节点所在文档的根节点，等价于document。语法：目标节点.ownerDocument;

节点的操作

1.createElement方法用来创建元素节点。语法：document.createElement('元素标签名称');

2.createAttribute方法用来创建属性节点。语法：document.createAttribute('属性名称');

3.createTextNode方法用来创建文本节点。语法：document.createTextNode('文本内容');

4.appendChild方法用来在目标节点的子节点的末尾添加一个子节点（可以是createElement创建的元素节点，也可以是createTextNode创建的文本节点）。语法：parent.appendChild(要插入的节点);

5.insertBefore方法用来在目标元素的前面插入一个新元素节点，此时的指针在目标元素的父级上。语法：parent.insertBefore(newElement,targetElement);

6.DOM中没有insertAfter这个方法，但是可以通过以下方法来模拟insertAfter;

/*
 * newElement : 要插入的新元素
 * targetElement : 目标元素 
 */
function insertAfter(newElement,targetElement){
 var parent = targetElement.parentNode;
 if(parent.lastChild == targetElement){
 /*
  如果目标元素是parent的最后一个子元素，则把新元素追加到parent元素上，
  也就是在parent的子元素的末尾位置添加新元素 
 */
 parent.appendChild(newElement);
 }else{
 /*
  否则，就把新元素添加到目标元素和目标元素的下一个兄弟元素之间 
 */
 parent.insertBefore(newElement,targetElement.nextSibling);
 }
}

7.replaceChild方法用来替换一个元素节点，此时的指针在目标元素的父级上。语法：parent.replaceChild(replaceElement,targetElement);

8.cloneChild方法用来克隆一个元素节点，传递一个布尔参数，参数为true时表示复制当前节点及其所有子节点，参数为false时表示支付至当前节点。语法：目标元素.cloneChild(true|false);

9.removeChild方法用来删除一个指定节点。语法：removeChild(要删除的节点);

10.getAttribute方法用来获取一个属性的值。语法：目标元素.getAttribute(元素属性名称);

11.setAttribute方法用来设置一个属性的值，没有该属性则创建。语法：目标元素.setAttribute(元素属性名称,属性值);

12.removeAttribute方法用来删除一个属性节点。语法：目标元素.removeAttribute(要删除的属性名称);

DOM操作内容

1.innerHTML属性用来获取和设置HTML内容。语法：元素节点.innerHTML 或者元素节点.innerHTML = 'HTML字符串';

2.innerText|textContent属性用来获取和设置文本内容。fireFox使用textContent来获取和设置（注意兼容性）。语法：元素节点.innerText 或者元素节点.innerText = 'HTML字符串';

DOM操作样式

1.style属性用来获取和设置元素的行内样式。语法：element.style;style属性只能获取和设置行内样式，对于如font-size这种样式属性，应该去掉 - 并且将 - 后面的第一个字母大写，驼峰法来获取和设置如：element.style.fontSize , element.style.backgroundColor

2.getComputedStyle全局方法用来获取计算后的样式，第一个参数是元素节点，第二个参数是类型，如:hover,:active等伪类，默认情况下传 null ,某些IE版本使用currentStyle属性来获取 box.currentStyle。语法：window.getComputedStyle(元素，类型)

3.className属性用来获取和设置元素的样式名称。语法：element.className

4.自定义的 addClass() | hasClass() | removeClass() 方法

//元素是否含有某样式
function hasClass(element,className){
 return !!element.className.match(new RegExp('(\\s|^)'+className+'(\\s|$)'));
}
//向元素添加新样式
function addClass(element,className){
 if(hasClass(element,className) == false){
  element.className += ' '+className;
  }
 }
//移除元素的指定样式
function removeClass(element,className){
 var currentClass = element.className;
 if(hasClass(element,className)){
   currentClass = currentClass.replace(new RegExp('(\\s|^)'+className+'(\\s|$)'),' ');
      //去除空格
   currentClass = currentClass.replace(/(^\s*)|(\s*$)/g,'');
   element.className = currentClass;
 }
}

DOM操作位置和大小

1.clientWidth属性用来获取元素的实际宽度，该值受滚动条和内边距影响，外边距和border不会影响。语法：

element.clientWidth;

2.clientHeight属性用来获取元素的实际高度，该值受滚动条和内边距影响，外边距和border不会影响。语法：

element.clientHeight;

3.offsetWidth属性用来获取元素的实际宽度，该值受边框和内边距影响，外边距和滚动条不会影响。语法：

element.offsetWidth;

4.offsetHeight属性用来获取元素的实际高度，该值受边框和内边距影响，外边距和滚动条不会影响。语法：

element.offsetHeight;

5.offsetTop和offsetLeft属性用来获取元素相对于父级的位置。该值受外边距影响。语法：element.offsetTop ||

element.offsetLeft;

6.scrollTop和scrollLeft属性用来获取滚动条被隐藏的区域大小，也可设置定位到该区域（比如返回顶部）。语法：

element.scrollTop || element.scrollLeft || element.scrollTop = 0;

常用到的简洁快速的document属性和方法

document.title 用来获取文档标题

document.domain 用来获取当前域名

document.URL 用来获取当前url路径

document.forms 获取表单集合

document.images 获取图片集合

document.body 获取body元素节点

document.compatMode 识别文档模式

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。まず、マルチテナントSaaSアプリケーションとは何ですか？マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法（フロントエンド統合）Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScript：Web言語の汎用性の調査Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1）フロントエンド開発：DOM操作と最新のフレームワーク（React、Vue.JS、Angularなど）を通じて、動的なWebページとシングルページアプリケーションを構築します。 2）サーバー側の開発：node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3）モバイルおよびデスクトップアプリケーション開発：クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

JavaScriptの進化：現在の傾向と将来の見通しApr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

javascriptの分解：それが何をするのか、なぜそれが重要なのかApr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

pythonまたはjavascriptの方がいいですか？Apr 06, 2025 am 12:14 AM

Pythonはデータサイエンスや機械学習により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、簡潔な構文とリッチライブラリエコシステムで知られており、データ分析とWeb開発に適しています。 2。JavaScriptは、フロントエンド開発の中核です。 node.jsはサーバー側のプログラミングをサポートしており、フルスタック開発に適しています。

JavaScriptをインストールするにはどうすればよいですか？Apr 05, 2025 am 12:16 AM

JavaScriptは、最新のブラウザにすでに組み込まれているため、インストールを必要としません。開始するには、テキストエディターとブラウザのみが必要です。 1）ブラウザ環境では、タグを介してHTMLファイルを埋め込んで実行します。 2）node.js環境では、node.jsをダウンロードしてインストールした後、コマンドラインを介してJavaScriptファイルを実行します。

クォーツでタスクが開始される前に通知を送信する方法は？Apr 04, 2025 pm 09:24 PM

Quartzタイマーを使用してタスクをスケジュールする場合、Quartzでタスク通知を事前に送信する方法、タスクの実行時間はCron式によって設定されます。今...

See all articles

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

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

ホットツール

DVWA

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