DOM(三)：Element属性与方法

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

实例演示?

<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>

配图存于语雀

文章转载于:https://www.jianshu.com/p/2c411577d496

原著是一个有趣的人,若有侵权,请通知删除

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自起风了，原文地址《DOM(三)：Element属性与方法》