【第五部分 | JS WebAPI】2:DOM 元素操作
创始人
2024-02-07 07:51:19
0

目录

1-1 改变元素内容(去除html和空格换行)

1-2 改变元素内容(保留html和空格换行 用的最多)

1-3 获取元素的内容

[ 更多其它可操作的元素属性 ]

2-1 修改元素的属性

2-2 修改表单元素属性

2-3 使用this指向函数调用者

3-1 通过 element.style 样式属性操作

3-2 通过 element.className 进行样式属性批量修改

4-1 获取用户输入的值 inputElement.value

4-2 案例:判断用户输入的密码是否符合要求

5-1 获取自定义属性

6-2 设置自定义属性的值

6-3 移除自定义属性

[ 总结 ]


事件:进行对元素某些操作的响应

操作元素:DOM 操作可以改变网页内容、结构和样式,我们可以利用 DOM 操作元素来改变元素里面的内 容 、属性等。注意以下都是属性

1-1 改变元素内容(去除html和空格换行)

从起始位置到终止位置的内容, 但它去除 html 标签, 同时空格和换行也会去

element.innerText = 'XXXXXX';


Document

猜猜我是谁

1-2 改变元素内容(保留html和空格换行 用的最多)

  • innerText不识别html标签,会保留下来显示,而且不会换行和空格

  • innerText是IE自己发起的,火狐不支持;innerHTML是W3C推荐的,用的最多。

element.innerHTML = 'XXXXX';

1-3 获取元素的内容

  • element.innerText 和 element.innerHTML 除了能修改元素内容,还能读取元素内容。

  • 区别的方式在于: XXXX = element.innerXXX 则代表获取 ; element.innerXXX = XXX 则代表修改


[ 更多其它可操作的元素属性 ]

基本用法:

获取元素 → 绑定事件 → 声明函数 → 元素.属性 = 要修改的值

2-1 修改元素的属性

如 img src="XXXX",我们通过元素的操作,其实还可以修改诸如src这样的路径

    

 


2-2 修改表单元素属性

案例:点击小眼睛把密码改为明文显示

    

 案例2:按钮点击之后,不给再点击

 


2-3 使用this指向函数调用者

  • 上述案例“按钮点击之后,不给再点击” 的 btn.disabled = true; 可以改写为 this.disabled = true; 效果一样

  • this指向的是函数调用者。


3-1 通过 element.style 样式属性操作

我们可以通过 JS 修改元素的大小、颜色、位置等样式

 

element.style 的语法只能一次修改一个属性。 如果需要批量修改属性,建议使用className语法,后面会学习

 

代码示例

    

 案例:淘宝二维码点叉隐藏(思路:点击按钮,则隐藏元素)

 案例:循环精灵图

案例:新浪下拉菜单



Document

下拉菜单
  • 1
  • 2
  • 3
  •  


    3-2 通过 element.className 进行样式属性批量修改

    基本语法


    注意事项

    • 如果样式修改较多,可以采取操作类名方式更改元素样式。

    • 通过element.className赋值的新css类名样式,会覆盖掉原先元素所使用的CSS样式类名

    • 如果想保留原先的CSS样式类名,可以写成 element.className = '原先的类名 新样式类名';

    代码示例

    
    Document
    
    

    4-1 获取用户输入的值 inputElement.value

    //input表单元素的元素对象是i的话,则获取用户输入的内容的语法是var XXX = i.value;

    案例:密码框格式提示错误信息

    
    
    Document
    
    
    X 格式不符合要求!需要6位,且含大小写

     

    路二:光标离开,则触发事件。 input.onblur


    4-2 案例:判断用户输入的密码是否符合要求

    JS中的字符不能直接当ASCII码使用!需要进行转换

    char → ASCII

     let x = 'a';x.charCodeAt(); //会输出'a'的ASCII码,即97

    ASCII → char

    String.fromCharCode(97); //会输出ASCII码为97的字符,即'a'

    示例代码:用户输入的密码 小于6位,并且不含大写和小写 则提示不合格

    
    
    Document
    
    
    X 格式不符合要求!需要6位及以上,且含大小写

    5-1 获取自定义属性

    什么是自定义属性?

    • 写在标签内的非内置属性,则被视为自定义属性

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

    • 如下列的index。它不属于Html内置的属性,但是也不会编译报错(毕竟Html是文本语言嘛),而是会把index看作一个程序员自定义的属性

     

    自定义属性如何获取?

    元素对象.getAttribute('属性名字');
    • 需要注意的是:自定义属性的获取语法,也可以作用于 内置元素属性(如style、src、title等)

    区别


    6-2 设置自定义属性的值

    值得注意的是:若标签名中没有对应的自定义属性,则在使用setAttribute的时候会自动添加这个属性

     

    代码示例  


    6-3 移除自定义属性

    element.removeAttribute('属性');

    [ 总结 ]

    相关内容

    热门资讯

    喜欢穿一身黑的男生性格(喜欢穿... 今天百科达人给各位分享喜欢穿一身黑的男生性格的知识,其中也会对喜欢穿一身黑衣服的男人人好相处吗进行解...
    发春是什么意思(思春和发春是什... 本篇文章极速百科给大家谈谈发春是什么意思,以及思春和发春是什么意思对应的知识点,希望对各位有所帮助,...
    网络用语zl是什么意思(zl是... 今天给各位分享网络用语zl是什么意思的知识,其中也会对zl是啥意思是什么网络用语进行解释,如果能碰巧...
    为什么酷狗音乐自己唱的歌不能下... 本篇文章极速百科小编给大家谈谈为什么酷狗音乐自己唱的歌不能下载到本地?,以及为什么酷狗下载的歌曲不是...
    华为下载未安装的文件去哪找(华... 今天百科达人给各位分享华为下载未安装的文件去哪找的知识,其中也会对华为下载未安装的文件去哪找到进行解...
    家里可以做假山养金鱼吗(假山能... 今天百科达人给各位分享家里可以做假山养金鱼吗的知识,其中也会对假山能放鱼缸里吗进行解释,如果能碰巧解...
    四分五裂是什么生肖什么动物(四... 本篇文章极速百科小编给大家谈谈四分五裂是什么生肖什么动物,以及四分五裂打一生肖是什么对应的知识点,希...
    怎么往应用助手里添加应用(应用... 今天百科达人给各位分享怎么往应用助手里添加应用的知识,其中也会对应用助手怎么添加微信进行解释,如果能...
    客厅放八骏马摆件可以吗(家里摆... 今天给各位分享客厅放八骏马摆件可以吗的知识,其中也会对家里摆八骏马摆件好吗进行解释,如果能碰巧解决你...
    美团联名卡审核成功待激活(美团... 今天百科达人给各位分享美团联名卡审核成功待激活的知识,其中也会对美团联名卡审核未通过进行解释,如果能...