07dom进阶

最新推荐文章于 2024-07-23 11:32:13 发布

宠儿呀

最新推荐文章于 2024-07-23 11:32:13 发布

阅读量204

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_46055080/article/details/105597642

版权

JavaScript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

07`dom`进阶

此篇主要是讲 js使用什么方法

对html里的内容进行获取，
对html中的标签进行展开原有标签，增加新标签，删除标签等操作
对标签的类名进行增删改查
对元素样式的简单增加修改
文档碎片的含义与使用

（1）获取

不用获取，可以直接使用的：

document.head :获取头部里的标签
document.body:获取body里的标签
document.title:获取标题里的标签
document.style:获取样式里的标签
document.documentElement:获取整个结构文档,html架构

获取方式

在JavaScript的世界，获取元素的方式很多，但是获取的结果却分为两个明显的类别NodeList和HTMLCollection

这两类都属于对象数据类型的一个分支，但是继承的默认方法有所不同

NodeList	有文本节点
`childNodes`	子节点
`parentNode`	父节点
`nextSibling`	下一个兄弟节点
`previousSibling`	上一个兄弟节点
`firstChild`	第一个字节点
`lastChild`	最后一个子节点

HTMLCollection	无文本节点
`children`	子元素
`previousElementSibling`	前一个兄弟元素
`nextElementSibling`	下一个兄弟元素
`parentElement`	父元素
`firstElementChild`	第一个子元素
`lastElementChild`	最后一个子元素

详解

`childNodes`

获取子节点（返回的是一个新的NodeList,包含文本节点）

<body>  
    <div class="box">
        <div class="son">1</div>
        <div class="son">2</div>
        <div class="son">3</div>
    </div>
</body>
<script>
        box = document.querySelector('.box');
        var sons = box.childNodes;
        console.log(sons);
</script>

打印结果为：

在这里插入图片描述

可见，结果确实将源代码中的三个class为son的盒子打印出来了，但是，多了四个text，是由于换行符造成的。

注意这里打印出来虽然是NodeList，但是不能使用数组格式去获取或增删改某一项，例如：

console.log( sons[0] );//❎会显示#text

sons[0] = '我是修改过后的文字';//❎不能去改
console.log(sons);//此时上一行写的代码并不会生效

`children`

获取子元素，可以解决上述childNodes遇到的问题

<body>  
    <div class="box">
        <div class="son">1</div>
        <div class="son">2</div>
        <div class="son">3</div>
    </div>
</body>
<script>
        box = document.querySelector('.box');
        var sons_a = box.children;
        console.log(sons_a);
</script>

结果为：
在这里插入图片描述
children是动态的，也可以利用数组形式

<body>  
    <div class="box">
        <div class="son">1</div>
        <div class="son">2</div>
        <div class="son">3</div>
    </div>
</body>
<script>
	var box = document.querySelector('.box');
    var box_b = document.querySelectorAll('.box > .son');
    var box_c = box.children;
    box.innerHTML += '<div class = "son"></div>'
    console.log( box_b,box_c);
</script>

展示为：

在这里插入图片描述

`previousElementSibling`

上一个兄弟元素

<body>  
    <div class="box">
        <div class="son">1</div>
        <div class="son">2</div>
        <div class="son">3</div>
    </div>
</body>
<script>
	var box = document.querySelector('.box');
    var second = box.children[1];
    console.log( second );
    //此时打印结果为<div class="son">2</div>
    var first = second.previousElementSibling;
    console.log( first );
    //此时打印结果为<div class="son">1</div>
</script>

`nextElementSibling`

下一个兄弟元素

<body>  
    <div class="box">
        <div class="son">1</div>
        <div class="son">2</div>
        <div class="son">3</div>
    </div>
</body>
<script>
	var box = document.querySelector('.box');
    var second = box.children[1];
    console.log( second );
    var third = second.nextElementSibling;
    console.log( third );
    //此时打印结果为<div class="son">3</div>
</script>

同样，可以运用链式操作，通过第二个元素，获取第四个元素

var four = second.nextElementSibling.nextElementSibling;
console.log( four );//tpeof为object

`previousSibling`

上一个兄弟节点

console.log(second.nextSibling);
//此时打印结果为<div class="son">1</div>

`nextSibling`

下一个兄弟节点

console.log(second.nextSibling);
//此时打印结果为<div class="son">3</div>

`parentNode`

父节点 (css里边不能用子元素控制父元素样式，但是js可以)

 var parent = second.parentNode;
 parent.innerHTML += '<p>我是通过第二个子元素找到父元素之后修改的内容</p>';
  console.log( parent );

`parentElement`

父元素

var father = second.parentElement;
console.log( father );//null

（2）展开

`nodeType`

常用的节点类型：

1—>表示标签

3—>表示文本节点

`nodeName`

表示标签名称

`dir`

展开一个标签的所有属性

 <body>  
     <div class="box"></div>
 </body>
<script>
	var box = document.querySelector('.box');
    console.dir(box.nodeName);//打印结果为DIV
</script>

我们可以利用dir查看节点类型和标签名称：
在这里插入图片描述

（3）增删标签操作

`creatElement`

创造元素

<body>
    <div class = "container"></div>
</body>
<script>
    var div = document.createElement('div');//不需要加<>
    div.innerText = '我是div1';
    console.log( div );
    //此时在内存中，不在页面中 -> 还没有添加到文档中，用户看不到
</script>

`appendChild`

添加一个子节点（从尾部添加），会返回被添加的元素

<body>
    <div class = "container"></div>
</body>
<script>
    var div = document.createElement('div');//不需要加<>
    div.innerText = '我是div1';
    console.log( div );
    //此时在内存中，不在页面中 -> 还没有添加到文档中，用户看不到
    container.appendChild(div);
    console.log( div );
    //此时“我是div1”将出现在页面中
</script>

会返回的表现：

var result_a = container.appendChild(section).innerText += ' 我是新添加的内容';
console.log( result_a ); //<section> 我是新添加的内容</section>

`append`

可以添加多个子节点（从尾部添加），不会返回被添加的元素

var p = document.createElement('p');
    p.innerText = '我是p标签';
var section = document.createElement('section');
    section.innerText = '我是section';
var div = document.createElement('div');
container.append( p, section, div );

不会返回的表现：

var result = container.append( p );
console.log( result );//undefined

`insertBefore`

从中间添加元素父元素.insertBefore(新元素，老元素)

<body>
    <div class="some">
        <div class="some_a">李白</div>
        <div class="some_a">露娜</div>
    </div>
</body>
<script>
	var some = document.querySelector('.some');
    var div_a = document.createElement('div');
    div_a.innerText = '猴子';
    some.insertBefore( div_a, some.children[1] );
    //此时猴子将出现在李白和露娜的中间
</script>

`replaceChild`

替换父元素 .replaceChild( 新元素, 旧元素 )

承接上例：

var girl = document.createElement( 'div' );
girl.innerText = '公孙离';
some.replaceChild( girl, some.children[1] );
//此时公孙离将代替猴子

`removeChild`

删除父元素里面的某个子节点

var some_a = some.children[0];
some.removeChild(some_a);

`remove`

自暴自弃，父子元素全部删除

some.remove();//全没有了

（4）文档碎片`fragment`

页面渲染完毕之后会关闭文档流, 如果我们用js修改了页面的内容，会重新打开文档流,这样会很耗性能，所以可以使用文档碎片,用来保存多个js创建的标签，然后一次性添加进文档中

`creatDocumentFragment`

var fragment = document.createDocumentFragment();
fragment.append( box1, box2 );
some.appendChild( fragment );
//先把box1和box2添加到碎片里边 然后 把碎片添加到文档中

（5）操作元素的类名

想要操作文档中的元素，就必须知道他有哪些属性可以用来操作，此时，我们可以行dir在控制台中打印展开该元素的属性，相当于打开工具箱，然后就能查看啦！

HTML5 新增了一种操作类名的方式，为所有元素添加classList属性。这个 classList属性是新集合类型 DOMTokenList的实例。

与其他 DOM 集合类似，DOMTokenList 有一个表示自己包含多少元素的 length 属性，而要取得每个元素可以使用 item()方法，也可以使用方括号语法。

①获取类名`className`

<body>
    <div class = "box"></div>
</body>
<script>
	var nickName = document.querySelector('div');
	console.dir(nickName.className);
    //打印结果为box，类型为String
</script>

②修改（替换）类名

1> 直接用className进行赋值即可

nickName.className = 'some';

2>使用classList中的replace方法---->replace(‘旧类名’, ‘新类名’)

nickName.classList.replace('some','few');

③添加类名

1> 使用+=即可

nickName.className += 'some';

2> 使用classList中的add方法，可以添加多个

nickName.classList.add('some',else);

④删除类名

使用classList中的remove方法，可以删除多个

nickName.classList.remove('some');

⑤查看某元素是否包含了某类名

使用classList中的contain方法

var result = nickName.classList.contains('box');
console.log( result );//true 有box这个类名;flase表示没有

⑥类名开关

toggle -->有就删除，没有就添加 --> 一次只能操作一个

nickName.classList.toggle('some');
nickName.classList.toggle('else');

（6）操作元素样式

之前说过，可以用dir展开该元素的属性工具箱，查看可以操作该元素的那些属性，现在举例子说明以下：

比如img有src，alt，id，width，height等属性

var img = document.querySelector('img');
img.src = 'images/img1.jpg';
img.alt = 'angelababy';
img.id = 'angela';
console.log(img.width, img.height);
img.width = 500;
img.height = 500;

在js里写入的css样式优先显示，因为js写入的相当于行内样式。

通过js修改元素的css样式只能通过 元素.style.css属性 去设置。

也可以使用cssText来访问样式

console.log( container.style);//无法通过元素的style属性去获取元素写在css里的样式
container.style.width = '400px';
container.style.backgroundColor = 'orange';
//可以设置多条样式：
container.style.cssText = 'width:400px;height:400px';

宠儿呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
07dom进阶

07dom进阶文章目录07`dom`进阶（1）获取不用获取，可以直接使用的：获取方式详解`childNodes``children``previousElementSibling``nextElementSibling``previousSibling``nextSibling``parentNode``parentElement`（2）展开`nodeType ``nodeName``dir`（...
复制链接

扫一扫