zoukankan      html  css  js  c++  java
  • JS的应用(document对象)

          document对象为对网页内部文档的操作,它基本上所有的东西都可以操作,一般用来操作一些标签。

          而要想操作这个标签里面的元素,首先要找到该元素。JS里面找元素的方式类似于样式表的选择器找元素的方式,同时为元素定义一个变量:

                1.通过id查找:var a = document.getElementById("a");,括号内为元素的id;

                2.通过class查找:var b = document.getElementsByClassName("a");,括号内为元素的class;如果在class名后面加上[0],则可找到其中第一个元素,[]内的数字和数组内数字的顺序相同;

                3.通过标签名查找:var c = document.getElementsByTagName("div");,括号内为标签名;

                4.通过name查找:var d = document.getElementsByName("uid");,这种查找方式适用于表单元素,括号内为表单元素的名字(name)。

          其次是对内容进行操作,即获取和修改:

                获取:例如var d = document.getElementById("a");

                      要想获取元素内文本的内容,可输入alert(d.innerText);,不过这种方式只能输入文本,样式不显示;

                      如果要获取元素内所有的内容,包含标签,则需要使用alert(d.innerHTML);。

                修改,会把原有的内容覆盖:

                      修改元素里面的文本内容使用,例:d.innerText = "<b>你好</b>";;

                      修改元素内包括HTML代码在内的所有元素,例:d.innerHTML = "<b>你好</b>";;

                      操作表单元素的内容,例:

                      

                      操作属性:

                            先设置一个变量,“var a = document.getElementById("a");”

                            “alert(a.getAttribute("id"));”为获取属性;

                            “a.setAttribute("code","p001"); ”为设置属性;

                            “a.removeAttribute("bs"); ”为移除属性;

                            如果想要设置一个按钮,点击后可以将复选框内的内容全部选中,可输入:

                            

                            当点击该按钮时就会自动全部选中。

                      操作样式:

                           

                           这样就可以修改原网页内文本的样式。不过这种修改方法只能获取到内联的样式,内嵌或者外部的都获取不到。

                           这种对样式的操作写法与样式表里的写法有所区别:如果在样式表里存在“-”的,在JS语言里需要去掉“-”,并且表示“-”后面的单词首字母大写。

  • 相关阅读:
    新添61工程文件后无法编译问题
    beaglebone_black_学习笔记——(4)闪烁LED之shell命令
    PADS技巧——铺铜
    自定义map对象,用于再不支持es6的map的时候
    vue.js基础学习(2)
    vue.js基础学习(1)
    ie浏览器float兼容性
    webAPI路由的使用
    webAPI中使用log4net进行日志记录
    webAPI中使用FormsAuthenticationTicket作为登录权限票据
  • 原文地址:https://www.cnblogs.com/maoqiaoyu123/p/7993721.html
Copyright © 2011-2022 走看看