【JS基础入门】JavaScript基础之DOM的基础操作及常用API详解

类数组是什么?

  1. 可以利用属性名模拟数组的特性
  1. var obj = {
  2. "0":'a',
  3. "1":'b',
  4. "2":'c',
  5. "length":3,
  6. "push":Array.prototype.push, //引入数组的push功能
  7. "splice":Array.prototype.splice
  8. }

可以动态的增长length属性
执行obj.push('d');obj对象就会引入一个属性”3”:’d’,且length变为4

如果再加上"splice":Array.prototype.splice属性,此对象会以数组的形式显现,但仍然是对象。

  1. 类数组定义:属性要为索引(数字)属性,必须有length属性,最好加上push方法,是对象,且可以当数组一样用。

  2. 类数组的关键点在于length,push内部原理为:

  1. Array.prototype.push = function (target){
  2. obj[obj.length] = target;
  3. obj.length ++;
  4. }
  1. 如果强行让类数组调用push方法,则会根据length属性值的位置进行属性的扩充。
  1. var obj = {
  2. "0":"a",
  3. "1":"b",
  4. "length":2,
  5. "push":Array.prototype.push
  6. }
  7. obj.push('c');
  8. obj.push('d');
  9. /*
  10. obj = {
  11. "0":"a",
  12. "1":"b",
  13. "2":"c",
  14. "3":"d",
  15. "length":4
  16. }*/
  1. 将类数组转换为真正的数组
  1. let obj = {
  2. 0:"huawei",
  3. 1:"xiaomi",
  4. 2:"meizu",
  5. length:3,
  6. push:Array.prototype.push
  7. }
  8. console.log(obj);
  9. let arr1= Array.from(obj);
  10. console.log(arr1);

获取DOM元素

文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口。简单理解就是HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。我们用JavaScript对网页进行的所有操作都是通过DOM进行的。

  • 通过ID获取(getElementById)

document.getElementById('id')

  1. <div id="box"></div>
  2. <script>
  3. let box= document.getElementById("box");
  4. </script>
  • 通过类名(getElementsByClassName)

document.getElementsByClassName('box');

注意:该方法获取的是一个集合

  1. <div class="box"></div>
  2. <div class="box"></div>
  3. <script>
  4. let boxCollection= document.getElementsByClassName("box");
  5. let box1 = boxList[0];
  6. let box2 = boxList[1];
  7. </script>
  • 通过name属性(getElementsByName)

document.getElementsByName('name')

注意:只有含有name属性的元素(表单元素)才能通过name属性获取

  • 通过标签名(getElementsByTagName)

document.getElementsByTagName('p');

注意:该方法获取的是一个集合

  1. <div id="box">
  2. <p>段落1</p>
  3. <p>段落2</p>
  4. <p>段落3</p>
  5. <p>段落4</p>
  6. <p>段落5</p>
  7. <p>段落6</p>
  8. </div>
  9. <script>
  10. let pCollection= document.getElementsByTagName("p");
  11. </script>

  • 获取页面的地址(document.documentURI)
    - document.documentURI可以获取当前页面的URL地址
  • 获取html的方法(document.documentElement)
    document.documentElement是专门获取html这个标签
  • 获取body的方法(document.body)
  • 获取head的方法(document.head)
  • 获取标题的方法(document.title)
  • 获取所有图片(document.images)

  • 通过选择器获取一个元素(querySelector)
  1. <div id="box">
  2. <ul class="list">
  3. <li class="item"></li>
  4. <li class="item"></li>
  5. <li class="item"></li>
  6. <li class="item"></li>
  7. <li class="item"></li>
  8. <li class="item"></li>
  9. </ul>
  10. </div>
  11. <script>
  12. let box= document.querySelector("#box > .list");
  13. </script>

  • 通过选择器获取一组元素(querySelectorAll)
  1. <div class="box">box1</div>
  2. <div class="box">box2</div>
  3. <div class="box">box3</div>
  4. <div class="box">box4</div>
  5. <div class="box">box5</div>
  6. <script>
  7. let box1= document.querySelector(".box");
  8. let boxes= document.querySelectorAll(".box");
  9. </script>


注意:querySelector()和querySelectorAll()方法括号中的取值都是css选择器,但从图中我们可以看出,两个方法是有区别的。当有多个class相同的元素时,使用querySelector()方法只能获取到第一个class为box的元素,而querySelectorAll()获取到了所有class为box的元素集合。

  1. // 获取集合中的第一个元素
  2. console.log(lis[0]); // 索引
  3. console.log(lis.item(0)); // 方法
  4. // 遍历元素集合
  5. lis.forEach(item => console.log(item))


所有获取DOM对象的方法中,只有getElementById()querySelector()这两个方法直接返回的DOM对象本身,可直接为其绑定事件。其余获得都可能是一个元素集合。

常用的节点类型

节点类型例子
元素节点<div>, <input>
属性节点type,src,class,id
文本节点空格元素中文字等

html 结构如下:

  1. <div class="box">
  2. <ul class="list">
  3. <li class="item">item1</li>
  4. <li class="item">item2</li>
  5. <li class="item">item3</li>
  6. <li class="item">item4</li>
  7. <li class="item">item5</li>
  8. <li class="item">item6</li>
  9. </ul>
  10. </div>

根据关系树来选择(遍历节点树)

但注意的是,他们获取的节点包括文本节点和元素节点,如果我们只获取元素节点,需要使用下面一组遍历元素节点树来获取。

  • parentNode//获取所选节点的父节点,最顶层的节点为#document
  1. let li = document.querySelector("li");
  2. // 获取li的父节点ul
  3. let ul = li.parentNode;
  4. // 获取ul的父节点div.box
  5. let box = ul.parentNode;

  • childNodes //获取所选节点的子节点们
  1. let ul = document.querySelector("ul");
  2. // 获取ul节点的子节点们
  3. console.log(ul.childNodes)

  • firstChild //获取所选节点的第一个子节点

  • lastChild //获取所选节点的最后一个子节点

  • nextSibling //获取所选节点的后一个兄弟节点 列表中最后一个节点的nextSibling属性值为null

  • previousSibling //获取所选节点的前一兄弟节点 列表中第一个节点的previousSibling属性值为null

基于元素节点树的遍历(遍历元素节点树)

我们一般用下列这些来获取相应的元素节点。

  • childElementCount返回当前子节点个数
  1. let ul = document.querySelector("ul");
  2. console.log(ul.childElementCount); // 6
  3. cosnole.log(ul.children.length); // 6
  • parentElement //返回当前元素的父元素节点
  1. let li = document.querySelector("li");
  2. console.log(li.parentElement);
  • children // 返回当前元素的元素子节点
  1. let ul = document.querySelector("ul");
  2. console.log(ul.children);

  • firstElementChild //返回的是第一个元素子节点
  1. let ul = document.querySelector("ul");
  2. console.log(ul.firstElementChild);

  • lastElementChild //返回的是最后一个元素子节点
  1. let ul = document.querySelector("ul");
  2. console.log(ul.lastElementChild);

nextElementSibling //返回的是后一个兄弟元素节点

  1. let li3 = document.querySelector("ul li:nth-of-type(3)");
  2. console.log(li3.nextElementSibling);

previousElementSibling //返回的是前一个兄弟元素节点

  1. let li3 = document.querySelector("ul li:nth-of-type(3)");
  2. console.log(li3.previousElementSibling);

获取元素内容

  • textContent:可以设置和获取元素的文本内容
  1. document.querySelector("ul li:nth-of-type(3)").textContent;
  2. document.querySelector("ul li:nth-of-type(3)").textContent = "我是第三个节点";

  • innerText:可以设置和获取元素的文本内容(jq:text())
  1. document.querySelector("ul li:nth-of-type(4)").innerText;
  2. document.querySelector("ul li:nth-of-type(4)").innerText = "我是第四个节点";
  • innerHTML:可以设置和获取元素的标签+文本内容(jq:html())

注意:前两个只能设置元素节点的文本,如果其实含有HTML标签,将不能被解析出来原样显示在标签中。

  1. let li3 = document.querySelector("ul li:nth-of-type(3)");
  2. let li4 = document.querySelector("ul li:nth-of-type(4)");
  3. li3.textContent = "<em>强调</em>";
  4. li4.innerText = "<em>强调</em>";

于是我们需要使用innerHTML来设置渲染含有HTML的字符串

  1. let li3 = document.querySelector("ul li:nth-of-type(3)");
  2. let li4 = document.querySelector("ul li:nth-of-type(4)");
  3. li3.innerHTML = "<em>强调</em>";
  4. li4.innerHTML = "<em>强调</em>";

  • outerHTML:使用当前的文本将当前的节点替换掉(实际上就是当前内容的父节点)

    document.querySelector("ul li:nth-of-type(3)").outerHTML = "<em>强调</em>";
    li3已经整个没有了,而被替换成了em标签。

value:可以获取表单元素中的value值(jq:val())

  1. <input type="text" value="用户名">
  2. <script>
  3. let input = document.querySelector("input");
  4. // 获取表单的值
  5. console.log(input.value); // 用户名
  6. // 设置表单的值
  7. input.value = 'value的值';
  8. </script>

设置元素属性

原生 javascript 可以通过 HTML DOM 的 getAttribute() 方法获取DIV元素属性的值,修改DIV元素中的指定属性的值,可以使用 setAttribute() 方法,使用 removeAttribute() 方法来删除DIV元素中的属性

getAttribute()
获取属性 .getAttribute(“属性”)

  1. <div id="mochu" title="标题"></div>
  2. <script>
  3. var title = document.getElementById('mochu').getAttribute('title');
  4. console.log(title); // 标题
  5. </script>

setAttribute()
设置属性 .setAttribute(“属性”,”值”)

  1. <div id="mochu" title="这里的值会被改变成网址"></div>
  2. <script>
  3. document.getElementById('mochu').setAttribute('title','http://www.zhsh520.com');
  4. </script>

removeAttribute()
删除属性 .removeAttribute(‘属性名’)

  1. <div id="mochu" title="hello word!"></div>
  2. <script>
  3. document.getElementById('mochu').removeAttribute('title');
  4. </script>

自定义属性

HTML 5 允许用户为元素自定义属性,但要求添加 data- 前缀,目的是为元素提供与渲染无关的附加信息,或者提供语义信息。
<div id="box" data-myid="12345" data-myname="zhangsan" data-mypass="zhang123" data-my-age="18">自定义数据属性</div>

添加自定义属性之后,在 JavaScript 中可以通过元素的 dataset 属性访问自定义属性。dataset 属性的值是一个 DOMStringMap 实例,也就是一个名值对的映射。在这个映射中,每个 data-name 形式的属性都会有一个对应的属性,只不过属性名没有 data- 前缀。

  1. let div = document.getElementById("box");
  2. //访问自定义属性值
  3. let id = div.dataset.myid;
  4. let name = div.dataset.myname;
  5. let pass = div.dataset.mypass;
  6. // 注意 data-my-age我们直接通过dataset.my-age获取是不行的
  7. // 多个单词需要将转换为驼峰式
  8. let age = div.dataset.myAge;
  9. //设置自定义属性值(存在该属性则为修改,没有则为添加自定义属性)
  10. div.dataset.myid = "66666";
  11. div.dataset.myname = "zhangsan";
  12. div.dataset.mypass = "zhangsan666";

DOM元素的增删改查

一、节点创建型API

1.1 createElement
createElement通过传入指定的一个标签名来创建一个元素,如果传入的标签名是一个未知的,则会创建一个自定义的标签
var div = document.createElement("div");
使用createElement要注意:通过createElement创建的元素并不属于html文档,它只是创建出来,并未添加到html文档中,要调用appendChild或insertBefore等方法将其添加到HTML文档树中;

  1. // 创建DOM元素
  2. let div = document.createElement("div");
  3. let span = document.createElement("span");
  4. // 添加文本
  5. span.textContent = "hello world!";
  6. // 添加元素
  7. div.append(span); // 先将span添加到div中
  8. document.body.append(div); // 添加到body中
  9. // 注意:这里的创建的元素,只能添加一次,相当于剪切。

1.2 createTextNode
createTextNode用来创建一个文本节点,用法如下
var textNode = document.createTextNode("一个TextNode");
createTextNode接收一个参数,这个参数就是文本节点中的文本,和createElement一样,创建后的文本节点也只是独立的一个节点,同样需要append Child将其添加到HTML文档树中

1.3 cloneNode
cloneNode是用来返回调用方法的节点的一个副本,它接收一个bool参数,用来表示是否复制子元素,使用如下:

  1. var parent = document.getElementById("parentElement");
  2. var parent2 = parent.cloneNode(true);// 传入true
  3. parent2.id = "parent2";

这段代码通过cloneNode复制了一份parent元素,其中cloneNode的参数为true,表示parent的子节点也被复制,如果传入false,则表示只复制了parent节点

  1. <div class="box">
  2. <ul class="fruit">
  3. <li class="item">香蕉</li>
  4. <li class="item">苹果</li>
  5. <li class="item">西红柿</li>
  6. <li class="item">榴莲</li>
  7. </ul>
  8. <br>
  9. <ul class="vegetables">
  10. <li class="item">芹菜</li>
  11. <li class="item">萝卜</li>
  12. <li class="item">黄瓜</li>
  13. </ul>
  14. </div>

有如上结构的html,我们可以看出,西红柿不属于水果,我们需要将其移动到蔬菜列表汇总,如何操作:

  1. // 获取西红柿
  2. let xi = document.querySelector(".fruit li:nth-of-type(3)");
  3. // 获取蔬菜列表
  4. let vegetables = document.querySelector(".vegetables");
  5. // 移动西红柿到蔬菜列表中
  6. vegetables.append(xi);

但是,西红柿也可以属于水果也可以属于蔬菜,我们该如何操作呢

  1. // 获取西红柿
  2. let xi = document.querySelector(".fruit li:nth-of-type(3)");
  3. // 获取蔬菜列表
  4. let vegetables = document.querySelector(".vegetables");
  5. // 复制西红柿到蔬菜列表中
  6. vegetables.append(xi.cloneNode(true));

1.4 createDocumentFragment
createDocumentFragment方法用来创建一个DocumentFragment。在前面我们说到DocumentFragment表示一种轻量级的文档,它的作用主要是存储临时的节点用来准备添加到文档中
createDocumentFragment方法主要是用于添加大量节点到文档中时会使用到。假设要循环一组数据,然后创建多个节点添加到文档中

  1. <input type="button" value="添加多项" id="btnAdd" />
  2. document.getElementById("btnAdd").onclick = function() {
  3. const list = document.createElement("ul");
  4. for (var i = 1; i <= 100; i++) {
  5. var li = document.createElement("li");
  6. li.textContent = `item${i}`;
  7. list.style.color = "red";
  8. list.appendChild(li);
  9. }
  10. document.body.appendChild(list);
  11. }

这段代码将按钮绑定了一个事件,这个事件创建了100个li节点,然后依次将其添加HTML文档中。这样做有一个缺点:每次一创建一个新的元素,然后添加到文档树中,这个过程会造成浏览器的回流。所谓回流简单说就是指元素大小和位置会被重新计算,如果添加的元素太多,会造成性能问题。

这个时候,就是使用createDocumentFragment了DocumentFragment不是文档树的一部分,它是保存在内存中的,所以不会造成回流问题。我们修改上面的代码如下

  1. document.getElementById("btnAdd").onclick = function(){
  2. var list = document.getElementById("list");
  3. var fragment = document.createDocumentFragment();
  4. for(var i = 0;i < 100; i++){
  5. var li = document.createElement("li");
  6. li.textContent = i;
  7. fragment.appendChild(li);
  8. }
  9. list.appendChild(fragment);
  10. }

优化后的代码主要是创建了一个fragment,每次生成的li节点先添加到fragment,最后一次性添加到list

需要注意下面几点:

  • 它们创建的节点只是一个孤立的节点,
  • 要通过appendChild添加到文档中
  • cloneNode要注意如果被复制的节点是否包含子节点以及事件绑定等问题
  • 使用createDocumentFragment来解决添加大量节点时的性能问题
  1. <div id="box">
  2. <ul class="list">
  3. <li class="item">item1</li>
  4. <li class="item">item2</li>
  5. <li class="item">item3</li>
  6. <li class="item">item4</li>
  7. <li class="item">item5</li>
  8. </ul>
  9. </div>
  10. <script>
  11. let ul = document.querySelector("#box > .list");
  12. // 1. 创建元素
  13. const li = document.createElement('li');
  14. // 2. 添加元素
  15. ul.appendChild(li);
  16. // 3.添加节点内容
  17. li.innerHTML = "item6";
  18. // ----直接添加html模板字符串------
  19. let htmlStr = `<li style="color: pink">item7</li>`;
  20. // 将HTML字符串直接解析为DOM元素
  21. ul.insertAdjacentHTML('beforeEnd', htmlStr);
  22. // 也可以添加createElement创建的元素
  23. // afterBegin 添加到开头 beforeEnd添加到末尾
  24. // ul.insertAdjacentElement("afterBegin",li);
  25. //------批量添加使用文档片段完成------
  26. // const frag = document.createDocumentFragment();
  27. const frag = new DocumentFragment();
  28. for (let i = 1; i < 5; i++) {
  29. // 创建元素
  30. const li = document.createElement('li');
  31. // 设置元素内容
  32. li.textContent = `item${i+7}`;
  33. // 设置元素样式
  34. li.style = "color:green";
  35. // 将生成的节点临时挂载到文档片段中
  36. frag.appendChild(li);
  37. }
  38. ul.appendChild(frag);
  39. </script>

二、页面修改形API(包括删除和添加)(删)(改)

前面我们提到创建型api,它们只是创建节点,并没有真正修改到页面内容,而是要调用appendChild来将其添加到文档树中。我在这里将这类会修改到页面内容归为一类。

2.0 append(ele,”text”) 子元素结尾添加
此方法用于以Node对象或DOMString(基本上是文本)的形式添加元素。

  1. const parent = document.createElement('div');
  2. const child = document.createElement('p');
  3. parent.append(child);
  4. parent.append("文本");
  5. // 这会将子元素追加到div元素
  6. // 然后div看起来像这样<div> <p> </ p> 文本 </ div>

prepend(ele,”text”) 子元素开头添加

  1. const parent = document.createElement('div');
  2. const child = document.createElement('p');
  3. child.textContent = "我是一个段落";
  4. parent.prepend(child);
  5. parent.prepend("文本");
  6. parent.prepend(child.cloneNode(true));
  7. // 这会将子元素追加到div元素
  8. /*然后div看起来像这样
  9. <div>
  10. <p>我是一个段落</ p>
  11. 文本
  12. <p>我是一个段落</ p>
  13. </ div>
  14. */

before() 在参照节点之前插入

  1. let li3 = document.querySelector("li:nth-of-type(3)");
  2. let li = document.createElement('li');
  3. li.textContent = "在参照节点之前插入";
  4. li.style.background = "red";
  5. li3.before(li);

after() 在参照节点之后插入

  1. let li3 = document.querySelector("li:nth-of-type(3)");
  2. let li = document.createElement('li');
  3. li.textContent = "在参照节点之后插入";
  4. li.style.background = "pink";
  5. li3.before(li);

2.1 appendChild(追加为子元素)
appendChild我们在前面已经用到多次,就是将指定的节点添加到调用该方法的节点的子元素的末尾。调用方法如下:
parent.appendChild(child);
child节点将会作为parent节点的最后一个子节点

appendChild这个方法很简单,但是还有有一点需要注意:如果被添加的节点是一个页面中存在的节点,则执行后这个节点将会添加到指定位置,其原本所在的位置将移除该节点,也就是说不会同时存在两个该节点在页面上,相当于把这个节点移动到另一个地方

注意:appendChild与 .append 方法类似,该方法用于DOM中的元素,但在这种情况下,只接受一个Node对象。

  1. <div id="child">
  2. 要被添加的节点
  3. </div>
  4. <br/><br/><br/>
  5. <div id="parent">
  6. 要移动的位置
  7. </div>
  8. <input id="btnMove" type="button" value="移动节点" />
  9. <script>
  10. document.getElementById("btnMove").onclick = function(){
  11. var child = document.getElementById("child");
  12. document.getElementById("parent").appendChild(child);
  13. }
  14. </script>

这段代码主要是获取页面上的child节点,然后添加到指定位置,可以看到原本的child节点被移动到parent中了。
这里还有一个要注意的点:如果child绑定了事件,被移动时,它依然绑定着该事件

2.2 insertBefore(插入前面)
insertBefore用来添加一个节点到一个参照节点之前,用法如下
parentNode.insertBefore(newNode,refNode);

  • parentNode表示新节点被添加后的父节点
  • newNode表示要添加的节点
  • refNode表示参照节点,新节点会添加到这个节点之前
  1. <div id="parent">
  2. 父节点
  3. <div id="child">子元素</div>
  4. </div>
  5. <input type="button" id="insertNode" value="插入节点" />
  6. <script>
  7. var parent = document.getElementById("parent");
  8. var child = document.getElementById("child");
  9. document.getElementById("insertNode").onclick = function(){
  10. var newNode = document.createElement("div");
  11. newNode.textContent = "新节点"
  12. parent.insertBefore(newNode,child);
  13. }
  14. </script>

2.3 removeChild(删除子元素)
removeChild用于删除页面中的元素节点,用法如下:
let oldChild = node.removeChild(child);

child 是要移除的那个子节点.
node 是child的父节点.
oldChild保存对删除的子节点的引用. oldChild === child.

  1. // 先定位父节点,然后删除其子节点
  2. var d = document.getElementById("top");
  3. var d_nested = document.getElementById("nested");
  4. var throwawayNode = d.removeChild(d_nested);
  5. // 无须定位父节点,通过parentNode属性选择父元素直接删除自身
  6. var node = document.getElementById("nested");
  7. if (node.parentNode) {
  8. node.parentNode.removeChild(node);
  9. }
  10. // 移除一个元素节点的所有子节点
  11. var element = document.getElementById("top");
  12. while (element.firstChild) {
  13. element.removeChild(element.firstChild);
  14. }
  15. // ele.remove(没有参数)可以删除自己(自毁)

2.4 replaceChild(替换子元素)
replaceChild用于使用一个节点替换另一个节点,用法如下
parent.replaceChild(newChild,oldChild);
newChild是替换的节点,可以是新的节点,也可以是页面上的节点,如果是页面上的节点,则其将被转移到新的位置,oldChild是被替换的节点

  1. // 将第三个li替换为h3标签元素
  2. let h2 = document.createElement('h2');
  3. h2.textContent = "我是替换元素h2";
  4. document.querySelector("ul").replaceChild(h2,document.querySelector("li:nth-of-type(2)"));
  5. // repaceWith()替换当前元素
  6. let h3 = document.createElement('h3');
  7. h3.textContent = "我是替换元素h3";
  8. document.querySelector("li:nth-of-type(3)").replaceWith(h3);

不管是新增还是替换节点,如果新增或替换的节点是原本存在页面上的,则其原来位置的节点将被移除,也就是说同一个节点不能存在于页面的多个位置,节点本身绑定的事件也不会消失,会一直保留着。

2.5 insertAdjacentElement(‘插入位置’,节点)
插入位置有四个:

  • beforeBegin: 开始标签之前,前一个兄弟元素
  • afterBegin: 开始标签之后,第一个子元素
  • beforeEnd: 结束标签之前,最后一个子元素
  • afterEnd: 结束标签之后,下一个兄弟元素
  1. let ul = document.querySelector('ul');
  2. // 插入第一个子元素之前(在起始标签之后)
  3. const li = document.createElement('li');
  4. li.textContent = "第一个子元素";
  5. ul.insertAdjacentElement('afterBegin',li);
  6. // 将div插入到整个ul的前面,也就是前一个兄弟节点
  7. const div = document.createElement('div');
  8. div.style.width = "60px";
  9. div.style.height = "60px";
  10. div.style.background = "red";
  11. ul.insertAdjacentElement('beforeBegin',div);

此方法还有一个plus版insertAdjacentHTML(),可以直接使用html字符串当元素来插入到相应位置

  1. // 追加到ul的结尾
  2. ul.insertAdjacentHTML('beforeEnd','<li style="color: pink">最后一个子元素</li>');

还可以直接插入文本 insertAdjacentText()

  1. const h2 = document.createElement('h2');
  2. h2.insertAdjacentText('beforeEnd',"我是一个大标题");
  3. console.log(h2); // <h2>我是一个大标题</h2>

三 元素属性型操作(属性节点的操作)

3.1 getAttribute() (获取属性)
getAttribute()用于获取元素的attribute值

  1. node.getAttribute('id');
  2. //表示获取node元素的id属性的 ‘值’

3.2 createAttribute() (创建属性)
createAttribute()方法生成一个新的属性对象节点,并返回它。

  1. attribute = document.createAttribute(name);
  2. // createAttribute方法的参数name,是属性的名称。

3.3 setAttribute() (设置属性)
setAttribute()方法用于设置元素属性

  1. var node = document.getElementById("div1");
  2. node.setAttribute(name, value);
  3. //name为属性名称 ;value为属性值
  4. // 例如
  5. var node = document.getElementById("div1");
  6. node.setAttribute("id", "ct");
  7. // 等同于
  8. var node = document.getElementById("div1");
  9. var a = document.createAttribute("id");
  10. a.value = "ct";
  11. node.setAttributeNode(a);

3.4 romoveAttribute() (删除属性)
removeAttribute()用于删除元素属性
node.removeAttribute('id');

3.5 element.attributes(将属性生成数组对象)

  1. // 获取文档的第一个 <p> 元素
  2. var para = document.getElementsByTagName("p")[0];
  3. //获取该元素属性(多个属性会形成一个数组对象)
  4. var atts = para.attributes;

设置元素节点内容

  • innerText返回的是元素内包含的文本内容(只返回文本节点类型);
  • innerHTML返会元素内HTML结构,包括元素节点、注释节点、文本节点;
  • outerHTML返回包括元素节点自身和里面的所有元素节点、注释节点、文本节点;

设置元素的样式

  1. 行内样式
  1. const p = document.querySelector('p');
  2. p.style.color = 'red';
  3. p.style.fontSize = "30px";
  4. console.log(p)
  5. // <p style="color: red; font-size: 30px;">我是一个段落</p>
  1. 类样式

className是类别选择器的名字,使用这个className可以进行动态更改某个标签的类的属性值。

  1. // 直接修改元素的类名,多个以空格隔开
  2. p.className = 'one content';

使用元素的 classList 属性可以访问或添加、删除及修改元素的 class 属性。

  • classList.add()添加
  • classList.remove()移除
  • classList.replace()替换
  • classList.toggle()切换
  1. .cred {
  2. color: red;
  3. }
  4. .cpink {
  5. color: pink;
  6. }
  7. .cgreen {
  8. color: green;
  9. }
  10. .f32{
  11. font-size: 32px;
  12. }
  1. <ul>
  2. <li>item1</li>
  3. <li>item2</li>
  4. <li>item3</li>
  5. </ul>
  6. <input type="button" value="切换">
  1. const ul = document.querySelector('ul');
  2. // 一个子元素
  3. const firstLi = ul.firstElementChild;
  4. // 最后一个子元素
  5. const lastLi = ul.lastElementChild;
  6. // 添加class类
  7. firstLi.classList.add('cgreen', 'f32');
  8. lastLi.classList.add('cpink');
  9. // 移除class类
  10. firstLi.classList.remove('f32');
  11. // 替换class 类
  12. lastLi.classList.replace('cpink', 'cred');
  13. // 切换类样式(没有则添加,有则移除)
  14. // 点击按钮切换item1的类样式
  15. const btn = document.querySelector("input[type='button']");
  16. btn.addEventListener('click', function() {
  17. firstLi.classList.toggle('f32')
  18. })

计算样式

一个元素最终应该渲染成什么样式,有浏览器来决定。
浏览器根据一个元素的行内元素,内部元素,外部样式表来计算出最终的样式
第一个参数是要查看的元素,第二个参数是伪元素

  1. let styles = window.getComputedStyle(p,null);
  2. // 计算样式都是只读的
  3. console.log(styles.getPropertyValue('height'));
  4. console.log(styles.getPropertyValue('font-size'));