Document type
Javascript represents documents by using the Document type. In the browser, the document object is an instance of HTMLDocument, representing the entire HTML page. The document object is a property of the window object and can be called directly. HTMLDocument inherits from Document.
1. Attributes
documentElement : Always points to the <html> element in the HTML page.
body : points directly to the <body> element
doctype : visit <!DOCTYPE>, browser support is inconsistent, rarely used
title : get the title of the document
URL: get the full path URL
domain : Get the domain name and set it, which is often used in cross-domain access.
referrer: Get the URL of the page linked to the current page, that is, the URL of the source page.
images : Get all img objects and return an HTMLCollection-like array object
forms : Get all form objects and return an HTMLCollection-like array object
links: get all <a> elements with href attribute in the document
<script>
window.onload=function(){
//document-*-表示整个html文档页面
console.log(document)
// html元素
console.log(document.documentElement);
// body元素
console.log(document.body);
// img元素
console.log(document.images)
// form元素
console.log(document.forms);
// a标签 带有href属性的
console.log(document.links);
// 获取域名 --只能通过服务器打开
console.log(document.domain,'111');
// 获取文档头信息
console.log(document.doctype);
// 获取文档标题
console.log(document.title);
// 获取URL
console.log(document.URL);
// 获取页面来源地址--只能通过服务器打开
console.log(document.referrer,'222');
}
</script>2. DOM programming interface
In the DOM, all HTML elements are defined as objects, and the programming interface is the properties and methods of each object .
Attributes are values that get or set (such as changing the content of an HTML element).
Methods are actions you can perform (such as adding or removing HTML elements).
<body>
<p id="demo"></p>
<script>
//getElementById是方法
//表示通过id访问元素，
var p1 = document.getElementById("demo");
//innerHTML是属性 用于设置或获取元素节点的内容
//向p标签插入内容
p1.innerHTML = "Hello World!";
</script>
</body>
3. Method
3.1 Find elements
（1）getElementById()
Find elements by element id and return an element matching the specified id
Usage: document.getElementById(id name)
（2）getElementsByTagName()
Find elements by tag name and return a pseudo-array containing all elements matching the specified tag name.
用法：document.getElementsByTagName(name)
（3）getElementsByClassName()
Find elements by class name, return a pseudo-array containing all elements matching the specified class name
用法：document.getElementsByClassName(name)
（4）document.querySelector()
Returns the first element in the document that matches the specified CSS selector
Usage: document.querySelector()
<div id="div1">我是一个div</div>
<div id="div1">我是一个div</div>
<script>
console.log(document.querySelector("#div1"));//<div id="div1">
// 替换第一个匹配元素的文本内容
document.querySelector("#div1").innerHTML = 'Hollo'
</script>（5）document.querySelectorAll()
A new method introduced in HTML5 that returns a list of all element nodes in the document that match the CSS selector
Usage: document.querySelectorAll()
<div class="div1">我是一个div</div>
<div class="div1">我是一个div</div>
<script>
console.log(document.querySelectorAll(".div1"));//NodeList [ div.div1, div.div1 ]
</script>(6) Other methods
document.createElement(element)
Used to create new HTML elements, used in conjunction with appendChild() or insertBefore() methods to add elements
<script>
// 创建元素节点p
var p = document.createElement('p');
// 向p标签插入内容
p.innerHTML = '我是一个p标签';
// 将节点插入到body中
document.body.appendChild(p);
</script>document.write()
Write text or HTML expressions or JavaScript code to the document.
<script>
document.write("<p>Hello world!</p>");
document.write("Hello Weekend!");
</script>Element type
Element objects correspond to HTML elements of web pages. Every HTML element will be transformed into an Element node object on the DOM tree.
1. Attributes
attributes: Returns a collection of all attributes associated with this element.
classList: Returns the collection of class attributes contained in the element.
className: Gets or sets the value of the class attribute of the specified element.
clientHeight: Gets the height inside the element, including padding, but excluding horizontal scrollbars, borders, and margins.
clientTop: Returns the height of the element from its upper border.
clientLeft: Returns the width of the element from its left border.
clientWidth: Returns the width of the element inside it, including padding, but excluding vertical scroll bars, borders, and margins.
innerHTML: Set or get the descendant of the element represented by HTML syntax.
tagName: Returns the tag name of the current element.
2. Common methods
element.innerHTML
Property sets or gets the descendant of the element represented by HTML syntax. Change the innerHTM of an element
<div id="div1">我是一个div</div>
<script>
//获取节点的引用
var d1 = document.getElementById('div1');
// 设置新的文本内容
d1.innerHTML = '我是新的内容'
</script>
// 获取节点内部内容得方式和区别
// 1.innerHtml
// 2.innerText
// 3.textContent
console.log(body.innerHTML);//hello<div>one</div><!-- 我是一个注释 -->world
console.log(body.innerText);//hello one world
console.log(body.textContent);//hellooneworld
<body>
hello<div>one</div><!-- 我是一个注释 -->world
</body>element.attribute = value
Modify the value of an existing property
<div id="div1">123</div>
<script>
var d1 = document.getElementById('div1');
// 直接将已经存在的属性进行修改
d1.id = 'div2';
</script>element.getAttribute()
Returns the value of the specified attribute of the element node. Get custom attributes
<div id="div1">我是一个div</div>
<script>
var div = document.getElementById('div1');
console.log(div.getAttribute('id')); // div1
</script>element.setAttribute(attribute, value)
Sets or changes the specified property to the specified value.
<div id="div1">我是一个div</div>
<script>
var d1 = document.getElementById('div1');
// 设置div1的class为divCla
d1.setAttribute('class', 'divCla');
</script>element.style.property
Sets or returns the element's style attribute.
<div id="div1">我是一个div</div>
<script>
var d1 = document.getElementById('div1');
// 获取div1的style样式
console.log(d1.style);
// 设置div1的style
d1.style.backgroundColor = 'red';
</script>Text type
Text nodes, represented by the Text type, contain literal plain text and may contain escaped HTML characters, but no HTML code.
1. Properties and methods
Length text length
appendData(text) append text
deleteData(beginIndex,count) delete text
insertData(beginIndex,text) insert text
replaceData(beginIndex,count,text) replace text
splitText(beginIndex) splits the current text node into two text nodes from the beginIndex position
document.createTextNode(text) Create a text node, the parameter is the text to be inserted into the node
substringData(beginIndex,count) Extract count substrings from beginIndex
Comprehensive case
<div id="container"></div>
<script>
// 创建文本节点
var textNode = document.createTextNode('Hello World!');
// 获取container
var div = document.getElementById('container');
// 将文本节点插入container
div.appendChild(textNode);
// 替换文本
textNode.replaceData(0,5,'Hi');
// 插入文本
textNode.insertData(0, 'Hello')
</script>