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

时间: 2024-10-25 00:28:35

JS的应用(document对象)的相关文章

js/jquery 操作document对象

//获取对象 //js获取的是dom对象,jquery获取的是jquery对象 //jquery对象可以输出dom对象,索引方式输出dom对象,eq()[]方式输出dom对象; //通过id获取元素 /*var div=document.getElementById("one"); alert(div);//获取到的是一个html元素[object htmldivelement],DOM对象 var div=$("#one"); //alert(div);//获取到

JS中window.document对象

小知识点注:外面双引号,里面的双引号改为单引号:                  在div里面行高设置和整个外面高度一样,才能用竖直居中,居中是行居中                  文本框取出来的值是字符串,需要用parseint()转化为数字 Window.document对象 一.找到元素: docunment.getElementById("id"):根据id找,最多找一个:    var a =docunment.getElementById("id"

5月15日上课笔记-js中 location对象的属性、document对象、js内置对象、Date事件对象、

location的属性: host: 返回当前主机名和端口号 定时函数: setTimeout( ) setInterval() 二.document对象 getElementById(); 根据ID值获取一个DOM对象 getElementsByName(); 根据name属性值获取多个Dom对象 getElementsByTagName(); 根据标签获取多个DOM对象 获取标签体内容 innerHTML 获取input的value值 value 获取下拉框选中的值 value this 代

js:面向对象,Document对象:查找元素对象,修改元素,事件

面向对象编程 面向对象的编程,那么是更符合人类所接触的世界的逻辑思维. 将一个系统划分为各个子系统,子系统又由各个模块构成,将每个模块,系统划分为一个个对象,给这些对象赋予某些角色(属性/功能/方法). 伪面向对象编程语言 ---> 面向对象编程语言 1.创建对象的方式 (1) 字面量的方式 //字面量的形式 var student = { name:"蔡徐坤", type:"练习生", like:"唱跳rap篮球", rap:functi

JS操作document对象

找到对象: document.getElementById():返回对拥有指定 id 的第一个对象的引用. document.getElementsByName():返回带有指定名称的对象集合. document.getElementsByTagName():返回带有指定标签名的对象集合. document.getElementsByClassName():返回对拥有指定 class 的对象集合. 操作对象: 操作属性: 取值:getAttribte(): document.getElement

js的document对象

每个载入浏览器的 HTML 文档都会成为 Document 对象.Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问 Document字面翻译是文档 并且但在JS也是就文档的意思,就一当前网页(文档)对象. 当前网页里所有元素(对象)全部都在document中. 原文地址:https://www.cnblogs.com/lf98/p/12260069.html

js基础之DOM中document对象的常用属性方法

-----引入 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1  document.anchors  返回对文档中所有 Anchor 对象的引用.还有document.links/document.forms/document.images等 2  document.URL       返回当前文档的url 3  document.title       返回当前文档的标题 方法 1 

报表软件JS开发引用HTML DOM的location和document对象

上一次提到,在报表软件FineReport的JavaScript开发中,可以访问并处理的HTML DOM对象有windows.location.document三种.这次就继续介绍后两种,location和document对象. Location Location 对象包含有关当前 URL 的信息. Location 对象是 Window 对象的一个部分,可通过 window.location 属性来访问. location对象的常用属性 hash         设置或返回从#开始的URL h

JS中document对象和window对象有什么区别

简单来说,document是window的一个对象属性.Window 对象表示浏览器中打开的窗口.如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象.所有的全局函数和对象都属于Window 对象的属性和方法.document 对 Document 对象的只读引用.