Javascript的DOM对象

版权声明:转载请说明去处,文章仅供学习参考 https://blog.csdn.net/qq_38487155/article/details/82701273


DOM:将HTML文档转换成一个DOM树,所有HTML标签都转换成对象,用js代码形式操纵HTML标签文档。

           document对象:整个文档对象
           element对象:标签对象
           属性对象
           文本对象

DHTML:是指HTML、CSS、javascript、dom技术集合




补充:所有DOM树除了顶层结点(document)外其它结点都继承于Node结点,都有以下方法和属性
(一)方法:


getElementsByTagName():获取当前节点的指定标签名孩子节点


appendChild(oNode) :给标签对象添加子节点。oNode是要添加的子节点。


removeChild(oNode):删除子节点。oNode是要删除的孩子节点


cloneNode( [bCloneChildren]) :克隆一个对象,bCloneChildren:表示是否需要克隆孩子节点


getAttribute(sAttributeName):获取属性值,sAttributeName是要获取的属性名


(二)属性:


childNodes:获取当前节点的所有子节点,返回一个数组。(兼容性差,建议使用getElementsByTagName())


firstChild:获取当前节点的第一个子节点


lastChild:获取当前节点的最后一个子节点


parentNode:获取当前节点的父节点


nextSibling:获取当前节点的下一个节点


previousSibling:获取当前节点的上一个节点


className:用于获取或设置标签的class属性值


innerHTML :表示获取/设置起始标签和结束标签中的内容



1、document对象(注意:以下方法作用域都是文档对象,即HTML标签下的第一层标签)
方法:
write():在页面显示变量,对象,或HTML标签
    补充属性: document.body.innerText:在document.write()失效时(需要不停调用write()时)使用,如实时显示时间案例。

getElementById("id值"):通过标签里的id属性值获得一个标签对象(记住所有对象定义都用var)
getElementsByName("Name值"):通过标签里的name属性值获得标签对象数组
getElementsByTagName("标签名"):通过标签名获得标签对象数组
createElement(tagName):创建标签(元素)节点。tagName为标签名
createTextNode(text):创建文本节点。


注意:
HTML标签有的有name属性,比如input、select、button等,而很多是没有的,比如td、div等,
只有有name属性的标签才可以使用getElementsByName方法。


2、Element对象:标签对象(注意:以下方法作用域都是标签对象,即标签对象下的第一层标签)
方法:


获取属性:getAttribute(name);方法
设置属性:setAttribute(name,value)方法。
删除属性:removeAttribute(name);方法。
在Element对象作用范围内查找其它结点(Element对象)唯一有效的
方法就是:getElementsByTagName(),该方法返回一个数组



案例:弹窗案例
补充window重要属性:
opener 返回对创建此窗口的窗口的引用对象。 (用于页面间的切换)


案例:在DOM树上添加DOM树结点,即添加标签
案例:下拉列表左右选择
案例:五国省市联动
案例:动态生成表格












总结:在html标签(即document对象)上加内容:
1、设置一个<div>标签,内容为空
2、利用<div>innerHTML属性往<div>标签加代码


 在普通标签(即Element对象)上加内容:
1、利用document的俩个方法写好标签对象和文本对象(注意:文本对象放在标签对象下)
createElement(tagName):创建标签(元素)节点。tagName为标签名
createTextNode(text):创建文本节点。
2、获取到要添加到的普通标签对象(Element对象)
3、利用对象的appendChild()方法将创建好的标签对象添加至该对象的分支下
appendChild(oNode) :给标签对象添加子节点。oNode是要添加的子节点。


同理可以删除HTML里的某些标签,获取到要删除的对象的上一级对象,通过removeChild(oNode)方法删除。


获取对象俩种情况:
HTML标签对象document下一般使用:getElementById(),getElementsByName(),getElementsByTagName()三种方法。
普通标签对象Element下使用:getElementByTagName()。












十二、js里表单标签的提交方式:
1、通过按钮输入项提交
-(1)获得表单对象form
-(2)也可以设置表单对象form的属性action,method等,必须在提交前设置(即调用submit()前设置)
-(3)调用表单对象的方法form.submit()
2、超链接提交
  <a href="提交页面地址?name属性值=value属性值"></a>


十三常用事件介绍:


onclick():鼠标点击事件
onchange():内容改变事件(一般在select里使用)
onfocus():得到焦点事件
onblur():失去焦点事件



案例:文本框未输入效果焦点

扫描二维码关注公众号,回复: 3305222 查看本文章

猜你喜欢

转载自blog.csdn.net/qq_38487155/article/details/82701273