DOM之Element及Document公有方法与属性思维导图
Dom-Document-Element.png
DOM之Element属性
element.attributes 属性及其方法
element.attributes单个属性的引用
element.attributes返回的结果是一个『伪数组』，与element.getAttributeNames()获取的结果相似，后者是『数组』形式表现出来
实例演示
<div id="test">
<p class="para1">Hello World</p>
<p class="para2">just test</p>
<p class="para3">for DOM</p>
</div>
<script>
var Div = documentGetElementById('test')
var attr = Div.attributes
// NamedNodeMap {0: id, id: id, length: 1}
// 获取单个属性，三种方式
attr.id
// id="test"
attr[0]
// id="test"
attr['id']
// id="test"
</script>
element.attributes 属性的方法
Element.getAttribute()方法返回当前元素节点的指定属性(字符串)。如果指定属性不存在，则返回null
实例演示🌰
// html
/*
<div class ="xxx" id="yyy">
test for DOM
</div>
*/
var Div = document.getElementById('yyy')
Div.getAttribute('class')
// "xxx"
Div.getAttribute('id')
// "yyy"
Div.getAttribute('width')
// null
element.getAttributeNames()
Element.getAttributeNames()返回一个『数组』,成员是当前元素的所有属性的名字
// html
/*
<div class ="xxx" id="yyy" >
test for DOM
</div>
*/
var Div = document.getElementById('yyy')
Div.getAttributeNames()
// ["class", "id"]
element.setAttribute()
element.setAttribute()方法用于为当前元素节点新增属性。如果同名属性已存在，则相当于编辑已存在的属性。该方法没有返回值。
/*
<div class ="xxx" id="yyy" >
test for DOM
</div>
*/
var Div = document.getElementById('yyy')
Div.setAttribute('class', 'test_again')
// <div class ="test_again" id="yyy" >，设置的同名以及存在相当于编辑已存在的属性
// 不要使用，document.createAttribute(),太繁琐
element.hasAttribute()
hasAttribute 返回一个布尔值，表示该元素是否包含有指定的属性
// html
/*
<div class ="xxx" id="yyy" >
test for DOM
</div>
*/
var Div = document.getElementById('yyy')
Div.hasAttribute('class')
// true
// Div有 class 这个属性
Div.hasAttribute('id')
// true
// Div有 id 这个属性
element.removeAttribute() 与element.hasAttributes()
Element.removeAttribute方法移除指定属性。该方法没有返回值。element.hasAttributes()判断当前元素『是否有』属性
// html
/*
<div class ="xxx" id="yyy" >
test for DOM
</div>
*/
var Div = document.getElementById('yyy')
Div.removeAttribute('class')
// undefined 移除 class属性
Div.removeAttribute('id')
// undefined 移除 id 属性
// 上面已经把<div class ="xxx" id="yyy" >的属性全部删除了
var div = document.querySelector('div')
div.hasAttributes()
// false
// div 不含有任何属性 <div>test for DOM</div>
dataset 属性
元素节点对象的dataset属性，它指向一个对象，可以用来操作 HTML 元素标签的『data-属性』。
// HTML
/*
<body>
<div class="test" data-hello-dom="test1">test for fun</div>
</body>
*/
var Div = document.querySelector('.test')
Div.dataset
// DOMStringMap {helloDom: "test1"}
Div.dataset.helloDom
// dataset.helloDom读写data-hello-dom属性。
// "test1"
// ⚠️通过dataset.*读取属性时，连词线后面如果跟着一个小写字母，那么连词线会被移除，该小写字母转为大写字母，其他字符不变⚠️
// ⚠️dataset的键名转成属性名时，所有大写字母都会被转成连词线+该字母的小写形式，其他字符不变 ataset.helloDom → data-hello-dom⚠️
Div.dataset.helloDom = "test2"
// 通过赋值改变属性
// <div class="test" data-hello-dom="test2">test for fun</div>
delete document.querySelector('.test').dataset.foo
// 删除一个data-*属性，可以直接使用delete命令。
getAttribute('data-foo')、removeAttribute('data-foo')、setAttribute('data-foo')、hasAttribute('data-foo')等方法操作data-*属性。
注意，data-后面的属性名有限制，只能包含字母、数字、连词线（-）、点（.）、冒号（:）和下划线（_)。而且，属性名不应该使用A到Z的大写字母*
element.style(行内样式)
element.style用来读写该元素的『行内样式』信息
实例演示🌰
// html
/*
<div id="test">
<p class="para1">Hello World</p>
<p class="para2">just test</p>
<p class="para3">for DOM</p>
</div>
*/
function $(selector) {
return document.querySelector(selector)
}
var para1 = $('.para1')
var para2 = $('.para2')
var para3 = $('.para3')
// 一. 通过element.style.xxx 设置样式
para1.style.color = 'red'
// "red"
// <p class="para1" style="color: red;">Hello World</p>
para2.style.fonfSize = '30px'
// "30px"
para2.style.border = '2px solid green'
// "2px solid green"
// <p class="para2" style="font-size: 30px; border: 2px solid green;">just test</p>
para3.style.backgroundColor = 'pink'
// "pink"
// // <p class="para3" style="background-color: pink;">for DOM</p>
// 二. element.setAttribute('style','css-style')设置样式
div.setAttribute(
'style',
'background-color:red;' + 'border:1px solid black;'
);
element.className element.classList
document.className
属性用来读写当前元素节点的class属性。它的值是一个『字符串』，每个class之间用『空格』分割。
<p id="test1" class="lemon apple">test for dom</p>
<script>
var para = document.getElementById('test1')
test1.className
// "lemon apple"
typeof test1.className
// "string"
</script>
element.classList
element.classList属性返回一个『类似数组的对象』，当前元素节点的每个class就是这个对象的一个成员。
| element.classList对象的方法 | 使用 |
|---|---|
| element.classList.add() | 增加一个 class |
| element.classList.remove() | 移除一个 class |
| element.classList.contains() | 检查当前元素是否包含某个 class |
| element.classList.item() | 返回指定索引位置的 class |
| element.classList.toggle() | 将某个 class 移入或移出当前元素，『存在某个class，就删除该class，并返回false』，不『存在该class就添加该class，并返回true』 |
| element.classList.toString() | 将 class 的列表转为字符串 |
实例演示🌰🌰🌰
<p id="test1" class="lemon apple">test for dom</p>
<script>
var paraClassList = document.getElementById('test1').classList
// DOMTokenList(2) ["lemon", "apple", value: "lemon apple"]
typeof paraClassList // "object"
Array.isArray(paraClassList) // false
// 通过上面两式可以判断 『para.classList是一个类数组对象』
paraClassList.add('banana') // 添加一个属性 「banana」
// <p id="test1" class="lemon apple banana">test for dom</p>
paraClassList.remove('banana') // 移除属性 「banana」
// <p id="test1" class="lemon apple">test for dom</p>
paraClassList.contains('apple') // true
paraClassList.contains('true') // false
// element.classList.contains('attr'),
// node.contains( otherNode ) ，otherNode 是否是node的后代节点。注意区分element.classList.contains()
paraClassList.item(1) // "apple"
paraClassList.item(0) // "lemon"
paraClassList.item(2) // null
// 返回指定索引位置的 class,没有则返回null
paraClassList.toggle('orange') // true
// <p id="test1" class="lemon apple orange">test for dom</p>
// 『不存在』class="orange",就『添加』这个属性并『返回true』
paraClassList.toggle('orange') // false
// <p id="test1" class="lemon apple">test for dom</p>
// 已经『存在』class="orange"这个属性,就『删除』这个属性并『返回false』
</script>
element.innerHTML
Element.innerHTML 属性设置或获取HTML语法表示的元素的后代。⚠️⚠️⚠️为了防止恶意代码最好不使用innerHTML
<body>
<input type="text" id="Input">
<button id ="inputBtn">写入</button>
<div class="display"></div>
<script>
var Input = document.getElementById('Input')
var inputBtn = document.getElementById('inputBtn')
var Div = document.getElementsByClassName('display').item(0)
// document.getElementsByClassName()获取的是一个HTMLCollection伪数组，
// 所以想获得对应的元素就必须 通过document.getElementsByClassName('display')[0] 或是 document.getElementsByClassName('display').item(0)获取对应的HTML标签
inputBtn.onclick = function () {
Div.innerHTML = Input.value
// 给<div class="display"></div>设置HTML
}
</script>
</body>
给<div class="display"></div>设置了『innerHTML = <p style="font-size: 30px; color: red;">这是一个段落</p>』，最终的结果是
HTML以及内在样式都被解析。如下图
element.innerHTML演示实例🌰
『<p style="font-size: 30px; color: red;">』也被添加到『<div class="display"></div>』
element.innerHTML实例
element.children
element.children『只包括元素类型的子节点』为HTMLCollection,Node.chldNodes不仅包括元素类型的子节点，也包括『空白符』，注意区分两者⚠️
<body>
<div class="test">
<p>Hello World</p>
<p>just test</p>
<p class="test1">for DOM</p>
</div>
<script>
var Div = document.querySelector('.test')
var divElementChild = Div.children
// HTMLCollection(3) [p, p, p.test1]
Div.childElementCount === divElementChild.length //true
// element.children『只包括元素类型的子节点』
// element.childElementCount 为包含『子节点的个数』，『等于element.children.length的值』
Div.childNodes
// NodeList(7) [text, p, text, p, text, p.test1, text]
// 包括元素类型的子节点，也包括『空白符』
</script>
</body>
JavaScript-DOM之Element公有方法
element.remove()
将当前元素节点从它的父节点移除，是调用自身的方法，括号内无需参数。注意区别于Node.removeChild()
代码实例
<body>
<div id="test">
<p>Hello World</p>
<p>just test</p>
<p class="test1">for DOM</p>
</div>
<script>
var Div = document.querySelector('#test')
test.lastElementChild.remove()
// <p class="test1">for DOM</p>被删除啦
// 『remove()即为自身调用自身，删除』，删除的是 element元素本身,括号内一般没参数
while (test.firstChild) {
console.log('No: ' + test.firstChild)
test.removeChild(test.firstChild)
}
// No: [object Text]
// No: [object HTMLParagraphElement]
// No: [object Text]
// No: [object HTMLParagraphElement]
// No: [object Text]
// Node.removeChild()是父元素删除子元素，删除的子元素也包括『空白符』
</script>
</body>
element.click()
用于在当前元素上模拟一次鼠标点击，相当于触发了click事件
element.insertAdjacentHTML()
element.insertAdjacentHTML(position, text); 将一个 HTML 字符串，解析生成 DOM 结构，插入相对于当前节点的指定位置。
不要死记，结合英语单词理解
| 位置 | |
|---|---|
beforebegin |
当前元素之前 |
beforeend |
当前元素内部的最后一个子节点后面 |
afterbegin |
当前元素内部的第一个子节点前面 |
afterend |
当前元素之后 |
实例演示🌰
<div id="test">
<p class="para1">Hello World</p>
<p class="para2">just test</p>
<p class="para3">for DOM</p>
</div>
<script>
var test = document.querySelector('#test')
test.insertAdjacentHTML('beforebegin', '<p>beforebegin</p>')
// 在 <div id="test">外面的前面插入一个<p>beforebegin</p>
test.insertAdjacentHTML('beforeend', '<p>beforeend</p>')
// 在 <div id="test">内部的最后一个子节点(<p class="para3">for DOM</p>),后面插入一个<p>beforeend</p>
test.insertAdjacentHTML('afterbegin', '<p>afterbegin</p>')
// 在 <div id="test">内部的第一个子节点(<p class="para3">for DOM</p>),前面插入一个<p>afterbegin</p>
test.insertAdjacentHTML('afterend', '<p>afterend</p>')
// 在 <div id="test">外部的后面插入一个<p>afterend</p>
</script>
配图存于语雀
版权声明：本文为博主原创文章，未经博主许可不得转载
网友评论