首页
学习
活动
专区
圈层
工具
发布
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    JavaScript中的Dom和Bom

    但这份文档本身不会包含任何内容,因此元素节点可以包含其他的节点。 文本节点是节点类型的一种,它总是被包含在元素节点内部,形成页面文档的主要内容。...alert(node.nodeType); nodeValue,如果想改变文本节点的值,就可以使用这个属性: node.nodeValue; 比如当有一个p元素节点,里面有一些文本内容,如果想取得这些文本内容...3.4.1 传统方法 document.write()方法可以方便快捷的把字符串插入到文档中 innerHTML属性可以用来读写html的内容 3.4.2 DOM操作法 如果想把一段文本内容放到p元素中...createTextNode,创建一个文本节点用于放文本内容,和上面几乎一样,只是传入的参数就是文本字符串,创建好后依旧是文档中的一个游荡的孤儿。...car和函数run,它们会自动归为window对象的,因此可以通过window点来访问它们。

    1.3K10

    JavaScript---网络编程(7)-Dom模型(节点间的层次关系,节点的增、删、改)

    利用节点间的层次关系获取节点: 上一节讲了3中获取的方式: * ※※一、绝对获取,获取元素的3种方式:—Element * 1、getElementById(): 通过标签中的id属性值获来取该标签对象...* 2、getElementsByName(): 通过标签中的name属性值来获取该标签对象集合 * 3、getElementsByTagName(): 通过标签名来获取该标签对象集合 现在来看看相对获取的方式...id属性值获来取该标签对象 * 2、getElementsByName(): 通过标签中的name属性值来获取该标签对象集合 * 3、getElementsByTagName():...//创建一个文本节点 var oTextNode = document.createTextNode("新添加的文本内容"); //获取div1...---建议使用父节点来删除 //因为-自己删除自己,怎么可能删除干净嘛 oDivNode2.parentNode.removeChild

    1.2K10

    关于DOM的理解

    (元素节点(属性节点,文本节点)) 通常可以通过开发者工具(如firebug)查看dom结构,但是要说明一点,开发者工具中的DOM并不完整,因为有些元素存在于DOM中,但是不会被开发者工具显示。...所以在构造DOM树时,根元素并不适合作为根节点,所以就出现了文档节点,而根节点作为文档节点的子节点。 补充内容: 值——元素类型 1——元素节点,表示文档中元素,元素节点是唯一能够拥有属性的节点类型。...元素和属性的文本内容都是由文本节点来表示的。 2——属性节点,代表元素的属性。 3——文本节点,只包含文本内容,也可以只包含空白。 4——CDATA段节点。...12——NOTATION记号节点表示了在DTD中声明的记号。 2、nodeName 对于元素节点,nodeName就是标签名。元素节点也可以通过tagName获取标签名。...(p2,p1); 可见DOM结构的改动(增删改)都是通过父节点来进行的。

    1.4K30

    深入理解JavaScript与DOM

    Element节点在页面里展示的是一个元素,所以如果你有段落元素(),你可以通过这个DOM节点来访问。...Text节点在页面里展示的所有文本相关的元素,所以如果你的段落有文本在里面的话,你可以直接通过DOM的Text节点来访问这个文本 Document节点代表是整个文档,它是DOM的根节点。 3....Node节点 通过DOM API创建内容的时候需要注意node节点的2种类型,一种是元素节点,一种是text节点,上一章节已经列出了所有的节点类型,这两种需要我们现在特别注意。...关于W3C和微软模型还有其他的少许差异,比如this,在触发事件的时候函数中的this一般都是该元素上下文,,也就说this引用该元素自身,在基本事件注册和W3C模型中都没有问题,但在微软模型的实现里却可能出错...总结 原生的DOM方法和属性足够我们日常的应用了,在今天的内容中,我们还覆盖到了DOM元素的操作以及相关的浏览器事件模型,同时也列举了一些例子便于大家理解。如果还有什么问题,欢迎留言讨论交流。

    84230

    【Web技术】1048- 手把手教你实现web文本划线的功能

    、如何尽可能少的存储数据、如何精准的回显划线、如何处理重复划线、如何应对文本后续编辑的情况等等。...起点的节点,通常是文本节点; startContainer返回range起点在startContainer内的位置的数字; 所以目标是要遍历startContainer和endContainer两个节点之间的所有节点来收集文本节点...item.parentNode.replaceChild(node, item) } else {// 否则只有文本的话直接创建一个文本节点来替换...但是,如果文档结构很复杂或者多次重复划线最终产生的节点和数据还是比较大的。...总结 本文介绍了一个实现web文本划线功能的极简实现,最初的想法是通过切割成单个字符来进行包裹,这样的优点是十分简单,缺点也很明显,产生的序列号数据很大、修改的DOM结构很复杂,在文章及demo的写作过程中经过实践

    56320

    HTML DOM 学习

    对页面中所有已存在的HTML事件作出反应 可以在DOM中创建新的HTML事件 DOM的特性: 整个HTML页面文档就是一个文档节点(只存在一个 根元素) 每一个HTML内的标签是一个元素节点...每一个HTML元素中的文本是文本节点 每一个HTML属性中的内容是属性节点 注释内容属于注释节点 DOM的节点: doucument 文档节点;HTML文档的父节点,DOM文档的根节点 element...我们需要使用数组下标的方式获取读取唯一的元素 另外,我们可以利用节点的关系来对元素标签获取进行规范和控制,例如: 我们获取的内容在div中的table中的th标签中的元素,那么我们使用 getElementsByTagName...()方法获取所有th标签,那么HTML页面中无数的th标签都会被获取 我们可以使用getElenemtsById()先定位目标div标签,再通过getElementsByTagName()方法获取th...和文本内容,包含标签自身 outerText 表示起始标签和结束标签之间的纯文本内容 DOM对象节点操作: 创建节点 createElement():创建元素节点 返回新节点的对象引用,参数是创建的元素节点的标签名

    1.3K20

    DOM 节点遍历:掌握遍历 XML文档结构和内容的技巧

    一些文本,比如 JavaScript 代码,包含许多 "避免错误,可以将脚本代码定义为 CDATA。CDATA 部分中的所有内容都会被解析器忽略。CDATA 部分以 "节点可以使用节点之间的关系来导航节点。导航 DOM 节点通过节点之间的关系在节点树中访问节点,通常被称为"导航节点"。... 元素输出 "x" 的父节点的节点名称避免空文本节点某些浏览器可能将空白空格或换行符视为文本节点。...获取元素的值在 DOM 中,一切都是节点。元素节点没有文本值。元素节点的文本值存储在子节点中,这个节点被称为文本节点。要检索元素的文本值,必须检索元素的文本节点的值。...更改元素的值在 DOM 中,一切都是节点。元素节点没有文本值。元素节点的文本值存储在子节点中,这个节点被称为文本节点。要更改元素的文本值,必须更改元素的文本节点的值。

    1.7K10

    AJAX 前端开发利器:实现网页动态更新的核心技术

    AJAX应用程序可能使用XML传输数据,但以纯文本或JSON文本传输数据同样常见。 AJAX允许通过在幕后与Web服务器交换数据,异步更新Web页面。...q="+str str 变量保存输入字段的内容 PHP 文件 - "gethint.php" PHP文件检查一个包含名字的数组,并将相应的名字返回给浏览器: 在上述示例中,当用户在输入字段中输入字符时,通过AJAX与服务器通信,并从PHP文件中获取相应的建议。建议将在 "txtHint" 元素中显示。...当用户在输入字段中输入字符时,通过AJAX与服务器通信,并从ASP文件中获取相应的建议。...> 在上述示例中,当用户选择一个客户时,通过AJAX与服务器通信,并从数据库中获取相应的客户信息。客户信息将以HTML表格的形式显示在具有 "txtHint" ID 的元素中。

    3.3K00

    PHPDOM中的children方法是什么

    在PHP开发中,PHPDOM是一个非常常用的类库,该类库是基于DOM模型的PHP扩展,主要用于处理XML和HTML文档。而其中的children方法是一种非常重要的函数,用于获取某个元素的所有子元素。...PHPDOM中的children方法是什么在使用children方法时,我们需要传递一个CSS选择器作为参数,该选择器用于指定需要获取子元素的元素。...此外,如果我们尝试使用children方法获取文本节点或注释节点,该方法同样会返回一个空的DOMNodeList对象。...综上所述,PHPDOM中的children方法是一种非常重要的函数,用于获取某个元素的所有子元素。在使用该方法时,我们需要传递一个CSS选择器作为参数,该选择器用于指定需要获取子元素的元素。...需要注意的是,使用该方法时需要避免一些常见的错误,例如传递不存在的CSS选择器、获取非元素节点等等。

    61010

    JavaScript---网络编程(6)-Dom和Bom模型概念讲解(节点获取,window对象)

    、getElementsByName(): 通过标签中的name属性值来获取该标签对象集合 * 3、getElementsByTagName(): 通过标签名来获取该标签对象集合...id属性值获来取该标签对象 * 2、getElementsByName(): 通过标签中的name属性值来获取该标签对象集合 * 3、getElementsByTagName...(): 通过标签名来获取该标签对象集合 ※※所有节点(标签、属性、文本)都有3个属性:nodeName、nodeType、nodeValue 1、nodeName:...节点的名称 2、nodeType:"标签"为1, "属性"为2,"文本"为3 3、nodeValue:"标签"节点是没有值的即null,属性和文本节点是有值的...而如果要获取该编辑框中的内容,则采用如下方式: alert(aNode[0].value);//其实是读取aNode[0]节点中的属性"value"的值 }

    82010

    【web必知必会】—— DOM:四个常用的方法

    下面就针对DOM做一下简单的介绍   在DOM中认为html中所有标签都是对象,整个HTML网页就是一颗文档树。   ...每一个标签都是这个文档中的一个对象,每个标签由元素节点、属性节点和文本节点组成。   ...元素节点:定义了该标签的类型   属性节点:定义了标签中的属性   文本节点:定义了标签所包含的文本,是标签的主要显示内容   他们的关系如下图所示: ?   ...关于DOM,最常用的四个方法:   1 getElementById() 通过标签中的id名称,获取节点对象   2 getElementsByTagName() 通过标签名字,获取节点对象的数组   ...getElementsById()   通过getElementById()可以返回该id所在的节点对象,在html中id是唯一的,不能重复,因此通过这个方法肯定只能得到一个对象。

    83850

    【PHP】文件写入和读取详解

    下工作的小伙伴们应该很熟悉,windows下的路径分隔符是“\”而不是“/”,但我们在写入路径时不能以钦定的“\”为分隔符 ?...但即使这样,也不推荐使用“\”,因为在OS(mac)下只能识别“/”不能识别“\” 本小节的结论:推荐坚持使用“/”作为分隔符 2.相对路径: 上一小节介绍的是绝对路径的写法,但这样却带来了另外一个问题...> • $_SERVER是PHP的超级全局变量(在代码任何地方都可访问,类型是数组),通过$_SERVER['DOCUMENT_ROOT']可取到服务器的默认根目录 服务器的默认根目录可通过php.ini...1即使不手写fclose,在PHP脚本执行结束后,也会自动关闭文件的 2但在一个长时间执行的脚本中,如果不写关闭文件的fclose(),在文件加锁的情况下会造成操作的阻塞,所以,写fclose是个好习惯...多出来的两个字节是windows下的回车换行符\n\r \n是换行,占一字节,\r是回车,占一字节,在六中我将会介绍 六.Windows和UNIX下的回车和换行 <?

    5.2K70

    DOM「建议收藏」

    (元素节点(属性节点,文本节点)) 通常可以通过开发者工具(如firebug)查看dom结构,但是要说明一点,开发者工具中的DOM并不完整,因为有些元素存在于DOM中,但是不会被开发者工具显示。...元素和属性的文本内容都是由文本节点来表示的。 2——属性节点,代表元素的属性。 3——文本节点,只包含文本内容,也可以只包含空白。 4——CDATA段节点。...12——NOTATION记号节点表示了在DTD中声明的记号。 w3c12种nodeType 2、nodeName 对于元素节点,nodeName就是标签名。元素节点也可以通过tagName获取标签名。...,获取元素节点内容,也就是元素节点包含的文本节点的值。...(p2,p1); 可见DOM结构的改动(增删改)都是通过父节点来进行的。

    1.4K20

    每天10个前端小知识 【Day 18】

    :规定当文本溢出时,显示省略符号来代表被修剪的文本 white-space:设置文字在一行显示,不能换行 overflow:文字长度超出限定宽度,则隐藏超出的内容 overflow设为hidden,...: 使用CDN(因为CDN会根据你的网络状况,替你挑选最近的一个具有缓存内容的节点为你提供资源,因此可以减少加载时间) 对css进行压缩(可以用很多打包工具,比如webpack,gulp等,也可以通过开启...浮动 (float) 在浮动布局中,元素首先按照普通流的位置出现,然后根据浮动的方向尽可能的向左边或右边偏移,其效果与印刷排版中的文本环绕相似。...比方说你现在看的这篇文章,只要文章内容加载出来就可以了,就算后面的广告脚本阻塞了后续HTML文档的加载,我们也是可以阅读和体验。...因为这段javascript脚本修改了DOM中第一个div中的内容,所以执行这段脚本之后,div节点内容已经修改为time.geekbang了。

    1.2K10
    领券