本文目录一览:
- 1、怎么用DOM创建a节点
- 2、DOM的理解与操作
- 3、python DOM有什么用
- 4、如何用python操作xml文件,用dom
- 5、python中who, dom=“”,“”?
- 6、DOM中每个节点就是一个对象,意思是元素节点,文本节点,属性节点分别都是一个对象?
怎么用DOM创建a节点
用JQuery选择器能够快捷而轻松地查找到文档中的某个特定的元素节点,然后可以用attr()方法来获取元素的各种属性的值。但真正的DOM操作并非这么简单。在DOM操作中,常常需要动态创建HTML内容,使文档在浏览器里的呈现效果发生变化,并且达到各种各样的人机交互的目的。
HTML DOM结构如下:
p class="nm_p" title="欢迎访问脚本之家" 欢迎访问脚本之家/p ul class="nm_ul" li title='PHP编程'简单易懂的PHP编程/li li title='JavaScript编程'简单易懂的JavaScript编程/li li title='JQuery编程'简单易懂的JQuery编程/li /ul
创建元素节点
例如要创建两个li元素节点,并且要把它们作为ul元素节点的子节点添加到DOM节点树上。完成这个任务需要两个步骤。
1. 创建两个li新元素。
2. 将这两个新元素插入文档中。
第1个步骤可以使用jQuery的工厂函数$()来完成,格式如下:
$(html);
$(html)方法会根据传入的HTML标记字符串,创建一个DOM对象,并将这个DOM对象包装成一个jQuery对象后返回。
首先创建两个li元素,jQuery代码如下:
var $li_1 = $("li/li"); // 创建第一个li元素 var $li_2 = $("li/li"); // 创建第二个li元素
然后将这两个新元素插入文档中,可以使用jQuery中的append()等方法。JQuery代码如下:
var $parent = $(".nm_ul"); // 获取ul节点。li的父节点 $parent.append($li_1); // 添加到ul节点中,使之能在网页中显示 $parent.append($li_2); // 可以采取链式写法:$parent.append($li_1).append($li_2);
动态创建的新元素节点不会被自动添加到文档中,而是需要使用其他方法将其插入文档中。当创建单个元素时,要注意闭合标签和使用标准的XHTML格式。例如创建一个p元素,可以用$("p/")或者$("p/p"),但不要使用$("p")或者大写的$("P/")。
创建文本节点
已经创建了两个li元素节点并把它们插入文档中了。此时需要为创建的元素节点添加文本内容。
JQuery代码如下:
var $li_1 = $("li新增节点:数据结构/li"); // 创建第一个li元素 var $li_2 = $("li新增节点:设计模式/li"); // 创建第二个li元素 var $parent = $(".nm_ul"); // 获取ul节点。li的父节点 $parent.append($li_1); // 添加到ul节点中,使之能在网页中显示 $parent.append($li_2); // 可以采取链式写法:$parent.append($li_1).append($li_2);
如以上代码所示,创建文本节点就是在创建元素节点时直接把文本内容写出来,然后使用append()等方法将它们添加到文档中就可以了。
无论$(html)中的HTML代码多么复杂,都要使用相同的方式来创建。例如$("liem这是/emb一个/ba href="#"复杂的组合/a/li");
创建属性节点
创建属性节点与创建文本节点类似,也是直接在创建元素节点时一起创建。JQuery代码如下:
var $li_1 = $("li title='新增节点:数据结构'新增节点:数据结构/li"); // 创建第一个li元素 var $li_2 = $("li title='新增节点:设计模式'新增节点:设计模式/li"); // 创建第二个li元素 var $parent = $(".nm_ul"); // 获取ul节点。li的父节点 $parent.append($li_1); // 添加到ul节点中,使之能在网页中显示 $parent.append($li_2); // 可以采取链式写法:$parent.append($li_1).append($li_2);
通过浏览器查看源代码工具查看代码,可以看到最后两个li元素多了名为“title”的属性节点。由此可以判断,创建的元素的文本节点和属性节点都已经添加到网页中了。由此可见用jQuery来动态创建HTML元素是非常简单、方便和灵活的。
DOM的理解与操作
有一定的JS基础后,就可以进入 dom 环节了,dom使得网页的交互效果得到完美呈现,可以说dom真正打开了网页和用户之间的通道桥梁,日常生活中我们点击鼠标,敲击键盘,甚至于无意间触碰到屏幕(触摸屏),都会或多或少或大或小的得到一些躲藏起来的内容。
打开淘宝,在输入框输入商品时,下拉的推荐商品:
或是当打开某个不想再浏览的网页时,右上角的那个×:
这些大部分都存在DOM的身影。
这里的“DOM”,通常来讲,叫做 DOM 文档对象模型 , 通过操纵DOM,可以随意更改内容,样式,或者增删改查 ,因为网页是在浏览器中显示的,整个浏览器是BOM,所以DOM其实是BOM的一部分,BOM 就是 window对象 ,DOM 就是 document(文档)对象。
如果该元素,是网页的必备元素,而且只能有一个,可以通过document对象直接获取。比如:图片的src属性:
任由我们怎么去修饰图片的显示,但它本身的路径属性是独有的,所以我们可以直接获取:
更多的时候,我要需要获取网页中的指定元素,这就需要专门的方法来获取了,这里列举几个方法:
getElementById()方法,根据元素的id属性值来获取指定的元素,因为ID的唯一性,使得该方法需要搭配ID选择器使用,如果网页里ID重复时,它会获取第一个:
getElementsByTagName()方法,根据元素的标签名获取所有该元素,该方法获取的是所有该标签的元素,以伪数组的形式呈现:
getElementsByClassName()方法,根据元素的类选择器名称获取所有该元素,该方法获取的途径是标签的类,也就是class属性,由于拥有该属性的标签可能不只一个,所以该方法获得的也是一个伪数组(还有,可以看方法名,凡是带Elements的大多数都是伪数组):
getElementsByName()方法,根据元素的name属性值获取所有该元素,相同的性质,有name属性的标签也不少:
querySelector()方法,根据选择器的名称返回元素,如果有多个元素,只返回第一个元素,这个方法就比较常用了,而且IE这个啥也不咋适配的浏览器现在几乎不咋能见到了,可以多多考虑用他了该方法是 ES6新增,无论是ID 还是class都可以选,但是和上面区别的是选ID时前面要加#号,选class时前面要加“.”:
区别于Elements,这里是个单数,所以只会获取一个,要是想获取多个相同的,就用querySelectorAll()吧!querySelectorAll()看这个ALL就知道它是用来选全部的:
最后这俩方法更实用,可以选取CSS几乎所有选择器,而且querySelectorAll()得到的数组数据后还可以使用数组的方法。
操作DOM的样式 ,有多种方式:
通过style属性直接设置
通过className属性设置类选择器
也可以通过classList属性添加多个类选择器
操作DOM的内容:
innerText属性,用于获取 和 操作 DOM的文本内容。
innerHTML属性,用于获取 和 操作 DOM的HTML内容:
createElement()方法,用于创建DOM元素:
appendChild()方法,用于在当前DOM元素中添加子元素:
自删 remove()方法,是元素删除自己:
通过父级删除子级 removeChild()方法,是删除元素里面指定的子元素:
python DOM有什么用
DOM介绍
(1)什么是DOM
·DOM:文档对象模型。DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。
·DOM就是由节点组成的。
相关推荐:《Python教程》
(2)解析过程
·HTML加载完毕,渲染引擎会在内存中把HTML文档,生成一个DOM树,getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性。
·DOM树(一切都是节点)
DOM的数据结构如下:
上图可知,在HTML当中,一切都是节点:(非常重要)
·元素节点:HMTL标签。
·文本节点:标签中的文字(比如标签之间的空格、换行)
·属性节点::标签的属性。
整个html文档就是一个文档节点。所有的节点都是Object。
(3)DOM可以做什么
·找对象(元素节点)
·设置元素的属性值
·设置元素的样式
·动态创建和删除元素
·事件的触发响应:事件源、事件、事件的驱动程序
如何用python操作xml文件,用dom
用replace应该可以的
xml = string.replace(xml, "string name="version_string"(.*)/string", "string name="version_string"(你想要的东西)/string")
python中who, dom=“”,“”?
who, dom = "", ""
这句代码,定义了2个变量,分别是 who 和 dom, 它们的初始值都是 ""
DOM中每个节点就是一个对象,意思是元素节点,文本节点,属性节点分别都是一个对象?
你说的是HTML DOM?还是Jquery DOM?不同的dom对应的内容是不一样的,绝对不能混合使用。不过从你说到节点来看,应该是HTML DOM。根据我的理解,先说明,我也是学习js的一个新手。以下纯属个人见解,仅供参考:dom中的节点,无需深究它是否是对象,你只需要知道对应的节点代表什么就行。文本节点就是元素标签的文字内容,属性节点就是元素标签的属性,元素节点就是元素标签。然后,知道了这些,你就应该想得到,标签,是有属性,有内容的。也就是说你可以通过dom创建元素标签,属性,文字内容,然后向你创建的元素标签添加属性和文字内容,个人觉得dom的作用就是如此。