当前位置：网站首页>Summary of DOM knowledge points

Summary of DOM knowledge points

2022-06-30 00:09:00 【Taste of saury】

DOM
DOM yes JS Interface to operate web page , Its full name is “ Document object model ”（Document Object Model）. Its function is to turn the web page into a JS object , So you can use scripts to do all kinds of operations

file : A document is a representation of the whole html Web documents
object ： Object means to convert every part of a web page into an object
Model ： Use models to represent relationships between objects , This makes it easy for us to get objects
Common node
The type of node ：Document, DocunentType,Element,Text,Comment,DocumentFragment,

Common nodes ：
Document nodes （document）
Whole html file document Object as window The properties of the object exist , Can be used directly without obtaining
Element nodes （Element）
In document html label
Attribute node （Attribute）
Attribute of element Represents the attributes of each tag , The attribute node is not a child of the element node , Is part of the element node
Text node （Text）
html Text content in Tags
All nodes of a document , According to your grades , It can be abstracted into a tree , This tree is DOM
Parent node relationship （parentNode）： The direct parent node
Child node relationship （childNode）： Direct child nodes
Peer node relationship （sibling）： Nodes with the same parent node
Document type
documentElement Always point to html Page type <html> Elements
body Direct to <body> Elements
title Get the title of the document
document.URL To achieve complete URL
getElementByld Method
visit html The most common way to use an element is to use the id
innerHTML attribute
The easiest way to get element content is to use innerHTML attribute

Method

attribute

document.getElementByid （）

Through elements id To find the elements

document.getElementsByTagName（）

Find elements by tag names

document.getElementsByClassName（）

Find elements by class name

document.querySelector()

Returns the document that matches the specified CSS The first element of the selector

document.querySelectorAll()

document.querySelectorAll() yes HTML5 New methods introduced in , Returns the matching in the document CSS List of all element nodes of the selector

getElementById（）
Return match specification id An element of

<div id="d1"> I am a div label </div>
<script>
  //  lookup id by d1 The label of 
  var div = document.getElementById('d1');
  console.log(div);
</script>

getElementsByTagName()
Return to one htmlcollection（ Pseudo array ）, Contains all elements that match the specified tag name

<p> I am a p label </p>
<p> I am a p label </p>
<p> I am a p label </p>
<script>
  //  Find all p label 
  var p = document.getElementsByTagName('p');
  console.log(p);
</script>

getElementsByClassName() Return to one HTML aggregate HTMLCollection( Pseudo array ), Contains all elements that match the specified class name .

<div class="div1"> I am a div label </div>
<div class="div1"> I am a div label </div>
<div class="div1"> I am a div label </div>
<script>
  //  lookup class by div1 The label of 
  var div = document.getElementsByClassName('div1');  
  console.log(div);  
</script>

document.querySelector() Returns the document that matches the specified CSS The first element of the selector

<div id="div1"> I am a div</div>
<div id="div1"> I am a div</div>
<script>
  document.querySelector("#div1").innerHTML = "Hello World!";
</script>

document.querySelectorAll() document.querySelectorAll() yes HTML5 New methods introduced in , Returns the matching in the document CSS List of all element nodes of the selector

<div class="div1"> I am a div</div>
<div class="div1"> I am a div</div>
<script>
  console.log(document.querySelectorAll(".div1"));
  var x = document.querySelectorAll(".div1");
  x[0].innerHTML = ' I'm new div';
</script>

Additive elements
Create a new HTML Elements , To work with appendChild() or insertBefore() Methods in combination . among ,appendChild() Method to add a new child node at the end of the node's child node list .insertBefore() Method to insert a new node anywhere in the node's child node list .

<script>
  //  Create element node p
  var p = document.createElement('p');
  //  towards p Label insert 
  p.innerHTML = ' I am a p label ';
  //  Insert the node into body in 
  document.body.appendChild(p);
</script>

document.write() Write to a document, such as text or HTML expression

<script>
  document.write("<p>Hello world!</p>");
  document.write("<span>Hello DOM!</span>");
  document.write("Hello Weekend!");
</script>

attributes： Returns a collection of all attributes related to the element

classList： Returns the class Collection of properties

className： Gets or sets the of the specified element class The value of the property

clientHeight： Gets the height inside the element , Contains the inside margin , Horizontal scrollbars are not included 、 Border and margin .

clientTop： Returns the height of the element from its upper boundary

clientLeft： Returns the width of the element from its left boundary

clientWidth： Returns the width of the element inside it , Including the inside margin , But it doesn't include vertical scrollbars 、 Border and margin .

innerHTML： Set or get HTML The descendants of elements represented by syntax
Text attributes and methods

Text length length
Add text appendData(text)
Delete text deleteData(beginIndex,count)
insert text insertData(beginIndex,text)
replace text replaceData(beginIndex,count,text)

<div id="container"></div>
<script>  //  Create text node  
var textNode = document.createTextNode('Hello World!');  //  obtain container  
var div = document.getElementById('container');  //  Insert a text node into container  div.appendChild(textNode);  //  replace text   
textNode.replaceData(0,5,'Hi');  //  insert text   
textNode.insertData(0, 'Hello')
</script>

原网站

版权声明
本文为[Taste of saury]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/181/202206292353304940.html

当前位置：网站首页>Summary of DOM knowledge points

Summary of DOM knowledge points

边栏推荐

猜你喜欢

随机推荐