javascriptDOM操作方法——document节点方法

Posted 2020-10-10 忆华灯纵博

（2）查找节点

document.querySelector(selectors)   //接受一个CSS选择器作为参数，返回第一个匹配该选择器的元素节点。
document.querySelectorAll(selectors)  //接受一个CSS选择器作为参数，返回所有匹配该选择器的元素节点。
document.getElementsByTagName(tagName)  //返回所有指定html标签的元素
document.getElementsByClassName(className)   //返回包括了所有class名字符合指定条件的元素
document.getElementsByName(name)   //用于选择拥有name属性的HTML元素（比如<form>、<radio>、<img>、<frame>、<embed>和<object>等）
document.getElementById(id)   //返回匹配指定id属性的元素节点。
document.elementFromPoint(x,y)  //返回位于页面指定位置最上层的Element子节点。

1.document.querySelector(selectors) //接受一个CSS选择器作为参数，返回第一个匹配该选择器的元素节点。

document.querySelectorAll(selectors) //接受一个CSS选择器作为参数，返回所有匹配该选择器的元素节点。

<div id="text">
    <div id="test1">测试1</div>
    <div id="all" class="all">  
        <i>梦龙1</i>  
        <p class="box">  
            <em class="span">梦龙2</em>  
        </p>  
        <i class="span">梦龙3</i>  
        <p class="box">  
            <em>梦龙4</em>  
        </p>  
    </div>  
</div>
<button onclick="myFunction()">点我</button>
<script type="text/javascript">
    function myFunction(){
        //获取类名为test1的元素的文本内容
        var text = document.getElementById("text").querySelector("#test1");
        alert(text.textContent);
　　　　 //输出结果：测试1
        //获取类名为all的<div>中所有的<i>元素，类似于getElementsByTagName("i")  
        var i = document.getElementById("all").querySelectorAll("i");  
        //alert(i[1].textContent);
        //获取类名为span的所有元素  
        var span = document.querySelectorAll(".span");  
        //获取所有<p>标签中的所有<em>元素  
        var em = document.querySelectorAll("p em");  
    }
</script>

 2.document.elementFromPoint(x,y) //返回位于页面指定位置最上层的Element子节点。

<p>用户名查看代码文件（线上）</p>

<button id="btn">坐标(100,100)的地方会改变颜色</button>
<script>
   document.getElementById("btn").onclick = function() {
      document.elementFromPoint(100, 100).style.color = "#cd0000";
   };
</script>

效果如下：

（3）生成节点

document.createElement(tagName)   //用来生成HTML元素节点。
document.createTextNode(text)   //用来生成文本节点
document.createAttribute(name)  //生成一个新的属性对象节点，并返回它。
document.createDocumentFragment()  //生成一个DocumentFragment对象

1.document.createElement(tagName) //用来生成HTML元素节点。

<div id="text">    
</div>
<button onclick="create()">点我</button>
<script type="text/javascript">
    function create(){
        var node = document.createElement("h1");
        var tet = document.getElementById("text");
        node.innerHTML = "创建h1标签";
        tet.appendChild(node);
    }
</script>

2.document.createTextNode(text) //用来生成文本节点

<div id="text">    
</div>
<button onclick="create()">点我</button>
<script type="text/javascript">
    function create(){
        var element = document.createElement("div");
        element.className = "node";
        var textNode = document.createTextNode("<h1>h1标签</h1>");
        element.appendChild(textNode);
        document.body.appendChild(element);
　　　　 document.getElementById("text").innerHTML("<h1>h1标签</h1>");
    }
</script>

结果显示：使用createTextNode方法得到的结果是：<h1>h1标签</h1>
　　　　　而使用innerHTML方法可以解析 <h1>h1标签</h1> 得到结果:h1标签

3.document.createAttribute(name) //生成一个新的属性对象节点，并返回它。

<style type="text/css">
    .attr{
        color: red;
    }
</style>
<div id="text">    
attribute
</div>
<button onclick="create()">点我</button>
<script type="text/javascript">
    function create(){
        var attr = document.createAttribute("class");
        attr.value = "attr";
        document.getElementsByTagName("div")[0].setAttributeNode(attr);
    }
</script>

4.document.createDocumentFragment() //生成一个DocumentFragment对象

<ul><li>Coffee</li><li>Tea</li></ul>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
    var d=document.createDocumentFragment();
    d.appendChild(document.getElementsByTagName("LI")[0]);
    alert(d.childNodes[0].childNodes[0].nodeValue);
};
</script>

我们来看几种结果：

当alert(d)时，显示结果：

当alert(d.childNodes[0])时，显示结果：

当alert(d.childNodes[0].nodeValue)时，显示结果：null

当alert(d.childNodes[0].childNodes[0])时，显示结果：[ object Text ]

当alert(d.childNodes[0].childNodes[0]).nodeValue时，显示结果：[ Coffee ]

DocumentFragment节点不属于文档树，继承的parentNode属性总是null，它有一个很实用的特点，当请求把一个DocumentFragment节点插入文档树时，插入的不是DocumentFragment自身，而是它的所有子孙节点。这个特性使得DocumentFragment成了占位符，暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操作。 

如果使用appendChid方法将原dom树中的节点添加到DocumentFragment中时，会删除原来的节点。 

就会出现以下效果：