网站商城开发公司,广州做网站的网络公司,wordpress 表单,桂林整站优化DOM对象1. DOM树当网页被加载时#xff0c;浏览器会创建页面的文档对象模型#xff08;Document Object Model#xff09;#xff0c;通过 HTML DOM对象#xff0c;可访问 JavaScript HTML 文档的所有元素。HTML DOM 模型被构造为对象的树。节点(Node)#xff1a;HTML文档…DOM对象1. DOM树当网页被加载时浏览器会创建页面的文档对象模型Document Object Model通过 HTML DOM对象可访问 JavaScript HTML 文档的所有元素。HTML DOM 模型被构造为对象的树。节点(Node)HTML文档中的所有内容都可以称之为节点包含元素节点、属性节点、文本节点、注释节点和文档节点。文档(Document)就是指HTML或者XML文件。元素(Element)HTML文档中的标签可以称为元素。2. 获取HTML元素通常通过 JavaScript需要找到要操作的 HTML 元素。通过 id 找到 HTML 元素通过标签名找到 HTML 元素通过类名找到 HTML 元素通过id来找到 HTML 元素效率高推荐使用。2.1 通过 id 获取元素使用实例查找 idbox 元素var box document.getElementById(box);
如果找到该元素则该方法将以对象在 box 中的形式返回该元素。 如果未找到该元素则 box 将包含 null。2.2 通过类名获取元素使用实例查找文档中所有 classbox 元素var box document.getElementsByClassName(box);
注意通过标签名获取到的对象是一个数组不能直接当成标签使用2.3 通过标签名获取元素使用实例查找文档中所有的 p 元素var obj document.getElementsByTagName(p);
注意通过标签名获取到的对象是一个数组不能直接当成标签使用3.入口函数window.onload是在dom文档树加载完和所有文件加载完之后执行一个函数也称为入口函数。如果在body的script中获取获取文档中的HTML元素就必须在window.onload中执行该操作不然将无法成功的获取到HTML元素。scriptwindow.onload function () {var obj document.getElementById(box);alert(获取#box元素成功);}
/script
注意一个文档中只能有一个入口函数。4. document文档4.1 获取元素节点document.bodydocument.body获取文档中的 body 元素。document.linksdocument.links获取文档中的所有 a 元素返回的结果是一个数组。document.imagesdocument.images获取文档中的所有 img 元素返回的结果是一个数组。document.formsdocument.forms获取文档中的所有 forms 表单返回的结果是一个数组。document.alldocument.all获取文档中的所有元素返回的结果是一个数组。4.2 document其他操作document.cookiedocument.cookie 返回当前页面存放的cookie值cookie就是本浏览器的一个数据存储技术后面的课程会细讲。document.domaindocument.domain 返回的就是当前网页的域名。document.titledocument.title 返回当前title标签里面的内容。document.URLdocument.URL 返回当前页面的全地址。document.referrerdocument.referrer 返回当前页面是从哪个一页面跳转过来的。4.3 document表单操作针对表单的元素节点的获取我们还可以通过form元素中的name属性来快速找到该from元素语法document.from的name属性值bodyform actionlogin.jsp namelogininput typetext nameuserNameinput typepassword namepasswordinput typesubmit value提交 namesubmit/formscript// 获取name属性值为“login”的form元素var form document.login;/script
/body
得到from元素中的“表单域元素”和“表单按钮”元素也可以用name属性来获取语法from元素.子元素name属性值。bodyform actionlogin.jsp namelogininput typetext nameuserNameinput typepassword namepasswordinput typesubmit value提交 namesubmit/formscript// 获取name属性值为“login”的form元素var form document.login;// 获取普通文本域标签var userName form.userName;// 获取密码框标签var userName form.password;// 获取登录按钮标签var submit form.submit;/script
/body
