JS(JavaScript)
A .Document objects
What is the object 1.Document
- Document object
DOM is a basic specification is also one of the important objects in order to access, update page content properties and methods
by conslie. log () method to print Document object, the test object properties and methods
<body>
<script>
/*
document对象
* DOM预定义 - 已经被创建完毕了 - 允许直接使用
* 得到的是HTML页面的源代码 - 该对象代表当前HTML页面
*/
console.log(document);
// document的确是一个JavaScript对象
console.log(document instanceof Object);// true
// document对象的属性和方法被定义在原型上
console.log(Document.prototype);
// 不再需要我们创建了
var document = new Document();
console.log(document);
</script>
</body>- Inheritance chain relationships
<body>
<script>
// document对象是继承于Node的
console.log(Document.prototype instanceof Node);
// node对象是继承于EventTarget的
console.log(Node.prototype instanceof EventTarget);
console.log(Document.prototype instanceof EventTarget);
// DOM中的对象之间的继承关系远比语法中的继承关系复杂
console.log(Document.prototype instanceof HTMLDocument);
</script>
</body>2. positioning of page elements
- getElementById () method
This unique property is not repeatable features
<body>
<button id="ben">按钮</button>
<div id="q1"></div>
<script>
var buttonElement = document.getElementById('btn');
// 通过Document对象getElementById()方法定义元素
console.log(buttonElement instanceof Object);//true
/*
* 打印测试结果-对应元素HTML代码
* DOM是使用还是地道都应该是对象
*/
console.log(buttonElement instanceof HTMLButtonElement);
/*
* DOM提供一系列对象-对应HTML页面每个元素
* <button>元素都具有HTMLButtonElement对象
* <div>元素都具有HTMLDivElement对象
*/
var q1 = document.getElementById('q1');
console.log(q1 instanceof HTMLDivElement);//true
</script>
</body>- getElementsByName()方法
name is a parameter showing the positioning element name attribute
name attribute is not unique - get the result may be one or more
<body>
<button name="btns">按钮</button>
<button name="btns">按钮</button>
<button name="btns">按钮</button>
<button name="btns">按钮</button>
<button name="btns">按钮</button>
<script>
var buttonElements = document.getElementsByName('btns');
// name属性不唯一 - 得到结果可能是一个或多个
console.log(buttonElements[0]);
console.log(buttonElements instanceof NodeList);//true
/*NodeList集合-类数组对象
* 得到每个对应元素，通过索引值
*/
</script>
</body>- NodeList node set
<body>
<button class="btns" id="btn">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<script>
var btnElements = document.getElementsByClassName('btns');
console.log(btnElements);//HTMLCollection
/* console.log(btnElements.length);//5
// 打印当前集合长度
var btn = document.getElementById('btn');
// 删除当前集合中某个元素
var body = document.body;
body.removeChild(btn);
console.log(btnElements.length);//4
// 再一次打印当前集合长度
*/
var buttonElements = document.querySelectorAll('.btns');
console.log(buttonElements);//NodeList
console.log(buttonElements.length);//5
// 打印当前集合长度
var btn = document.getElementById('btn');
// 删除当前集合中某个元素
var body = document.body;
body.removeChild(btn);
console.log(buttonElements.length);//5
// 再一次打印当前集合长度
</script>
</body>- getElementsByTagName()方法
is a parameter name indicates the name of the element positioning element
elements return value
<body>
<button name="btns">按钮</button>
<button name="btns">按钮</button>
<button name="btns">按钮</button>
<button name="btns">按钮</button>
<button name="btns">按钮</button>
<script>
var buttonElements = document.getElementsByTagName('button');
// HTMLCollection集合-类数组对象
console.log(buttonElements[0]);
</script>
</body>- Positioning elements Element Properties
<body>
<button class="btns" id="btn">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<script>
console.log(document.documentElement);
// 获取到根元素(HTML)
console.log(document.head);
// 获取到头部(head)
console.log(document.body);
// 获取到文件内容(boby)
console.log(document.images);
// 获取到页面所有的图片(images)
</script>
</body>- getElementsByClassName()方法
is a parameter names, showing the positioning element class attribute value
names parameter can be a style attribute name or more style attribute name
<body>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<script>
var buttonElement = document.getElementsByClassName('btns');
// HTMLCollection集合-类数组对象
console.log(buttonElements);
</script>
</body>- querySelector () method
The first matching element is positioned by CSS selectors
selectors selector is a parameter showing a plurality of comma-separated, and contains one or more CSS selector
element is the return value
<body>
<button id="btn">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<script>
var buttonElement1 = document.querySelector('#btn');
console.log(buttonElement1);
// 方法返回是第个匹配元素
var buttonElement2 = document.querySelector('.btns');
console.log(buttonElement2);
var buttonElements = document.querySelectorAll('.btns');
console.log(buttonElements);
// querySelectorAll()方法返回的是NodeList集合
</script>
</body>3. Create a page element
- Creating element nodes
tagName is a parameter indicating create an element node
element is the return value
<body>
<script>
var btn = document.createElement('button');
// 创建<button>元素
var body = document.body;
// 获取<body>元素
body.appendChild(btn);
// 向<body>元素增加子节点
</script>
</body>- Create a text node
is a parameter data, text node represents the content (string)
textNode return value
<body>
<script>
var btn = document.createElement('button');
// 创建<button>元素
var textNode = document.createTextNode('按钮');
// 创建文本节点
btn.appendChild(textNode);
// 向<button>元素增填子节点
var body = document.body;
// 获取<body>元素
body.appendChild(btn);
// 向<body>元素增添字节点
</script>
</body>- Creating an attribute node
name is the name attribute is a parameter node
attributeNode return value
<body>
<script>
// 1.创建<button></button>元素
var btn = document.createElement('button');
// 2.创建文本节点
var textNode = document.createTextNode('按钮');
// 3.向<button>元素添加子节点
btn.appendChild(textNode);
// 4.创建属性节点
var attrNode = document.createAttribute('id');
// 5.为属性节点设置值
attrNode.nodeValue = 'btn';
// 6.为<button>元素设置属性节点
btn.setAttributeNode(attrNode);
// 4.获取<body>元素
var body = document.body;
// 5.向<body>元素添加子节点
body.appendChild(btn);
</script>
</body>