JS的应用（document对象）

Posted 2020-10-16 23滴雨

      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语言里需要去掉“-”，并且表示“-”后面的单词首字母大写。