dom接口方法 元素遍历 元素的修改 元素的获取

元素的获取

getElementById

1.通过ID获取元素，唯一的 参数：ID值。注意：js中ID值不能重复‘html中只有有一个ID

var bd = document.getElementById(‘baidu’);

console.log(bd);

getElementsByClassName

2.通过class获取元素 参数：class值

​ 返回HTMLCollection集合‘类数组对象’，通过class是可以获取多个元素‘可通过下标获取指定的某一个元素’

​ var llq = document.getElementsByClassName(‘llq’);

​ console.log(llq);

getElementsByTagName

3.通过标签名获取元素。参数：class值

​ 返回NodeList集合‘类数组对象’，通过标签名是可以获取多个元素‘可通过下标获取指定的某一个元素’

​ var lis = document.getElementsByTagName(‘li’)

​ console.log(lis);

getElementsByName

4.通过标签获取元素。参数：name值

​ 返回NodeList集合‘类数组对象’通过name值是可以获取多个元素‘可通过下标获取指定的某一元素’

​ var huohu = document.getElementsByName(‘huohu’)[0]

​ console.log(huohu);

querySelector

5.通过css选择器获取元素。参数：选择器 注意：只能获取一个元素

​ var tb = document.querySelector(‘ul li’);

​ console.log(tb);

querySelectorAll

​ 6.通过css选择器获取元素。参数：选择器

​ 返回NodeList集合‘类数组对象’。可通过下标获取指定的某一元素

​ var tb1 = document.querySelectorAll(‘ul li’);

​ console.log(tb1);

元素的修改

innerText

​ 1. 获取元素的文本内容,不包含元素本身

​ console.log(box.innerText);

​ 修改元素的文本内容,不能够解析HTML标签

​ box.innerText = ‘hello world！’;

innerHTML

​ 2.获取元素的HTML内容,内容包含当前子元素的内部标签，不包含元素本身。

​ console.log(box.innerHTML);

​ 修改元素的文本内容,能够解析HTML标签"把原来的元素内内容修改为赋值的内容"

​ box.innerHTML = ‘hello world！’;

textContent

​ 3.获取元素的文本内容,不包含元素本身

​ console.log(box.textContent);

修改元素的文本内容,不能够解析HTML标签

​ box.textContent = “星期四”;

outerHTML

​ 4.获取元素的HTML内容，包含元素本身

​ console.log(box.outerHTML);

​ 修改元素本身及内容

​ box.outerHTML = ‘

hello world!

’;

​ 清空页面内容

​ document.body.innerHTML = ‘’;

element.style

  5.样式属性操作
  行内样式：elecment.style.width = '250px'
  里面的样式采取驼峰命名法如：fonSize,backgroundColor
  修改style样式操作，产生的是行内样式，css权重比较高
  适用于样式较少，或者功能简单的情况下使用

element.className

  6.样式属性操作
  类名样式操作：element.className = '类名'
  className 会直接更改元素的类名。会覆盖原先的类名，是多类名选择器
  适用于样式较多，或者功能复杂的情况下使用

元素遍历

var ul = document.querySelector(‘.list’);

​ 1.向上遍历，获取父节点。 （父节点只有一个）

parentElement

​ console.log(ul.parentElement);

​ console.log(ul.parentElement.parentElement);

​ 2.向下遍历，获取子节点。 （子节点可以有多个）

children

​ 获取所有的子元素，返回一个集合，通过下标获取某个节点。

​ console.log(ul.children);

​ console.log(ul.children[2]);

​ 获取子元素节点的数量

childElementCount

​ console.log(ul.childElementCount);

​ console.log(ul.children.length);

​ 获取第一个子节点

firstElementChild

​ console.log(ul.firstElementChild);

​ console.log(ul.children[0]);

​ 获取最后一个子节点

lastElementChild

​ console.log(ul.lastElementChild);

​ console.log(ul.children[ul.children.length - 1]);

​ console.log(ul.children[ul.childElementCount - 1]);

3.同级之间遍历，获取同胞节点。 （兄弟节点可以有多个）

​ var li = ul.children[2];

​ 上一个相邻的同胞节点

previousElementSibling

​ console.log(li.previousElementSibling);

下一个相邻的同胞节点

nextElementSibling

​ console.log(li.nextElementSibling);

4.遍历元素，使用for循环

​ var size = 10;

​ for (var i = 0; i < ul.children.length; i++) {

​ var li = ul.children[i];

​ size += 4;

​ li.style.fontSize = size + ‘px’;

​ }

二。节点操作，获取的节点可能包含注释，元素，文本 等……

1.从当前节点开始向上查找

parentNode

​ console.log(ul.parentNode); //parent标签，body节点

2.从当前节点向下查找，获取所有的子节点。

返回 NodeList()，包含元素内所有的节点“文本，元素，注释”

​ console.log(ul.childNodes);

​ console.log(ul.childNodes[7]); //通过下标返回某个节点

​ console.log(ul.childNodes.length); //获取节点集合长度

​ console.log(ul.firstChild); //获取第一个子节点

​ console.log(ul.lastChild); //获取最后一个子节点

​ 3.遍历节点

​ for (var i = 0; i < ul.childNodes.length; i++) {

​ var node = ul.childNodes[i];

​ // nodeName 节点名。nodeType 节点类型，nodeValue 节点内容，

​ console.log(node.nodeName);

​ console.log(node.nodeType);

​ console.log(node.nodeValue);

​ }