Loading...
墨滴

CYF

2021/04/24  阅读:105  主题:默认主题

DOM之操作元素

img
img

js的DOM操作可以改变页面内容、结构和样式,我们可以使用DOM操作元素来改变元素里面的内容、属性等

1、改变元素内容

img
img

改变标签的内容其实就是先获取标签里面的内容,再替换掉原先的内容

而获取标签内容有两种方式:

  • innerText它会去除包含的html标签、空格、换行,非标准,IE6+支持
  • innerHTML获取包含的html标签,空格、换行,W3C标准
  • textContent:去除html标签,保留文本结构(空格、换行等)

栗子:

<div></div>
<p>
    我们会不会成为最好的我们
    <span>会的</span>
</p>
let div = document.querySelector('div')
let p = document.querySelector('p')

console.log(p.innerText); // 我们会不会成为最好的我们 会的
console.log(p.innerHTML); 
/* 
我们会不会成为 最好的我们
<span>会的</span> 
*/

console.log(p.textContent);  
/* 
我们会不会成为 最好的我们
会的
*/


div.innerText = '<strong>这份爱</strong> 会不会 会不会'  // 不会加粗,而且<strong>还会被当成文本渲染上去
div.innerHTML = '<strong>这份爱</strong> 会不会 会不会'  // 加粗

总结:

  1. innerText:浏览器显示什么,怎么显示,我就获取什么,包括格式(有没有空格啊、需不需要换行啊等等)
  2. innerHTML:我会获取标签中所有的内容,包括内嵌的标签(<script>和<style>除外
  3. textContent:获取标签的文本,与innerText很相似,但是它会获取 <script> 和 <style>标签中的内容
  4. innerHTML用得比较多

2、常用元素的属性操作

属性操作一般有:srchrefidalttitle,既然是属性,那就跟给对象添加属性一样

element.属性 = ''

栗子:点击按钮,显示不同的图片

<button id="zhou">周深</button>
<button id="wang">汪苏泷</button>
<div>
    <img src="" alt="" title="">
</div>
let zhou = document.querySelector('#zhou')
let wang = document.querySelector('#wang')
let img = document.querySelector('img')

zhou.onclick = function({
    // 添加属性
    img.src = "/周深.jpg"
    img.title = '周深'
}

wang.onclick = function({
    img.src = "/汪苏泷.jpg";
    img.title = '汪苏泷'
}
img

3、表单元素的属性操作

使用DOM操作表单属性:typevaluecheckedselecteddisable

栗子:

<div class="box">
    <button>点击</button>
    <input type="text">
    <img src="image/images/open.png" alt="">
</div>
let btn = document.querySelector('button')
let img = document.querySelector('img')
let input = document.querySelector('input')
let flag = true

btn.onclick = function({
    input.value = '日益努力而后风生水起'
}
// 点击显示/隐藏文本
img.onclick = function({
    if (flag === true) {
  // 隐藏文本:把表单类型修改为password
        img.src = "image/images/close.png";
        input.type = 'password'
        flag = false
    } else {
        img.src = "image/images/open.png";
        input.type = 'text'
        flag = true
    }
}

点击按钮:

img
img

隐藏文本:

img
img

4、样式属性操作

img
img

我们可以通过DOM操作来修改元素的大小、颜色、位置等,这就涉及到了样式操作

4.1 行内样式操作

适用于少数样式的修改

element.stytle.样式属性 = 属性值

注意:

  • 在行内样式中,采用的是驼峰命名法,如:fontSizebackgroundColorbackgroundPosition
  • js 修改 style 样式修改,产生的是行内样式, CSS 权重比较高

栗子一:点击按钮,显示/隐藏图片

<button class="open">显示</button>
<button class="hidden">隐藏</button>
<img src="./image/images2/zs.jfif" alt="">
let open = document.querySelector('.open')
let hidden = document.querySelector('.hidden')
let img = document.querySelector('img')
// 点击显示
open.onclick = function({
    img.style.display = 'block'
}
// 点击隐藏
hidden.onclick = function({
    img.style.display = 'none'
}

栗子二:遍历精灵图

  1. 准备好li结构 和 精灵图
  2. 将精灵图位置属性添加给每一个li

html结构

<div class="box">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

CSS样式

.box {
    width180px;
    height130px;
    margin100px auto;
}

.box ul li {
    float: left;
    list-style: none;
    width24px;
    height24px;
    background-color: pink;
    margin10px;
    /* 精灵图,放图片,但不设置位置 */
    backgroundurl(image/images/sprite.png);
}

javaScript 行为

// 1、获取元素
var lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
    var index = i * 44;
    lis[i].style.backgroundPosition = '0 - ' + index + 'px';   // 修改图片位置
}
img
img

4.2 类名样式操作

element.className  --  适合大量修改

注意:

  • 如果样式修改较多,可以采取操作类名方式更改元素样式
  • className 会直接更改元素的类名,会覆盖原先的类名 ,所以我们要把原先的类名加上

栗子:

<div class='first'>文本</div>
.first {
    width100px;
    height100px;
    background-color: pink;
}

.change {
    width150px;
    height150px;
    background-color: skyblue;
    color: orange;
    margin100px auto;
}
var text = document.querySelector('div');

text.onclick = function({
    this.className = 'first change';  // 类名样式操作,调用change样式
}
  • 因为className会覆盖原先的类,所以当还需要原先的样式时,要加上该类名
img
img

排他思想

有一组元素,我们只想要某一个元素实现某个样式,就需要用到循环的排他思想算法

所谓排他思想,就是将其他人排除,留下自己

  1. 第一步:清除所有元素的样式
  2. 第二步:给当前元素设置样式

注意顺序不能颠倒,首先先干掉所有人,再设置自己

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
let btns = document.querySelectorAll('button');
for (let i = 0; i < btns.length; i++) {
    btns[i].onclick = function({
        // 干掉所有人
        for (let i = 0; i < btns.length; i++) {
            btns[i].style.backgroundColor = ''
        }
        // 再给自己设置样式
        this.style.backgroundColor = 'skyblue'
    }
}
img
img

5、 自定义属性的操作

img
img

5.1 获取属性值

有两种方式:

  • element.属性名 获取属性值
  • element.getAttribute('属性名');

区别:

  • element.属性名 —— 获取内置属性值(元素本身自带的属性
  • element.getAttribute('属性名'); —— 主要获取自定义的属性,标准(我们自己定义的属性
<div id="demo"></div>
var div = document.querySelector('div');
console.log(div.id);  // demo
console.log(div.getAttribute('id'));  // demo

5.2 设置属性值

  • element.属性值 = '值' —— 设置内置属性
  • element.setArrtribute('属性', '值'); —— 设置自定义的属性
<div id="demo" index="2" class="nav"></div>
let div = document.querySelector('div');
div.id = 'test';
div.className = 'navs';   // 修改class用className 属性

div.setAttribute('index'1)
div.setAttribute('class''test2');   // 直接用class属性修改

console.log(div);  // <div id="test" index="1" class="test2"></div>

5.3 移除属性

div.removeAttribute('属性名')

div.removeAttribute('index');  // 移除index属性

console.log(div); // <div id="test" class="test2"></div>

6、H5自定义属性

自定义属性目的:是为了保存并使用数据;有些数据可以保存到页面中而不用保存到数据中

自定义属性是通过 getArrribute('属性') 获取

H5给我们新增了自定义属性:

  • H5 规定自定义属性data - 开头作为属性名并且赋值
<div data-index='0'></div>

1、获取H5自定义属性

  1. 兼容性获取 element.getAttribute('data-index');
  2. H5新增 element.dataset.index 或者 elemrnt.dataset['index'] ---- ie11 才开始支持
<div class="nav" data-gettime='10' data-index='1' data-list-name='andy'></div>
var div = document.querySelector('div');

// 1、dataset 是一个集合,里面存放了所有以data开头的自定义属性
console.log(div.dataset); // DOMStringMap {gettime: "10", index: "1"}
console.log(div.dataset.index); //  1
console.log(div.dataset['gettime']); // 10

// 2、如果自定义属性里面有多个-连接的单词,我们采用驼峰命名法
console.log(div.dataset.listName); // andy
console.log(div.dataset['listName']); // andy

// 3、getAttribute 就不必尊循驼峰命名法,直接原来的属性
console.log(div.getAttribute('data-list-name'));  // andy

CYF

2021/04/24  阅读:105  主题:默认主题

作者介绍

CYF