DOM(三)：Element属性与方法

2019-10-08 本文已影响0人 YYPL

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

element.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`	当前元素之后