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

Red youth

已于 2023-02-07 19:10:29 修改

阅读量304

点赞数

分类专栏： js 文章标签： javascript 前端 html

于 2023-02-07 17:02:12 首次发布

本文链接：https://blog.csdn.net/NNNNNNI/article/details/128922083

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

元素的获取

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

}

Red youth

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
dom接口方法元素遍历元素的修改元素的获取

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

扫一扫

专栏目录

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

元素的获取

元素的修改

hello world!

元素遍历

“相关推荐”对你有帮助么？

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