JS的应用(document对象)

      document对象为对网页内部文档的操做,它基本上全部的东西均可以操做,通常用来操做一些标签。数组

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

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

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

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

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

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

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

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

                  若是要获取元素内全部的内容,包含标签,则须要使用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语言里须要去掉“-”,而且表示“-”后面的单词首字母大写。

相关文章
相关标签/搜索