位置: 编程技术 - 正文

JavaScript DOM进阶方法(js中dom的用法)

编辑:rootadmin

推荐整理分享JavaScript DOM进阶方法(js中dom的用法),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:javascript中dom的含义,js dom bom,js dom操作方法,js dom bom,js中dom的用法,js中dom的用法,js domcontentloaded,js dom操作方法,内容如对您有帮助,希望把文章链接给更多的朋友!

DOM自身存在很多类型,在上一章中有介绍,比如Element类型:表示的是元素节点;再比如Text类型;表示的是文本节点;

一 DOM类型

类型名 说明Node 表示所有类型值的统一接口,IE不支持;Document 表示文档类型;Element 表示元素节点类型;Text 表示文本节点类型;Comment 表示文档中的注释类型;CDATASection 表示CDATA区域类型;DocumentType 表示文档声明类型;DocumentFragment 表示文档片段类型;Attr 表示属性节点类型;

1.Node类型

DOM1级定义了一个Node接口,该接口将由DOM中的所有节点类型实现; 这个Node接口在JavaScript中是作为Node类型实现的; 除IE之外,在其他所有浏览器中都可以访问到这个类型;

2.Document类型

// Document类型表示文档,或文档的根节点,而这个节点是隐藏的,没有具体的元素标签;document; // document;document.nodeType; // 9;类型值;document.childNodes[0]; // DocumentType;第一个子节点对象;document.childNodes[1]; // HTMLHtmlElement; 对象;

// 如果想直接得到<html>标签的元素节点对象HTMLHtmlElement,可以直接使用documentElement即可;document.documentElement; // HTMLHtmlElement;

// 很多时候需要得到<body>标签,之前常用的是:document.getElementsByTagName('body')[0];document.body; // HTMLBodyElement;

// 在<html>之前还有一个文档声明:<!DOCTYPE>会作为浏览器的第一个节点来处理;document.doctype; // DocumentType;

// 在Document中有一些遗留的属性和对象集合,可以快速的帮助我们精确的处理任务;// 属性document.title; // 获取和设置<title>标签的值;document.URL; // 获取URL路径;document.domain; // 获取域名;    // 当页面中包含来自其他子域的框架或内嵌框架时,能够设置document.domain就非常方便了;    // 由于跨域安全限制,来自不同子域的页面无法通过JavaScript通信;    // 而通过将每个页面的document.domain设置为相同的值,这些页面就可以相互访问对方的JavaScript对象了;document.referrer;          // 保存着链接到当前页面的那个页面的URL;// 对象集合document.anchors; // 获取文档中带name属性的<a>元素集合;document.links; // 获取文档中带href属性的<a>元素集合;document.forms; // 获取文档中<form>元素集合;document.images; // 获取文档中<img>元素集合;

3.Element类型

// Element类型用于表现HTML中的元素节点.在上一章中,介绍了对元素节点进行查找/创建等操作;// 元素节点的nodeType为1;nodeName为元素的标签名;// 元素节点对象在非IE浏览器可以返回它具体元素节点的对象类型;元素名 类型HTML HTMLHtmlElement;DIV HTMLDivElement;BODY HTMLBodyElement;P HTMLParamElement;

4.Text类型

5.Comment类型

Comment类型表示文档中的注释,nodeType是8,nodeName是#comment,nodeValue是注释的内容; var box = document.getElementById('box'); alert(box.firstChild); // Comment;

JavaScript DOM进阶方法(js中dom的用法)

6.Attr类型 Attr类型表示文档元素中的属性;nodeType为;nodeName为属性名,nodeValue为属性值;详细内容在上一章;

二 DOM扩展1.呈现模式

2.滚动

DOM提供了一些滚动页面的方法 document.getElementById('box').scrollIntoView(); // 设置指定可见;

3.children属性

由于子节点空白问题,IE和其他浏览器解释不一致;如果只想得到有效子节点,可以使用children属性;这个属性是非标准的; var box = docuemnt.getElementById('box'); alert(box.children.length); // 得到有效子节点数目;

4.contains()方法

判断一个节点是不是另一个节点的后代,可以使用contains()方法; var box = document.getElementById('box'); alert(box.contains(box.firstChild)); // =>true;

三 DOM操作内容1.innerText属性

2.innerHTML属性

innerHTML属性可以解析HTML; document.getElementById('box').innerHTML; // 获取文本(不过滤HTML); document.getElementById('box').innerHTML = '<b></b>'; // 加粗的; 虽然innerHTML可以插入HTML,但本身还是有一定的限制,也就是所谓的作用域元素,离开这个作用域就无效了; box.innerHTML = "<script>alert('Lee');</script>"; // <script>元素不能被执行; box.innerHTML = "<style>background:red;</style>"; // <style>元素不能被执行;

3.outerText

outerText在取值的时候和innerText一样,同时Firefox不支持; 而且赋值方法相当危险,它不单替换文本内容,还将元素直接抹去; var box = document.getElementById('box'); box.outerText = '<b></b>'; alert(document.getElementById('box')); // =>null; 不建议使用;

4.outerHTML

四 小结

DOM是语言中立的API,用于访问和操作HTML和XML文档;DOM1级将HTML和XML文档形象地看作一个层次化的节点树,可以使用JavaScript来操作这个节点树,进而改变底层文档的外观和结构;

DOM由各种节点构成,简要总结如下:

1.最基本的节点类型是Node,用于抽象地表示文档中一个独立的部分;所有其他类型都继承自Node;2.Document类型表示整个文档,是一组分层节点的根节点;在JavaScript中,document对象是Document的一个实例;使用document对象,有很多种方式可以查询和获取节点;3.Element节点表示文档中的所有HTML或XML元素,可以用来操作这些元素的内容和属性;4.另外还有一些节点类型,分别表示文本内容/注释/文档类型/CDATA区域和文档片段;

JavaScript DOM元素尺寸和位置 一获取元素的CSS大小1.通过style内联获取元素的大小varbox=document.getElementById('box');//获得元素;box.style.width;//px;box.style.height;//px;//PS:style获取只能取到行

JavaScript DOM操作表格及样式 一操作表格table标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTMLDOM来操作它;//使用DOM来创建表格;vartable=document.createElement('table');ta

JavaScript 事件绑定及深入 事件绑定分为两种:一种是传统事件绑定(内联模型/脚本模型);上一章内容;一种是现代事件绑定(DOM2级模型);现代事件绑定在传统事件绑定基础上提供了更

标签: js中dom的用法

本文链接地址:https://www.jiuchutong.com/biancheng/382833.html 转载请保留说明!

上一篇:JavaScript DOM基础(js dom操作方法)

下一篇:JavaScript DOM元素尺寸和位置(html dom元素)

  • 营业执照是怎么样子的
  • 工亡赔偿金如何支付
  • 银行手续费发票图片
  • 佣金开什么发票
  • 增值税属于会计科目的什么
  • 金蝶以前年度损益调整属于哪类科目
  • 外商投资企业与内资合资是国企吗
  • 货币形式投资的特点是
  • 怎么确定印花税申报成功
  • 股息红利税补缴什么意思
  • 公户转到老板私人账户
  • 事业单位财政授权书模板
  • 企业获得的燃油补贴为什么还需要缴纳企业所得税呢?
  • 招聘发票可以抵扣吗
  • 电子商务平台支付的区别
  • 携税宝报税操作流程
  • 当期应税销售收入是含税还是不含税
  • 工程已完工又发生了成本怎么处理
  • 公司与个人合伙协议
  • 知识产权代理公司怎么盈利
  • 应收账款账龄怎么查
  • 专项储备属于利润分配吗
  • 海关增值税当月可以抵扣吗
  • 出口货物怎么开具发票
  • 知识产权代理公司前景如何
  • windows10专业版是哪个版本
  • 免税收入税额的含义
  • 材料没入库的会计分录
  • 实收资本怎么用
  • 个人出租住宅需要交哪些税
  • Windows XP具有类似于Apple Aqua的秘密主题
  • openssh centos
  • dghm.exe是什么程序
  • 怎么做好零售
  • 今日冬至有什么讲究吗
  • 出口企业要缴纳印花税吗
  • 以前年度少记税金及附加
  • 托收的收款人是谁
  • 取得经营所得的个人,有综合所得的是什么意思
  • 会计要考哪些证书,难度如何
  • 预付账款后收到货物会计分录
  • 物业用房需要交维修基金吗
  • 公户网银丢了
  • mysql语句语法
  • 企业合并发生的审计费用,评估费用
  • 医院执行政府会计制度操作指南 .pdf
  • 当月开票可以当月勾选吗
  • 购买股票的交易费用计入入账价值吗
  • 法律中的大额和小额规定
  • 一般纳税人简易计税方法适用情形
  • 劳务派遣公司经营情况说明怎么写
  • 收到政府补贴如何做帐
  • 政府代建项目计划方案
  • 毁损的原材料怎么处理
  • 以前年度损益调整属于哪类科目
  • 小规模纳税人怎么算税
  • 美国支票上的收款人地址不对怎么办
  • 无形资产管理的特点
  • 会计账簿的设计原则有哪些
  • mysql与c++相连
  • win8系统怎么重置
  • win7共享在哪
  • securecrt keymap
  • win8桌面右键无法使用
  • win10周年版
  • win7系统打印机共享给win10
  • linux isolcpus
  • win10 sfc命令
  • win10商店重置后不见了
  • 深入理解新发展理念,推进供给侧结构性改革
  • github上有什么
  • Android Toast设置弹窗大小
  • network备份软件
  • python生成txt文档
  • shell语言的特点
  • 安康国税局电话号码
  • 税务局税收风险排查总结
  • 出口报价必须含增值税吗
  • 国家税务总局资阳市雁江区税务局
  • 小规模纳税人开专票需要交税吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设